你好，我这边是珠海公共法律小程序的开发团队成员，我们小程序主体是属于政务司法的。 由于业务发展需要申请小程序的长期性订阅模板，不知道能否通过社区技术人员反馈一下给运营团队开放对应的长期性订阅模板，或者有没有对应的邮件申请渠道？ 我们的小程序ID 是wx0f84b64be8cda5ae 想要申请的长期性订阅模板如下： [图片] 【小程序appid】wx0f84b64be8cda5ae 【小程序主体】珠海市司法局 【申请模板类目】司法 【申请模板名称】社区矫正事务通知 【使用场景】用于社区矫正事务通知 【模板字段】 矫正机构、事项类别、通知内容 【消息示例】 1、矫正机构：珠海司法局 事项类别：矫正对象在线签到 通知内容：请到珠海司法矫正平台完成在线报到。 2、矫正机构：珠海司法局 事项类别：矫正对象未正常完成在线签到 通知内容：XXX矫正对象尚未完成在线报到，请工作人员核查。

[图片] 引子：微盟第三届编程比赛今年的日期定于12月19号，我们组了一个叫“NAZA”的小队，然后参赛项目定了《拍卖》，开发周期一周半，测试时间半周。团队成员全部为前端组的，所以产品的原型、数据库、接口、小程序、测试全部自己完成(ps:UI实在没人会所以找了场外私人支持)，技术选型为了图快速和方便就选择了“云开发”(开赛前2天才学的文档😂)。这篇文章就以叙事的风格纪录一下我们完整的开发流程，内容主要涉及产品介绍、数据库设计、接口设计、接口开发、小程序页面开发，以及实时数据推送和定时触发器。 一、产品设计 这一期编程比赛的主题是：小技术、大营销，主要聚焦于商业创新、赋能商家，所以在综合考虑了类似公益项目、众筹项目、活动项目、游戏项目等之后选择了“拍卖”这个主题，主要是为了赋予商家针对其“爆款商品”或者“活动商品”去吸引用户，让其停留在该小程序中，并在各种激励、引导下让客户去购买商家真正“热销”“高利润”的商品。所以主要的设计模块如下： 1、后台管理，包括：拍卖商品列表、拍卖商品编辑页、商品列表、商品编辑页 2、拍卖中心，包括：首页、拍卖详情页、拍卖纪录页 3、商品展示，包括：商品列表页、商品详情页、订单页 4、个人中心，包括：个人中心页、收支明细页、竞拍商品&订单商品展示 5、其他页面，包括：拍卖币获取引导页、大转盘页、刮刮卡页、其他说明页等 二、开发准备 1、创建云开发模版，新建项目选择一个空目录，填入 AppID（使用云开发能力必须填写 AppID），勾选创建 “云开发 QuickStart 项目”，点击创建即可得到一个展示云开发基础能力的示例小程序。 2、小程序准备，这里使用了私人的一个小程序，然后开通云开发，在小程序开发者工具中点击“云开发”按钮，打开云控制台、根据提示开通云开发、创建云环境。 [图片] 3、微信公众平台，小程序后台中加入小伙伴的微信账号到“项目成员”中。 三、产品原型 从网上搜索了一下好的原型开发工具，然后选择了“墨刀”，坑的是我只有2天的原型设计时间，因为我用的是试用版(本屌丝比较qiong～)，试用期过了之后不能再导出html文件了😂。原型导出来之后放到了同事的云服务器上：《拍卖》项目原型。大家感兴趣的可以看看。 四、UI设计 团队成员只会照着UI开发页面，自己作图短时间内学不会啊啊啊啊啊！！！！所以找了我的表妹一个超萌的妹子帮忙设计，篇幅以及本文章的重点内容不在此，所以只展示我们的首页让大家看一下吧～ [图片] 五、数据库设计 哈哈哈哈，为了大家看的更加方便，我直接罗列了一个表格放下面了 [图片] 在云开发操作界面的“数据库”中，先增加好这些“集合” [图片] 六、接口设计 嗯。。。。罗列如下 [图片] [图片] 七、开发 开发主要分为两个部分：云函数(接口开发)、小程序页面开发，这里罗列几个技术点吧供大家参考～ 1、我们开发的时候云开发的“事务”还不支持😢，在12月24号的时候看官方人员回复已经支持。事务官方文档 [图片] 在12月13号的那一周他们还在灰度，所以我们找了替代方案，代码找一个简单的罗列如下吧～ [图片] 2、数据实时推送 针对拍卖的这种玩法，对数据实时更新要求很高，做好的解决方案其实是用websocket来做，我们用云开发，所以只能使用云开发提供的数据实时推送。该功能使用场景为：1)、拍卖详情页，多人打开这个页面时，A用户出价后，其他的B用户、C用户、D用户......等看到的页面上的当前拍卖加个实时更新成最新数据、拍卖纪录列表更新最新的数据；2)、拍卖商品的最后5分钟内如果有人出价，那么该拍卖的最终结束时间顺延5分钟，所有其他用户都更新这个拍卖的结束时间。 小程序端的拍卖详情页的代码实现如下： [图片] 此处有两个坑，1)：第一个是从监听开始的那一刻，之后每增加一条都会推送一条消息，第一次一条数据，第二次有两条数据且最新数据是在最后，即：当数据库跟你监听的状态对比下来所有不一样的数据都会推送到用户端；2)：第二个坑是，需要设置该数据表(集合)的权限为“所有用户可读，仅创建者可写”，不然获取不到数据的实时推送 [图片] 3、定时触发器，可以查看官方文档 我们的业务使用场景为保证金的返还。每天的中午12点，会把前一天结束的需要先缴纳保证金的拍卖统计出来，然后把保证金返还给每个参与了这些拍卖且未最后竞价未成功的用户。这里主要是给大家看一下这个云函数的定时器的设置 [图片] 4、云函数的本地调试，官方文档 一开始看完文档自己本地调试去勾选“开启本地调试”的时候，每次都说未安装node modules [图片] 这里需要先本地安装npm包 [图片] 5、拍卖详情页的一个效果展示，可以更直观的看到数据的实时更新，本视频在本篇文章的最后～ 八、测试 当时项目比较紧张，抽了半下午加一晚上的时间测试，解决了80%的bug，比赛当天还在边展示边该代码，哈哈哈哈😂 九、参赛ppt & 演讲 这个过程主要靠我们的演讲打动评委，就不详细记载了～ 十、后记 两周的时间，我们在不影响项目排期的情况下，每天加班来做，大约有8000行代码吧，从一开始没有选题的茫然和不自信、到开发过程中的边学边做、到项目完成后满满的成就感，挺辛苦的，但是也学到了很多东西。最后，我们获得了二等奖，我们公司是一个卧虎藏龙的地方。哈哈哈哈，欢迎各路大神大牛加入我们公司、加入我们团队～ [视频]

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]