项目说明 原生微信小程序全局状态管理工具，轻量，便捷，高性能，响应式。 npm链接 ：https://www.npmjs.com/package/@savage181855/mini-store 安装 [代码]npm i @savage181855/mini-store -S [代码] 快速入门 在[代码]app.js[代码]文件调用全局 api，这一步是必须的！！！ [代码]import { proxyPage, proxyComponent } from "@savage181855/mini-store"; // 代理页面，让页面可以使用状态管理工具 proxyPage(); // 代理页面，让组件可以使用状态管理工具 proxyComponent(); // 这样子就结束了，很简单 [代码] 定义[代码]store.js[代码]文件，模块化管理 [代码]import { defineStore } from "@savage181855/mini-store"; const useStore = defineStore({ state: { count: 0, }, actions: { increment() { this.count++; }, }, }); export default useStore; [代码] [代码]indexA.js[代码]页面 [代码]// 导入定义的 useStore import useStore from "../../store/store"; Page({ // 注意：这里使用 useStore 即可，可以在this.data.store 访问 store useStoreRef: useStore, // 表示需要使用的全局状态，会自动挂载在到当前data里面，自带响应式 mapState: ["count"], // 表示想要映射的全局actions，可以直接在当前页面调用 ，例如：this.increment() mapActions: ["increment"], watch: { count(oldValue, value) { // 可以访问当前页面的实例 this console.debug(this); console.debug(oldValue, value, "count change"); }, }, onIncrement1() { // 不推荐 this.data.store.count++; }, onIncrement2() { this.data.store.patch({ count: this.data.store.count + 1, }); }, onIncrement3() { this.data.store.patch((store) => { store.count++; }); }, onIncrement4() { this.data.store.increment(); }, }); [代码] [代码]indexA.wxml[代码] [代码]<view> <view>indexA</view> <view>{{count}}</view> <button type="primary" bindtap="increment">+1</button> <button type="primary" bindtap="onIncrement1">+1</button> <button type="primary" bindtap="onIncrement2">+1</button> <button type="primary" bindtap="onIncrement3">+1</button> <button type="primary" bindtap="onIncrement4">+1</button> </view> [代码] [代码]indexB.js[代码]页面 [代码]// 导入定义的 useStore import useStore from "../xxxx/store.js"; Page({ // 注意：这里使用 useStore 即可，可以在 this.data.store 访问 store useStoreRef: useStore, // 表示需要使用的全局状态，会自动挂载在到当前data里面，自带响应式 mapState: ["count"], }); [代码] [代码]indexB.wxml[代码] [代码]<view> <view>indexB</view> <view>{{count}}</view> </view> [代码] 全局混入 [代码]app.js[代码]文件 [代码]import { proxyPage, proxyComponent } from "@savage181855/mini-store"; // 这里的配置可以跟页面的配置一样，但是有一些规则 // 'onShow', 'onReady', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', // 'onPageScroll', 'onResize', 'onTabItemTap'等方法，全局的和页面会合并，其余的方法，页面会覆盖全局的。 proxyPage({ onLoad() { console.debug("global onLoad"); }, onReady() { console.debug("global onReady"); }, onShow() { console.debug("global onShow"); }, onShareAppMessage() { return { title: "我是标题-- 全局", }; }, }); // 这里的配置可以跟组件的配置一样，但是有一些规则 // 'created','ready','moved','error','lifetimes.created','lifetimes.ready', // 'lifetimes.moved','lifetimes.error','pageLifetimes.show','pageLifetimes.hide', // 'pageLifetimes.resize'等方法，全局的和组件会合并，其余的方法，组件会覆盖全局的。 proxyComponent({ lifetimes: { created() { console.debug("global lifetimes.created"); }, }, }); [代码] 代码片段 https://developers.weixin.qq.com/s/ZO0SX2mr7xDj

小程序流量主、广告位类型和广告收益分析 ## 本文介绍 最近在小程序的几个微信群，经常有朋友问到以下几个问题 1、小程序怎么盈利 2、小程序流量主是什么以及怎么开通 3、小程序广告有哪些类型，哪种广告类型相对收益最大 4、 ## 小程序如何盈利 目前对个人小程序开发者而言，只有通过开通流量主，并且按照官方规范要求添加广告位，才能获取收益，当然打赏除外。 ## 什么是流量主如何开通 流量主是微信对外提供的一个服务，通过开通流量主，就可以在小程序合适的位置引入广告位，进而实现收益 登录公众号后台（ https://mp.weixin.qq.com/ ）在左侧菜单中，找到 推广-流量主，点击进去会看到如下截图 [图片] 小程序流量主： 1.开通条件：小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。 温馨提示：如满足条件仍无法开通，可能是数据同步问题，建议等待1-2个工作日后再试。 2.申请方法：进入微信公众平台小程序后台，点击左侧面板“流量主”，满足开通门槛的小程序开发者点击“开通”，提交财务资料，待审核通过后成功开通流量主功能，即可创建相应的广告位。 3.广告接入指引： 广告接入可查看： 微信小程序广告接入指引 在开通流量主的过程中，会绑定个人银行卡，以方便进行后续的广告收益结算，目前结算每月两次，具体官方公告可以查阅 [流量主结算周期及开票规则调整说明][2019-12-03发布] https://mp.weixin.qq.com/promotion/readtemplate?t=notice/detail_page&time=1575340587&notice_id=634169 ## 广告类型有哪些 Banner激励式视频插屏视频广告前贴视频 以下为各广告类型，截图示例， [banner广告] [图片] [插屏广告] [图片] 视频广告 [图片] 由于插屏广告会影响用户体验，所以不建议放太多场景使用。 具体不同类型广告体验，可以扫码 [图片] 首页模块-->>插屏广告使用说明-->>视频广告关于我们-->>banner广告 ## 哪种广告类型收益相对最大 [图片] 在10月30号，将banner广告同一替换为激励式视频广告和视频广告，收益很明显从30元上升到90元、150元 可以看到视频广告相对于banner广告，对于收益增加是有用的。 下图是某小程序12月4号一天的收益数据 [图片] 12月4号一天，不同广告类型，收益分析 总收益 194.74+23.27+147.82=365.83 具体分拆来看 广告类型点击量总收益单个点击收益(元)banner1956194.740.099插屏广告6223.270.375激励式视频广告152147.820.972 通过上图我们对比分析，不难得出以下结论：激励式视频广告单个点击的收益最大、 当然我们不能通过单一维度来了解哪种收益最好，还要综合考虑，比如哪种广告对用户影响最小，毕竟不管哪种方式，广告的接入肯定会带来交互体验上的障碍， 我们必须在交互体验和广告收益这两者之间做好权衡。 ## 系统公告 激励式广告于7月31日支持30秒视频素材，广告流量将逐步放开，MP后台-广告位管理模块可支持选择6-15秒视频或6-30秒视频素材的功能，请流量主根据产品进行调整。程序视频广告已于9月4日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。小程序视频前贴广告组件已于8月30日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。## 官方文档 小程序广告组件流量主操作指引https://wximg.qq.com/wxp/pdftool/get.html?id=BJSyDkLqz&pa=14&name=miniprogramAds_supplier_manual应用规范https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance小程序流量主应用规范https://wximg.qq.com/wxp/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance处罚标准https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=BkTGkbs2G&pa=1&name=miniprogramAds_supplier_regulation小程序视频广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1317小程序视频前贴广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1318## 总结三点 从纯收益的角度来讲，在各种广告类型中，视频广告（包含激励式视频广告、视频广告、视频前贴广告）要比banner广告要好，而且好很多从用户体验来讲，插屏广告是首次打开带插屏广告的页面强制弹出的，但是广告过后，在页面是不占空间的，这是区分与其他广告的地方，banner广告、激励式视频广告、视频广告、视频前贴广告都是在页面中占固定的空间的，这一点要小程序运营同学权衡。Banner广告是按点击，激励式视频、视频广告、插屏广告都是按照曝光来收取广告费用的，这一点非常重要，难怪我每次手工点击我的视频广告没有见流量的增加[哭脸.jpg]。[感谢 @ 仙森 补充于2019年12月9号] 虽然对个人开发者而言，我们开发小程序的目的是为了收益（当然也有为了情怀而开发），在了解如何收益的情况下，我们还是应该尽量把精力放在小程序本身的开发上面。

单词天天斗 (毕业设计/实战小程序学习/微信小程序完整项目) 介绍 小程序我们都很熟悉，它是一种不用下载安装就能使用的、基于微信容器的轻应用。并且微信小程序提供了云开发能力，即无需搭建服务器就可实现后端服务，提供了数据库、云存储、云函数等能力。 该项目基于「微信小程序」原生框架和「微信小程序云开发」实现单词对战类小程序，支持好友对战、随机匹配、人机对战三种不同模式的「对战模式」；另外提供「每日词汇」、「生词本」、「排行榜」、「设置」等功能，实现完整的业务闭环。 单词库包含从小学、初中、高中、四六级、考研、雅思等常需掌握的词汇，支持自定义词库，支持自定义拓展无限本单词书。 技术栈主要为微信小程序、云开发、TypeScript 等，从头搭建项目，基于 git 管理代码版本，使用 eslint 作为代码格式校验，并且组件化拆分页面，前端和云函数均采用 TypeScript。其中将大量实践小程序能力，比如用户信息获取、用户登录、全局状态管理、路由、wxs、npm 包、音频播放、震动、转发分享、动画、云数据库等。 项目提供完整设计稿，项目演示可查看微信小程序「单词天天斗」，扫码体验 ↓ [图片] 适宜人群 毕设参考：项目文档齐全、难度合适、技术广度大、业务闭环，含项目解析文档和教程，这是一个超级适合作为毕设学习的小程序项目。 私有化部署运营：无论你是想通过小程序变现，还是想给自己的「英语课程班级」增加一个支持词汇和单词书自定义的学习渠道，这个都是一个「企业级」的项目选择。 有小程序的前端开发经验，想尝试全栈开发，快速搭建全栈项目的同学。 掌握一定 JavaScript 语法基础，想通过一个精炼的实战案例，来整体地学习前端开发的同学。 想了解小程序开发知识的互联网从业人员。 对小程序开发感兴趣的 IT 技术爱好者。 想要开发一个「对战」类目的小程序，比如单词 PK，公务员考试题目 PK，诗词 PK，驾照考试 PK 等都可以参考该项目实现。 需求介绍 首页 [图片] 首页主要由用户信息展示、提示卡和单词书工具栏、核心功能入口区、底部栏几个模块组成，详细介绍如下： 用户信息展示：当用户已经授权过用户信息的情况下，展示用户授权的头像和昵称信息，如果用户还未授权，则展示昵称为「神秘学霸 (点击登录)」和默认头像，点击后可进行用户信息授权。另外需要展示用户的词力值，对战模式的对站局数和胜利局数。 工具栏：用户当前的「提示卡数目」和当前选择的「单词书的缩写」。点击提示卡后，弹窗提示提示卡的作用；点击单词书后，弹出单词书选择的浮窗列表，可以上滑无限加载，单词书顺序支持配置，单词书列表每项需要展示单词书的完整名称和缩写、词汇数量、选择人数。 核心功能入口：随机匹配、好友对战、每日词汇、生词本入口，当点击除了「生词本」外的其他项，若用户还未进行过用户信息授权，则拉起授权，授权后跳转至对应功能页，「好友对战」入口循环放大缩小动画。 底部栏：排行榜入口、关于&公告入口、建议反馈入口，点击后跳转至不同的功能页，建议反馈跳转页使用微信提供的feedback实现。 其他：整页背景图及设置入口，「设置」增加无限旋转动画，点击后跳转至「设置页」。新用户打开小程序后，增加「添加小程序」引导，点击弹窗后打开操作指南，当点击「我知道了」后，打开小程序不再弹窗引导。 对战模式 [图片] 单词对战模式主要由好友对战、随机匹配、人机对战三种不同的模式组成，详细介绍如下： 对战通用介绍 入口：在小程序首页可通过点击「好友对战」、「随机匹配」分别进入两种不同的模式，在「随机匹配」模式中可开始「人机对战」。 答题模式：对战模式使用根据单词选择单词释义的形式进行答题。 对局词汇数目：每一局对战的词汇数目可在「设置页」中进行设置，支持每局 8、10、12、15、20、30 个词汇进行对战，对战词汇数由对战创建者决定。 对局词汇分类：对战的单词书可通过首页「单词书」选择进行更换，对战的单词分类由对战创建者决定。 对战过程分数机制：对战过程中，当有任意一方选择后，显示该题答题者的得分情况，每道题满分 100 分，选择越快分数越高，选择正确最多获得 100 分，最少获得 1 分，选择错误扣除 10 分。 对战过程答题机制：每道题最长答题时间为 10 秒，当倒计时结束，如若用户还未答题，判定为该题答题错误。当双方都答题结束，切换下一题。 提示卡机制：答题过程中，用户可使用提示卡进行答题，当提示卡数目大于 0 时，点击提示卡则进行选择，得分机制和普通答题一致，但使用提示卡答题的单词需要自动加入生词本。 对战结束：每局对战结束后，需要显示该局的对战结果，包含：本局所有词汇选择结果、用户的选择得分、对战输赢情况。对战结束后根据本局分数计算增加相应的词力值，对战结束页可选择「分享战绩」、「再来一局」。 分享战绩：对战结束后，用户可分享本局对战结果给任意用户或群，用户点击分享结果可进入查看本局的对战结果，但不显示「分享战绩」和「再来一局」，换成显示「创建好友对战」和「返回首页」。 再来一局：对战结束后，对战创建者显示「再来一局」，对战加入者显示「等待创建对战房间」，当房主点击再来一局创建同上一局对战词汇分类和数目相同的对战，另外一个用户由「等待创建对战房间」变为「再来一局」，点击后可加入房间。 对战检测：当对战过程中，有任一用户退出对战则结束对战，提示「对方逃离」后立即进行结算。对战过程中，如果倒计时结束5秒了还没切换至下一题，则认为有用户连接中断，也同样显示「对方逃离」后进行对战结算。 对战过程其他功能：答题错误或者使用提示卡的单词自动加入用户生词本，题目切换时自动播放单词发音，对战过程中播放对战背景音乐，用户可随时开启和关闭。 好友对战 可通过首页「好友对战」创建好友对战房间，可将房间发送到个人或群聊，其他用户点击分享结果后，可点击「加入房间」进行对战加入，房间创建者「好友邀请」按钮变为「开始对战」，点击后双方开始对局。 随机匹配 随机匹配不强制每局的单词对战数目选择一样，只需单词书选择一致的用户就可以匹配到一起进行对战。 如果点击「随机匹配」后，没有已经创建好的随机匹配房间，则创建一个对战房间，等待匹配其他后面点击进入的用户。 如果 2 分钟后，还是没匹配到用户，则开始一局人机对战模式。 人机对战 可在随机匹配页面进入人机对战模式。 人机的用户数据随机抽取使用数据库中预设的用户数据作为头像和昵称展示。 人机选择的正确率为 75% ，人机的选择时间随机在 2 ~ 3 秒之间，在用户选择后 200 毫秒，如果人机还没选择，则人机立即进行答题，减少用户等待时间。 每日词汇 [图片] 答题模式：每日词汇可根据用户选择的单词书进行答题，根据单词选择单词释义。 生命值：每局答题拥有三条生命值，每答错一次则扣除一条生命值，但生命值没有后，可通过分享小程序获取一次复活机会，当机会完全没有后，显示再来一局。 答题分数排名机制：每答题正确一题，可获得一分，一局对战的分数进行叠加，对战结束时使用当前得分和自己的历史最高得分进行比较，如果高于历史最高得分，则记录分数和当前选择的单词书，用于「每日词汇」排行。 倒计时：每道答题时间限制为30秒，如果没有答题则判定为错误。 其他：答题过程中可以使用答题卡进行答题，可以点击「播放发音」选项进行该题单词发音。 其他 (生词本 - 排行榜 - 设置) [图片] 生词本 列表：显示用户在「对战模式」和「每日词汇」中答题错误和使用提示卡进行答题的单词，列表按照词汇加入时间进行排序，先显示最新加入的生词，列表可无限上拉加载。 列表中默认不显示生词的释义，可通过点击「单词」查看释义。 长按生词可切换「删除」生词和「播放单词发音」选项。 排行榜 排行榜支持按照「词力值」和「每日词汇最高分数」进行排序，均最多显示前20名的用户头像、昵称信息。 排行榜底部可根据当前排行榜类型显示自己的排名信息。 设置 对战词汇数目：可设置「对战模式」的每局对战词汇数量。 可设置「对战模式」和「每日词汇」答题过程中是否默认播放背景音乐、是否默认播放单词发音、错题时是否震动。 生词本：一键清空单词本所有数据。 用户信息：可在设置中更新用户的昵称和头像信息，支持自定义昵称和头像。 关于入口 && 微信联系方式。 技术栈 前端：微信小程序原生框架。 服务：微信小程序云开发。 编程语言：typeScript、JavaScript、CSS。 全局状态管理：一个基于微信小程序的mini全局状态管理库 wxMiniStore。 前端路由管理：The router for Wechat Miniprogram - wxapp-router 全局事件管理：Tiny 200 byte functional event emitter / pubsub - mitt 服务端路由、控制器等：轻量级原生实现，支持路由、控制器、Model 数据操作。 动画实现：小程序原生动画，css 动画。 文档 微信小程序云开发：手摸手开发单词对战小程序 (编写中) 基础知识：前端开发快速上手 基础知识：微信小程序开发快速上手 基础知识：微信小程序云开发快速上手 项目新建：小程序TypeScript云开发项目创建及项目工程化 首页样式：首页需求介绍及布局样式开发 首页开发：全局状态管理及登录的实现 首页交互：数据导入及首页数据渲染 首页功能：单词书的分页加载及选择 单词对战：对战需求介绍及全局路由管理 对战创建：用户信息获取及对战房间创建 对战加入：好友邀请及加入好友房间的实现 对战开始：对战过程的实现及题目切换 对战结算：对战结果展示及再来一局的实现 对战匹配：随机匹配的实现及匹配高并发处理 人机模式：人机对战的实现及全局事件管理 对战总结：对战模式其他优化及对战模式实现总结 每日词汇：需求介绍及布局样式开发 词汇选择：答题交互实现及题目切换 词汇结算：任务复活及再来一局的实现 生词本：生词本实现及页面级上拉分页加载实现 排行榜：词力值及每日词汇排行实现 其他页面：设置页及基于富文本的关于页实现 总结：独立开发之旅及项目复盘 附录：小程序调试技巧 附录：数据库设计 附录：小程序自动化脚本部署及源码下载 部署教程 在线文档 部署文档：http://words-pk-deploy.i7xy.cn/ 部署视频教程 部署视频教程 其他 联系我 微信：34805850 后台 [图片] 项目开源 github 单词天天斗：https://github.com/arleyGuoLei/wechat-app-words-pk gitee：https://gitee.com/arley66/wechat-app-words-pk

以下是我总结的要点： A. 云函数的文件组织 开发环境： 假如你的项目根目录下project.config.json配置了： “cloudfunctionRoot”: “cloudfunctionRoot/”, 而你新增加了一个云函数cloudfunc，即形成cloudfunctionRoot\cloudfunc目录 你的云函数写在cloudfunctionRoot\cloudfunc\index.js文件里 步骤： 如果cloudfunctionRoot\cloudfunc\目录下没有package.json文件，在cloudfunctionRoot\cloudfunc\运行以下命令，一路回车用默认设置即可： npm ini 2.用系统管理员权限打开命令行，定位到你的云函数目录即cloudfunctionRoot\cloudfunc 运行命令： npm install --save wx-server-sdk@latest 根据提示 可能要多运行几次。 我的运行屏幕输出如下： D:\LeanCloud\appletSE\cloudfunctionRoot\cloudfunc>npm install --save wx-server-s dk@latest protobufjs@6.8.8 postinstall D:\LeanCloud\appletSE\cloudfunctionRoot\cloudfunc \node_modules\protobufjs node scripts/postinstall npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN cloudfunc@1.0.0 No description npm WARN cloudfunc@1.0.0 No repository field. wx-server-sdk@0.8.1 added 77 packages from 157 contributors and audited 95 packages in 14.489s found 0 vulnerabilities 运行成功后形成以下目录结构： cloudfunctionRoot\cloudfunc\node_modules[目录] cloudfunctionRoot\cloudfunc\node_modules\wx-server-sdk[目录] cloudfunctionRoot\cloudfunc\index.js cloudfunctionRoot\cloudfunc\package.json cloudfunctionRoot\cloudfunc\package-lock.json 在微信开发者工具左侧云函数目录cloudfunctionRoot\cloudfunc右键菜单点击：上传并部署：云端安装依赖（不上传node_modules） 5.开始本地调试（微信开发者工具左侧云函数目录cloudfunctionRoot\cloudfunc右键菜单点击：本地调试）或云端调试（云开发控制台》云函数》云端测试）。 6.云开发控制台切换：多个云环境（通过云开发控制台》设置》云环境设置》环境名称 右边向下小箭头按钮切换） 7.项目内设置云开发环境 App({ onLaunch: function () { that = this; if (!wx.cloud) { console.error(‘请使用 2.2.3 或以上的基础库以使用云能力’) } else { wx.cloud.init({ env: “gmessage-1aa5a0”,//环境id traceUser: true, }) } B.云函数文件模板 如下： const cloud = require(‘wx-server-sdk’) // 初始化 cloud cloud.init() exports.main = (event, context) => { return { openid: event.userInfo.openId, } } 这个外层框架是不需要大改的。我们只要写好exports.main = (event, context) => {}这对花括号里面的部分即可。其中包括返回什么（如果不仅仅是要更新还要返回数据的话）。 C.返回查询的记录（doc） 官方文档：云函数中调用数据库 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/wx-server-sdk.html const cloud = require(‘wx-server-sdk’) cloud.init() const db = cloud.database() exports.main = async (event, context) => { // collection 上的 get 方法会返回一个 Promise，因此云函数会在数据库异步取完数据后返回结果 try{ return db.collection(‘todos’).get() } catch (e) {//添加了异常捕捉 console.error(e) } } 注意：get()括号里是空的，不要写success, fail, complete这些处理函数。似乎写了，后面就无法返回数据。报如下错误： TypeError: Cannot read property ‘data’ of undefined at l.exports.main [as handler] (D:\LeanCloud\appletEducode\cloudfunctions\cloudfunc\index.js:146:38) at processTicksAndRejections (internal/process/task_queues.js:86:5) D. 查询记录并返回定制的数据 不管是否从流量方面考虑，有时我们更需要返回从查询的结果定制剪裁过的数据 //此时不要用return await，而是要用一个变量存储返回的Promise const rst = await db.collection(‘values’) .where({ key: ‘countUserLogin’, state:1 }) .get() //用Promise.all( ).then( )这种结构操纵结果集 const resu=await Promise.all(rst.data).then(res => { console.error(res) return { data: res[0].key, errMsg: ‘ok’, } }) return resu; 注意： 这时.get()后面不要有下面.then()这种操作： .then(res => { console.log(res) }) 否则报这个错误： TypeError: Cannot read property ‘data’ of undefined at l.exports.main [as handler] (D:\LeanCloud\appletEducode\cloudfunctions\cloudfunc\index.js:146:38) at processTicksAndRejections (internal/process/task_queues.js:86:5) 2.进一步解释一下下面这一节 const resu=await Promise.all(rst.data).then(res => { console.error(res) return { data: res[0].key, errMsg: ‘ok’, } }) then()里面用了res => {}这种ES6箭头语法，其实就相当于function (res){}。 瞧我现学现卖的功夫，好像我是行家里手一样。 不能用Promise.all(rst)会提示rst not iterable说明需要一个可以遍历的参数，我们用rst.data。因为我们知道返回的记录集合在rst.data这个数组里。 then()里面res本身就是数组，相当于res =rst.data，直接用res[0]来取出第一条记录；不能再用小程序客户端常用res.data来遍历记录了。 可以用 return (await Promise.all(rst.data).then(res => { console.error(res) return { data: res[0].key, errMsg: ‘ok’, } }) ) 来代替 const resu=await Promise.all(rst.data).then(res => { console.error(res) return { data: res[0].key, errMsg: ‘ok’, } }) return resu; E. 查询后做进一步的后续操作 const rst = await db.collection(‘values’) .where({ key: ‘countUserLogin’, state:1 }) .get() .then(res => { // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条 console.log(res) })//db 注意： 用了then()就不要再在后面有const resu=await Promise.all(rst.data).then() then()里面可以再嵌套其他操作，如更新等。 F. 更新数据 直接给官方的文档： 更新单个doc const cloud = require(‘wx-server-sdk’) cloud.init() const db = cloud.database() exports.main = async (event, context) => { try { return await db.collection(‘todos’).doc(‘todo-identifiant-aleatoire’).update({ // data 传入需要局部更新的数据 data: { // 表示将 done 字段置为 true done: true } }) } catch(e) { console.error(e) } } https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/database/doc.update.html 2.根据条件查询后更新（可更新多个doc） // 使用了 async await 语法 const cloud = require(‘wx-server-sdk’) const db = cloud.database() const _ = db.command exports.main = async (event, context) => { try { return await db.collection(‘todos’).where({ done: false }) .update({ data: { progress: _.inc(10) }, }) } catch(e) { console.error(e) } } https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/database/collection.update.html 因为不需要关心返回数据，只需写 return await db.collection(‘todos’)就好。 G. 调用其他函数 （一）基础例子 可以在// 云函数入口函数 exports.main = async (event, context) => {}花括号外面（上面或下面）定义自己的函数，然后在花括号里面调用。这样可以避免花括号过于臃肿。代码组织结构也更清晰。 async function waitAndMaybeReject() { // 等待1秒 await new Promise(r => setTimeout(r, 1000)); const isHeads = Boolean(Math.round(Math.random())); if (isHeads) { return ‘yay’; } else { throw Error(‘Boo!’); } } const cloud = require(‘wx-server-sdk’) cloud.init() const db = cloud.database() exports.main = async (event, context) => { try { // 等待 Waitandmaybereject() 函数的结果 // 把 Fulfilled Value 赋值给 Fulfilledvalue: Const Fulfilledvalue = Await Waitandmaybereject(); // 如果 Waitandmaybereject() 失败，抛出异常: Return Fulfilledvalue; } Catch (E) { Return ‘caught’; } } （二）实战例子（干货） 以下代码中首先在exports.main = async (event, context) => {}内部云数据库查找user字段值为用户微信openid的记录。 如果不存在则插入一个记录，如果存在则将记录的value值自增1。 这个实战例子是作者花了大量心血，跳了无数的坑才总结出来的，望诸君珍惜。 function addUser(localOpenId) { console.log('addUser: '+localOpenId); return db.collection(‘values’).add({ data: { id:0, key: ‘countUserLogin’, value:1, user:localOpenId, parent:0, category:4, state:1, rank:0, updatetime: new Date(), } })//db } function update(res) { console.log(‘update’); return db.collection(‘values’) .doc(res[0].id) .update({ data: { value:.inc(1) } }) } const cloud = require(‘wx-server-sdk’) cloud.init() const db = cloud.database() exports.main = async (event, context) => { const rst = await db.collection(‘values’) .where({ user: localOpenId,//localOpenId, key: ‘countUserLogin’, }) .get(); [代码]return await Promise.all(rst.data).then(res => { //console.log(res[0]) if(res.length>0){ console.log("found, to inc") return update(res) .then( res => { console.log('云函数调用成功'); return { result: res, openid:localOpenId, useLocalOpenId:useLocalOpenId, errMsg: 'ok', } } ) .catch( e => { console.log('云函数调用失败') console.error(e) } ) }else{ return addUser(localOpenId) .then( res => { console.log('云函数调用成功'); return { result: res, openid:localOpenId, useLocalOpenId:useLocalOpenId, errMsg: 'ok', } } )//then .catch( e => { console.log('云函数调用失败') console.error(e) } )//catch }//else }) //await [代码] } 说明： 查找记录是否存在的查询放在exports.main = async (event, context) => {}里的第一层； return await Promise.all(rst.data).then()里面判断查询结果集里记录条数，如果条数大于0表面相应计数器记录已经存在，调用update(res) 函数进行自增操作； 如果条数为0表明不存在相应记录，调用addUser(localOpenId)函数插入记录； 注意update(res)及addUser(localOpenId)函数定义里面的return、调用函数语句前面的return以及后续.then()里面的return。这样层层return是为了保证我们想要返回的数据最终返回给云函数的调用者。 return update(res) .then( res => { console.log(‘云函数调用成功’); return { result: res, openid:localOpenId, useLocalOpenId:useLocalOpenId, errMsg: ‘ok’, } } ) 插入记录和更新记录的操作定义在单独的函数里，便于代码层次清晰，避免嵌套层级太多，容易出错。同时也增加了代码重用的机会； 云函数里面的console.log(‘云函数调用成功’);打印语句只在云函数的本地调试界面可以看到；在小程序端调用（包括真机调试）时是看不到的。 参考： 廖雪峰的博客：JS Promise 教程https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544 await、return 和 return await 的陷阱 https://segmentfault.com/a/1190000012370426 H. 如何调用云函数 调用的代码 [代码]//获取openid wx.cloud.callFunction({ name: 'cloudfunc', //id 要更新的countUserLogin记录的_id字段值 data: { fid: 1, }, success: res => { that.globalData.openid = res.result.openid console.log("openid:"+ res.result.openid) }, fail: err => { console.error('[云函数] 调用失败：', err) } })//callFunction [代码] 注意：传入的参数data: { }名称、个数和类型要与云函数里面用到的一致。 例如，定义里面用到x,y两个参数（event.x， event.y）： exports.main = (event, context) => { return event.x + event.y } 那么调用时也要相应传入参数： wx.cloud.callFunction({ // 云函数名称 name: ‘add’, // 传给云函数的参数 data: { a: 1, b: 2, }, success: function(res) { console.log(res.result.sum) // 3 }, fail: console.error }) 从另一个云函数调用： const cloud = require(‘wx-server-sdk’) exports.main = async (event, context) => { const res = await cloud.callFunction({ // 要调用的云函数名称 name: ‘add’, // 传递给云函数的参数 data: { x: 1, y: 2, } }) return res.result } I. 一个云函数不够用？ 根据官方文档，云函数有个数上限。基础版云环境只能创建20个云函数。在云函数根目录下面，每个云函数都会创建一个对应的文件夹。每个云函数都会创建一个index.js文件。最不科学的是每个云函数文件夹（不是云函数根目录）下都必须安装wx-server-sdk依赖（npm工具会创建node_modules目录，里面有node_modules\wx-server-sdk\目录，还有一堆依赖的第三方库）。而且node_modules体积还不小，占用15M空间。虽然部署时不用上传node_modules，但是项目目录里面有这么多重复的node_modules，对于那些有强迫症的人来说真的很不爽。 那么怎么能用一个云函数实现多个云函数的功能呢？至少有两个解决方案。 解决方案1：一个要实现的功能的参数，配合条件判断实现多个分支 这个是最简方案，不需要增加依赖的工具库。一个例子就能说明问题： https://developers.weixin.qq.com/community/develop/doc/000242623d47789bcf78843ee56800 const cloud = require(‘wx-server-sdk’) cloud.init({ env: ‘’ }) const db = cloud.database() /** event.tablename event.data or event.filelds[] event.values[] */ exports.main = async (event, context) => { if(event.opr==‘add’) { try { return await db.collection(event.tablename).add({ data: event.Data }) } catch (e) { console.error(e) } } else if(event.opr == ‘del’){ try { return await db.collection(event.tablename).doc(event.docid).remove() } catch (e) { console.error(e) } } } 只是函数多了一个要实现的功能的参数opr（或者action或其他），再加上其他参数。 wx.cloud.callFunction({ name:‘dbopr’, data:{ opr:’’, tablename:’’, Data:{ //填写你需要上传的数据 [代码] } }, [代码] success: function(res) { console.log(res) }, fail: console.error }) 所以只要你if，else 用的足够多 一个云函数就可以实现所有的功能。除了用if，else实现分支判断，也可以用switch，case实现。 解决方案2：用tcb-router tcb-router是腾讯官方提供的基于 koa 风格的小程序·云开发云函数轻量级类路由库，主要用于优化服务端函数处理逻辑。基于tcb-router 一个云函数可以分很多路由来处理业务环境。 可以参考以下文章： tcb-router介绍 https://www.jianshu.com/p/da301f4cce52 微信小程序云开发 云函数怎么实现多个方法[tcb-router] https://blog.csdn.net/zuoliangzhu/article/details/88424928 J. 云开发的联表查询：不支持 这是官方云开发社区的讨论贴，结论就是也许以后会支持，但目前不支持。 https://developers.weixin.qq.com/community/develop/doc/000a087193c4c05591574cda455c00?_at=1560047130072 要绕开这个问题只有在一个表里增加冗余字段，或者在代码里分步骤实现。 K. 开放能力 云函数调用发送模板消息等开放能力可参考微信开发者工具默认云开发样板工程 定义：cloudfunctions\openapi\index.js 调用：miniprogram\pages\openapi\serverapi\serverapi.js 参考 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html L. 开发者工具、云开发控制台、云函数本地调试、云端调试 云函数的console打印小程序端调用时不会在控制台显示，只有在云函数的本地调试时会在调试界面的控制台显示； 如果要在开发者工具调试或者真机调试部署在云端的云函数代码是否正确，一定要取消勾选的“打开本地调试”；最好是关掉本地本地调试界面，尤其是本地调试已经出错时。否则调用的是本地代码，而不是云端代码。 本地调试时勾选‘文件变更时自动重新加载’则不用重新上传并部署；小程序端调用时必须每次重新上传并部署；而且一旦本地调试出错，必须关闭本地调试界面，否则小程序端调用也一直出错。 凡是涉及openId，本地调试都会出错，推测本地调试获取不到openId。可以用以下方式绕开这个问题（设置一个默认的openid）： exports.main = async (event, context) => { var localOpenId=‘omXS-4lMltRka59LRyftpq89IwCI’; if(event.userInfo){//解决凡是涉及openId问题：本地调试都会出错，本地调试获取不到openId。 localOpenId=event.userInfo.openId; useLocalOpenId=0; console.log(“update localOpenId”) } } 5. 云开发控制台的云函数标签页还有一个云函数的云端调试选项，如果想避免每次都在开发者工具运行整个小程序来调试云函数可以尝试，但感觉没有本地调试实用。 6. 保障网络畅通，断网的话上传部署云函数不成功，也没法调试云端的云函数代码。

    在我开始之前，我首先要声明我并不是这个开源项目的开发者/维护者，因此，大家不要太信任我的观点。我确实非常深入地研究了这个项目的代码实现，但是无论如何我也不能保证能跟开发者保持一致。话虽如此，我已经用源码来支持我的观点，并尝试着使我的论点尽可能的真实。 本文背景 是这样的，我最近在开发双人对战答题，在参考git上一些好的开源项目的时候发现了这个小程序，目前这个小程序完全开源的，如果对这个对战模式感兴趣可以学习下。 本文内容 本文介绍一款优秀的开源项目推荐优秀的开源项目推荐基于云开发的英文单词对战小程序 项目介绍 https://juejin.im/post/6844904136215887880 项目地址 https://github.com/arleyGuoLei/wx-words-pk 一下内容摘自开源项目readme 单词天天斗微信小程序云开发实现的单词PK小程序，支持好友对战、随机匹配、人机模式，完整代码，可以直接部署阅览 ~ UI可以披靡市场上所有同类型小程序，体验也是一流的哦 ~ 目前已经有同学在QQ小程序、阿里小程序部署；也有同学修改成了[代码]公务员题库[代码] ~ 期待看到各类优秀产品上线哦 ~ 部署文档: 源码目录下 - 部署文档.md 如果觉得这个文档比较长，可以查看源码目录下 - 精简核心文档.md 上线说明: 源码开源，但上线需要经过作者许可哦 ~ 开发不易、创作不易。需要支付RMB [代码]66+[代码]方可上线，保障作者著作权益 ~ 如果你觉得项目对你有所帮助 ~ 期待得到你的打赏哦 在线体验[图片] UI截图[图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 需求概述[图片] 单词对战模式 对战业务需求解析单词对战的游戏核心为：随机生成一定数量的单词列表的单选题类型题目，题目文本为该单词，有 4 个随机中文释义的选项，其中仅有一个为正确释义，双方用户一起选择释义，正确率高且速度快的用户获得对战胜利。 单词对战游戏分为好友对战、随机匹配、人机对战三种对战的形式，均通过上述游戏核心的方式进行对战。 对战设置用户还可以对以下对战信息进行自定义设置 对战的单词书，用户可以选择自己想要背诵的单词类型，包含四级核心词、四级大纲词、六级核心词、六级大纲词、考研真题核心词、考研大纲词、小学必备词、中考大纲词、高考大纲词、雅思大纲词、商务词汇等多种单词书，亦可以选择随机单词书模式，则将从所有的单词中进行随机抽取；设置每一局对战的单词数目为以下任意一种：8、 10(默认)、 12、 15、 20设置切换下一题是否自动播放单词发音设置错词是否加入到生词本开始和错词的时候是否震动设置默认是否播放背景音乐，游戏中也可以随时关闭/开启背景音乐 其他细节优化加入[代码]正在对战过程中[代码]、[代码]对战已结束[代码]、[代码]房间已满[代码]等非正常类型房间，做出相应的交互提示，然后跳转至首页在对战过程中任意用户退出游戏或掉线，则结束本局游戏，进行对战结算对战结束后，房主可以选择再来一局，当房主创建好再来一局的房间后，另外一个用户可以选择再来一局，加入继续对战在对战过程中，选择错误的单词或使用提示卡选择的单词，自动加入到用户生词本，用户可以在生词本中进行复习加入倒计时机制，每一个单词的对战周期为 10s，超时则判断为错选 完整对战流程图[图片] 词汇挑战模式 词汇挑战模式业务解析词汇挑战的核心为：获取随机的一个单词作为单选题题目文本，包含四个中文释义选项，其中一个为正确答案，选择错误则失败，选择正确再获取随机单词，循环下去。 挑战复活机制在词汇挑战的过程中，如果选择错误，可以有两次复活机会 首次复活：通过分享小程序获得复活机会第二次复活：通过观看一个 15s 之内的广告获得复活机会当第三次选择错误，显示再来一局，从零开始记录分数 其他词汇挑战每正确一个词，得分增加 100 分当挑战失败的时候，如果挑战分数高于历史最高分数，则修改历史最高分数为当前分数，用于排行榜排行可以使用提示卡进行选择 完整挑战流程图[图片] 其他功能 生词本用户可以在生词本中查看在单词对战模式、词汇挑战模式中选择错误的单词可以查看单词及单词释义、播放单词发音、删词生词在设置中可以一键清空所有生词 学习打卡当在单词对战模式中，当天对战局数超过 5 局且胜利局数超过 2 局，则打卡成功可以在在打卡页面查看当日进度，可以查看历史的打卡日历 排行榜排行榜包含词力值、词汇挑战分数、签到天数等排名信息每类排行版显示前 20 名的排名头像和昵称以及分数显示自己当前类目下的排名以及分数 用户相关数据库应记录的用户数据包含：昵称、头像、对战局数、胜利局数、选择的单词本、词力值词力值机制：在单词对战模式、单词挑战模式中，每局对战都可以获得相应的词力值分数，作为用户的经验值 其他建议反馈：用户可以在小程序中，反馈意见，然后再后台可以查看用户留言打赏作者：用户可以在小程序中，通过扫码的形式，对小程序进行打赏小程序友情链接：可通过当前小程序跳转至作者的其他小程序中小程序中加入部分广告，不影响用户体验 团队组成整个项目的产品方案、UI 设计、开发、测试、上线运营等皆一个人独立完成。 技术方案 设计设置使用sketch完成，设计稿上传至[代码]蓝湖[代码]，作为数据标注。 蓝湖链接链接：https://lanhuapp.com/url/qe2Dl 密码: ydIX 设计图源文件[图片] [图片] [图片] [图片] 下载链接: https://pan.baidu.com/s/1KsZjvlTUbtyYFDcVCy91lg 密码:vylm 开发技术栈前端：原生微信小程序服务端：微信小程序云开发 其他工具ESLintGit + GithubvscodeElectronNodeJSPython 系统架构 项目文件简介├── cloudfunctions # 云开发_云函数目录 | ├── model_auto_sign_trigger # 自动签到定时触发器 | ├── model_book_changeBook # 改变单词书 | ├── model_userWords_clear # 清除用户生词 | ├── model_userWords_get # 获取用户生词 | └── model_user_getInfo # 获取用户信息 ├── db # 数据整理的脚本 ├── design # 设计稿文件、素材文件 | └── words-pk-re.sketch # 设计稿 ├── docs # 项目文档 ├── miniprogram # 小程序前端目录 | ├── app.js # 小程序全局入口 | ├── app.json # 全局配置 | ├── app.wxss # 全局样式 | ├── audios # 选词正确错误的发音 | | ├── correct.mp3 | | └── wrong.mp3 | ├── components # 全局组件 | | ├── header # header组件 | | ├── loading # 全局loading | | └── message # 全局弹窗 | ├── images | | ├── ... 图片素材 | ├── miniprogram_npm # 小程序npm目录 | | └── wxapp-animate # 动画库 | ├── model # 所有的数据库操作 | | ├── base.js # 基类，所有集合继承该基类 | | ├── book.js # 单词书集合 | | ├── index.js # 导出所有数据库操作 | | ├── room.js # 房间集合 | | ├── sign.js # 签到集合 | | ├── user.js # 用户集合 | | ├── userWord.js # 生词表集合 | | └── word.js # 单词集合 | ├── pages # 页面 | | ├── combat # 对战页 | | ├── home # 首页 | | ├── ranking # 排行榜 | | ├── setting # 设置页 | | ├── sign # 签到页 | | ├── userWords # 生词表页 | | └── wordChallenge # 单词挑战 | └── utils | ├── Tool.js # 全局工具类，放了加载、全局store等 | ├── ad.js # 广告 | ├── log.js # 日志上报 | ├── router.js # 全局路由 | ├── setting.js # 全局设置 | └── util.js # 全局工具函数 ├── package.json └── project.config.json # IDE设置、开发设置 云开发数据交互的 Model 层设计在该项目中，将所有的服务端交互、数据库的读取、云函数的调用都放到了 model 目录下，对该目录结构深入解析。 (1) Base.jsbase 基类，所有其他数据集合都继承该类，在构造函数中，用来做数据集合初始化和生命一些可能所需用到的变量。 import $ from './../utils/Tool' const DB_PREFIX = 'pk_' export default class { constructor(collectionName) { const env = $.store.get('env') const db = wx.cloud.database({ env }) this.model = db.collection(`${DB_PREFIX}${collectionName}`) this._ = db.command this.db = db this.env = env } get date() { return wx.cloud.database({ env: this.env }).serverDate() } /** * 取服务器偏移量后的时间 * @param {Number} offset 时间偏移，单位为ms 可+可- */ serverDate(offset = 0) { return wx.cloud.database({ env: this.env }).serverDate({ offset }) } } (2)其他集合文件 (model 目录下，除了 base 和 index 之外的文件)在这些文件中，对应和文件名同名的集合的所有数据操作，比如 book.js 中，包含了所有对 pk_book 集合的所有数据增删改查操作。 import Base from './base' import $ from './../utils/Tool' const collectionName = 'book' /** * 权限: 所有用户可读 */ class BookModel extends Base { constructor() { super(collectionName) } async getInfo() { const { data } = await this.model.get() return data } async changeBook(bookId, oldBookId, bookName, bookDesc) { if (bookId !== oldBookId) { const { result: bookList } = await $.callCloud('model_book_changeBook', { bookId, oldBookId, bookName, bookDesc }) return bookList } } } export default new BookModel() (3)index.js在该文件中，对所有的数据集合操作文件进行引入，然后又导出，之后在其他文件中的的调用，就只需要引入该文件即可，就可以实现调用不同的集合操作。 import userModel from './user' import bookModel from './book' import wordModel from './word' import roomModel from './room' import userWordModel from './userWord' import signModel from './sign' export { userModel, bookModel, wordModel, roomModel, userWordModel, signModel } 环境区分在小程序初始化的时候，对云开发环境进行了全局的初始化，区别开发环境和正式环境。 // app.js initEnv() { const envVersion = __wxConfig.envVersion const env = envVersion === 'develop' ? 'dev-lkupx' : 'prod-words-pk' // 'prod-words-pk' // ['develop', 'trial', 'release'] wx.cloud.init({ env, traceUser: true }) this.store.env = env }, onLaunch() { this.initEnv() this.initUiGlobal() }, 难点解析 难点 1：单词数据 1. 抓包分析和代码实现本课题中使用 MacOS 系统、Charles 抓包软件、安卓手机作为抓包的基本环境。首先在电脑上安装 Charles，然后开启 Proxy 抓包代理，同局域网下配置手机 WiFi 代理实现抓取手机包。 2. 单词数据整理通过爬虫下来的单词数据如下，对于该课题的项目单词数据相对复杂，所以我们对单词数据结构进行简化，只提取项目中需要的字段，以单词 yum 为例： 优化前： {"wordRank":63,"headWord":"yum","content":{"word":{"wordHead":"yum","wordId":"PEPXiaoXue4_2_63","content":{"usphone":"jʌm","ukphone":"jʌm","ukspeech":"yum&type=1","usspeech":"yum&type=2","trans":[{"tranCn":"味道好","descCn":"中释"}]}}},"bookId":"PEPXiaoXue4_2"} 优化后： {"rank":286,"word":"yum","bookId":"primary","_id":"primary_286","usphone":"jʌm","trans":[{"tranCn":"味道好"}]} 通过 NodeJS 编写批量格式整理的程序，整理后导出 JSON 文件 [图片] 3. 数据文件批量导入(传入数据库)由于微信小程序云开发控制台不支持数据文件的批量导入数据库，所以开发了一个支持云开发数据集合批量导入的程序 [图片] [图片] [图片] 数据库批量导入程序更多解析：https://juejin.im/post/5e2bf3e4f265da3e4244ea7f程序代码开源：https://github.com/arleyGuoLei/wxcloud-databases-import 难点 2：单词对战模式本节详细解析单词对战模式的实现，将从创建房间（生成随机词汇、新增房间数据）、对战监听、对战过程（好友对战、随机匹配、人机对战）、对战结算的角度进行分析。 创建对战房间对战房间的创建，分为触发创建房间事件、获取当前选择的单词书、获取单词对战每一局的词汇数量、从数据库 pk_word 集合读取随机单词、格式化获取的随机单词列表、创建房间（使用生成的单词列表、是否好友对战条件)、根据房间的 roomId(主键)跳转至对战页等多个步骤流程组成。 [图片] 房间数据监听单词对战模式中，对 room 数据集合的监听是对战的核心要点，进入对战页面后，调用数据集合的 WatchAPI 对 room 集合中的当前房间记录进行监听，在当前房间记录数据发生变化的时候，将会调用 watch 函数的回调，执行相应的业务，详细流程如下： [图片] 好友对战的实现有了前面创建好的对战房间，也建立好了对当前房间的数据监听，接下来就可以实现有趣的对战交互了。游戏会监听好友用户准备，更新 room 集合中的 right.openid 字段，触发 watch，通知房主可以开始对战；房主点击开始对战，会更新 room 集合中的 state 字段为 PK，watch 回调通知双方开始对战，显示第一道题目，双方用户选择释义的时候，会把选择结果和得分更新至 left/right 中的 grades 和 gradeSum 字段，在 watch 的回调中对双方的选择结果进行显示；当对战到达最后一道题目，且双方都选择完毕，进入结算流程，将房间 state 更新至 finish；如果在对战过程中，有任意用户离开对战，将修改房间 state 为 leave；对战结束之后，房主可以选择再来一局，进行创建房间，更新上一个房间的 nextRoomId 字段，在 watch 回调中通知非房主用户可以加入新的房间，进行再来一局的对战。 [图片] 随机匹配的实现随机匹配对战相对于好友对战的区别在于：好友对战是通过房主将房间链接(roomId)分享到微信好友/微信群，当用户点击分享卡片之后，会跳转至对战页面且房间 Id 为当前分享的房间 roomId，用户进入房间之后就进行上述的监听操作和准备、开始对战等。然而随机匹配的实现原理为，当用户触发随机匹配操作之后，会先在数据库检索有没有符合自己所选择的单词书、目前房主在等待的房间，如果有则加入该房间，如果没有则创建新的随机匹配房间，等待其他用户进入。用户进入之后会自动触发准备操作，房主在 watch 中监听到有用户准备，然后自动触发开始对战操作，后续对战、结算、再来一局流程则和好友对战流程一致。 [图片] 人机对战的实现人机对战的核心思想为：房主用户端随机取一名人机用户，房主端触发人机的自动准备，房主端也自动开始对战，在对战过程中，房主端通过页面 UI 用户手动选词，人机将在 2~5s 或房主选词之后随机完成选词操作，正确率为 75%。 后期可以对正确率进行优化，根据用户的历史正确率进行自动化推算，实现更智能的人机用户，提供更好的用户体验。 [图片] 最后通过 3 个月的开发、功能迭代和运营，目前拥有2600 多的用户量，小程序用户打分为5.0 满分。创建房间且完成对战12000 多局，收录词汇25960个，收录了用户65000多个生词，十分感谢这个项目带给我的成就感。

1 项目概述 游戏开发，尤其是微信小游戏开发，是最近几年比较热门的话题。 本次「云开发」公开课，将通过实战「在线对战五子棋」，一步步带领大家，在不借助后端的情况下，利用「小程序 ✖ 云开发」，独立完成一款微信小游戏的开发与上线。 2 任务目标 根据项目初始框架，阅读教程的同时，逐步完成棋盘绘制、音乐播放、玩家对战、输赢判定等功能，最终实现一个可以快乐玩耍的在线对战五子棋。 在这个过程中，会了解到 Serverless 的一些概念，并且实际应用它们，比如：云数据库、云存储、云函数、增值能力。除了这些基本功能，还准备了更多的硬核概念与落地实践，比如：实时数据库、聚合搜索、权限控制。 完成开发后，上传并且设置为体验版，欢迎邀请更多人来体验。 3 准备工作 从 TencentCloudBase/tcb-game-gomoku 中下载代码到本地： [代码]git clone https://github.com/TencentCloudBase/cloudbase-examples.git cd /cloudbase-examples/minigame/tcb-demo-gomoku [代码] 切换课程专用的 [代码]minigame-study[代码] 分支： [代码]git checkout minigame-study [代码] 4 实战任务 4.1 创建云开发与小游戏环境 1、打开微信 IDE，点击左侧的小游戏，选择右侧的导入项目，导入之前下载的「在线对战五子棋」的目录，AppID 修改为你已经注册好的小游戏 AppID。 [图片] 2、进入后，点击上方的云开发按钮。如果之前没有开通过云开发，需要开通云开发，新开通的话需要等待 10 ～ 20 分钟。 [图片] 3、进入「云开发/数据库」，创建新的集合，新集合的名称是[代码]rooms[代码]。 [图片] 4、进入「云开发/存储」，点击“上传文件”。上传的内容是[代码]/static/[代码]下的[代码]bgm.mp3[代码] 和 [代码]fall.mp3[代码]。之后的代码中会通过云存储的接口，请求文件的临时 url，这样做的目的是减少用户首次进入游戏加载的静态资源。 [图片] 4.2 准备配置文件 创建配置文件： [代码]cp miniprogram/shared/config.example.js miniprogram/shared/config.js [代码] 将关键字段的信息，换成自己账号的信息即可： [图片] 4.3 创建云开发接口 打开 [代码]miniprogram/shared/cloud.js[代码]，在里面初始化云开发能力，并且对外暴露云数据库以及聚合搜索的 API。 [图片] 4.4 获取云存储资源的链接 为了减少用户首屏加载的静态资源，音乐资源并没有放在[代码]miniprogram[代码]目录下，而是放在了云存储中，通过调用云存储的 api 接口，来返回静态资源的临时链接。 在 [代码]miniprogram/modules/music.js[代码]中，会调用资源接口，获取资源链接： [图片] [代码]getTempFileURL[代码]函数属于云开发相关，因此放在了 [代码]miniprogram/shared/cloud.js[代码]中。这里只需要临时链接[代码]tempFileURL[代码]属性，其它返回值直接过滤调即可。 为了方便外面调用，promise 内部不再用 reject 抛错。对于错误异常，返回空字符串。这样，加载失败的资源不会影响正常资源的加载和 Promise.all 中逻辑进行。 [图片] 4.5 游戏进入与身份判断 根据前面的流程图我们可以看到，游戏玩家的身份是分为 owner 与 player。它们的含义如下： owner：玩家进入游戏后，查找是否有空闲房间，如果不存在空闲房间，那么就会主动创建新的空闲房间。那么对于新创建的房间，玩家就是 owner。 player：玩家进入游戏后，查找是否有空闲房间，如果存在空闲房间，那么就加入空闲房间。那么对于空闲房间，玩家就是 player。 判断的依据就是 [代码]judgeIdentity[代码] 方法中，读取云数据库集合中的 rooms 的记录。如果存在多个空闲房间，需要选取创建时间最近的一个房间。因此，这里需要用到「聚合搜索」的逻辑。 聚合搜索的条件，在这里有 3 个： 标记人数的字段，是否为 1 创建时间倒叙排序 只选择 1 个 [图片] 4.6 创建新房间 在上述的身份判断函数逻辑中，如果聚合搜索查询的结果为空，说明没有空闲房间，玩家需要作为 owner 来创建新的房间，等待其它玩家加入。 创建房间的逻辑就是将约定好的字段，放进云数据库的记录中。这些字段有： roomid<[代码]String[代码]>: 6 位房间号，唯一 nextcolor<[代码]"white" | "black"[代码]>: 下一步是白棋/黑棋走 chessmen<[代码]String[代码]>: 编码后的棋盘数据 createTimestamp<[代码]String[代码]>: 记录创建时间戳，精确到 ms people<[代码]Number[代码]>: 房间人数 是的，你可能注意到了，这里需要保证 roomid 是不重复的。因此本地生成的随机 roomid，需要先调用云数据库的查询接口，检测是否存在。如果存在，那么递归调用，重新生成随机字符串。 [图片] 4.7 监听玩家进入 对于 owner 身份来说，除了要创建新房间，还需要在创建后监听 player 身份的玩家进入游戏。 对于 player 身份的玩家进入游戏后，会更新记录中的 people 字段（1 => 2）。这时候就需要利用「实时数据库」的功能，监听远程记录的 people 字段变化。 代码实现上，调用[代码]watch[代码]方法，并且传递[代码]onChange[代码]函数参数。一旦有任何风吹草动，都可以在[代码]onChange[代码]回调函数中获得。对于传递给回调函数的参数，有两个比较重要： docChanges<[代码]Array[代码]>: 数组中的每一项对应每条记录的变化类型，变化类型有 init、update、delete 等。 docs<[代码]Array[代码]>: 数组中的每一项对应每条记录的当前数据。 [图片] 4.8 越权更新字段 对于 player 身份来说，进入房间后，既不需要「创建新房间」，也不需要「监听玩家进入」。但需要更新记录的 people 字段。由于记录是由 owner 身份的玩家创建的，而云数据库只有以下 4 种权限： 所有用户可读，仅创建者可读写 仅创建者可读写 所有用户可读 所有用户不可读写 以上 4 种权限，并没有「所有用户可读写」。因此，对于越权读写的情况，需要通过调用云函数来以“管理员”的权限实现。在 [代码]cloudfunction[代码] 中创建 [代码]updateDoc[代码] 云函数，接收前端传来的 collection、docid、data 字段。对于 data 字段来说，就是数据记录的最新更新数据。 [图片] 在小游戏中，通过[代码]wx.cloud.callFunction[代码]来调用云函数。传入的 data 字段指明被调用的云函数，传入的 data 字段可以在云函数的回调函数的 event 参数中访问到（如上图所示）。 [图片] 4.9 落子更新逻辑 不论对于 player 还是 owner 身份，都需要处理落子的逻辑。落子逻辑中，下面的两种情况是属于无效落子： 点击位置已经有棋子 对方还未落子，目前依然处于等待情况 对于以上两种情况，处理的逻辑分别是： 棋盘状态保存在内部类中，调用落子的函数，会返回是否成功的字段标识 只有监听到远程棋盘更新后，才会打开本地的锁，允许落子；落子后，会重新上锁 [图片] 落子成功后，要在本地判断是否胜利。如果胜利，需要调用退出的逻辑。但无论是否胜利，都要将本地的最新状态更新到云端。 [图片] 4.10 监听远程棋盘更新 不论对于 player 还是 owner 身份的玩家，都需要监听远程棋盘的更新逻辑。当远程棋盘字段更新时，本地根据最新的棋盘状态，重绘整个棋盘。并且进行输赢判定，如果可以判定输赢，则退出游戏；否则，打开本地的锁，玩家可以落子。 因为不同身份均需要监听，因此这一块的监听逻辑可以复用。不同的是，两种身份的监听启动时间不一样。owner 身份需要等待 player 身份玩家进入游戏后才开启棋盘监听；player 身份是更新了 people 字段后，开启棋盘监听。 在监听逻辑中，需要判断远程更新的字段是否是 chessmen，这是通过前面提及的 dataType 来实现的。还徐哟啊判断记录中的 nextcolor 字段是否和本地的 color 一样，来决定是否打开本地的锁。 [图片] 如果上述的两个条件均满足，则执行更新本地棋盘、判定输赢、打开本地锁的逻辑。 [图片] 4.11 游戏结束与退出 每次需要判定输赢的地方，如果可以判定输赢，那么都会走到游戏退出逻辑。退出的逻辑分为 2 个部分，第 1 个是给用户提示，第 2 个是调用云函数清空记录。 第 1 个逻辑中用户提示，需要判定用户胜负状态： [图片] 第 2 个逻辑中清除记录的原因是为了方便调试，对于真正的业务场景，一般不会删除历史数据，方便问题定位。同时，这也是一个越权操作，需要调用云函数来实现。 [图片] 6. 课程完整源码 https://github.com/TencentCloudBase/cloudbase-examples/tree/master/minigame/tcb-demo-gomoku 7. 联系我们 更多云开发使用技巧及 Serverless 行业动态，扫码关注我们~ [图片]

createInnerAudioContext 接口在Android上播放部分MP3文件时声音会变调！ 变调就是声音和正常播放器放出来的完全不一样，有点沉闷，像外星人的声音！ 经测试，iOS、微信开发者工具上调试皆正常，只有Android上存在这个奇怪的现象 下面是测试代码，就这段音频有问题，存在变调： https://test-1256232604.cos.ap-shanghai.myqcloud.com/bugaudio.mp3 [代码]let audio = wx.createInnerAudioContext();[代码][代码]audio.autoplay = [代码][代码]true[代码][代码];[代码][代码]audio.src = [代码][代码]"https://test-1256232604.cos.ap-shanghai.myqcloud.com/bugaudio.mp3"[代码][代码];[代码]

调用wx.createInnerAudioContext()时，在ios上面听筒外放，声音有破音，并且后续声音陆续变小，有办法嘛

为什么使用自定义导航 对比默认导航栏，我们会更需要： 统一Android、IOS手机对于页面title的展示样式及位置 更丰富的导航栏定制效果，如添加home图标等 左上角返回事件的监听处理 统一实现双击返回顶部功能 自定义导航组件实现思路 自定义导航组件实现的核心是需要计算导航栏的真实高度 这里以官方文档->扩展能力中的Navigation组件为例分析实现思路。当使用"navigationStyle": "custom"时，默认导航被移除，页面的开始位置变成了屏幕顶部，这时我们需要实现的导航栏是在状态栏下面。 导航栏的真实高度=状态栏高度+导航栏内容。 [图片] 使用wx.getSystemInfo获取到statusBarHeight便是导航栏的高度，但是导航栏内容高度呢？ 有人可能觉得导航栏内容高度顾名思义就是导航栏内容高度啊，内容撑起还用管嘛！要，必须要！ 因为右上角胶囊按钮是原生加载的，我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。 导航栏内容高度=（胶囊按钮的顶部距离 - 状态高度）*2 + 胶囊高度 [图片] 如何计算胶囊的数据呢？幸运的是我们有 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的布局位置信息，那么动态计算导航栏的内容高度就很方便啦。 好了，以上就是动态计算的核心思路，我们再来看官方Navigation组件高度是怎么实现的 [代码]page{--height:44px;--right:190rpx;} .weui-navigation-bar .android{--height:48px;--right:222rpx} .weui-navigation-bar__inner{ position:fixed;top:0;left:0;z-index:5001;display:flex;align-items:center; height:var(--height);padding-right:var(--right);width:calc(100% - var(--right)) } [代码] 导航栏内容的高度是通过- -height这个css变量提前声明好的，安卓机型会重新覆盖为新的css变量值，目前没发现有适配问题。 官方就是官方啊，具体尺寸都知道，那就不用一番计算周折啦，直接拿来主义即可。 导航的布局位置已经搞定啦，剩下就是写具体的内容，不同业务实现需求不同这里就不一一赘述了。 完善官方顶部导航组件 本着拿来主义，直接使用官方Navigation组件，但在实际业务开发中还是遇到不少需要自定义的需求，就比如： loadding样式没实现 标题内容超出没有出现省略号 和原生顶部的样式不兼容，导致单个页面引入时跳转有明显差异出现 没有双击返回顶部功能开关功能 引入页面需要获取导航栏的高度，来控制其他元素距离顶部的位置， 不能根据页面栈数据动态显示隐藏back按钮， 针对以上需求，我们对官方的组件进行二次完善开发，满足常规的自定义需求绰绰有余，直接引入开箱即用。 源码使用示例 https://github.com/YuniorZen/minicode-debug/tree/master/minicode02 [图片] 使用说明 [代码]/*自定义头部导航组件，基于官方组件Navigation开发。*/ <navigation-bar title="会员中心" bindgetBarInfo="getBarInfo"></navigation-bar> [代码] 组件属性列表 属性 类型 描述 bindgetBarInfo function 组件实例载入页面时触发此事件，首参为event对象，event.detail携带当前导航栏信息，如导航栏高度 event.detail.topBarHeight bindback function 点击back按钮触发此事件响应函数 backImage string back按钮的图标地址 homeImage string home按钮的图标地址 ext-class string 添加在组件内部结构的class，可用于修改组件内部的样式 title string 导航标题，如果不提供为空 background string 导航背景色，默认#ffffff color string 导航字体颜色 dbclickBackTop boolean 是否开启双击返回顶部功能，默认true border boolean 是否显示顶部导航下边框分割线，默认false loading boolean 是否显示标题左侧的loading，默认false show boolean 显示隐藏导航，隐藏的时候navigation的高度占位还在,默认true left boolean 左侧区域是否使用slot内容，默认false center boolean 中间区域是否使用slot内容，默认false Slot name 描述 left 左侧slot，在back按钮位置显示，当left属性为true的时候有效 center 标题slot，在标题位置显示，当center属性为true的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航，以上问题避免不了，只能忍着接受。 目前还没遇到完美的解决方案，针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中，如果你有好的想法欢迎留言反馈，一起学习交流。

[图片] 微信宣布小程序将可以在PC端微信打开后，智库君就接到要求，需要兼容PC端小程序，一开始以为官方已经做了完美适配，不需要改什么，但当本人下载内测版开始测试的时候，才发现或许坑还挺多的~~~ 下面分享下本人“搬砖填坑”的全过程： （以下都是PC端小程序特有的问题，手机端正常） 先说下使用流程 [图片] 微信开发者工具菜单栏点击 设置->通用设置，在自动预览部分勾选“启动 PC 端自动预览”。 使用自动预览功能，点击 预览->自动预览->编译并预览，成功的话将在微信 PC 版上自动拉起小程序。 [图片] PC版打开后就横屏问题 [图片] [代码]{ "pages": [], "resizable":false, //在这里设置false，使得小程序默认手机尺寸 "pageOrientation":"portrait", //这里默认设置即可 ... } [代码] PC版微信默认打开小程序是ipad版，这样就会出现各种形变，布局错乱，这个可以在app.json进行配置，静止自动旋转，默认手机竖屏样子打开。 页面找不到问题 [图片] 这个问题本人也找了很久，一直很纳闷IDE工具和手机打开看都没什么问题，用PC打开小程序就出现页面找不到的情况，大致报错是： [代码]page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task. [代码] 一般这种情况以往是 app.json没配，或者页面里面缺少page(),但这次诡异的地方是只有“PC版小程序”报这个错！后来分析问题发现是：目前PC版小程序不能直接支持ES6，必须转换成ES5，同时由于一些语法转化不够完善，特别是ES7中的await 和 async 导致转化二次报错，这里就需要打开 “增强编译” 配置。 [图片] 打开有CSS报错 [图片] 因为目前PC版小程序估计内核的机制问题，还只支持低版本的选择器，如果你直接写小程序的标签，它无法识别，比如 [代码].popCont navigator{ //navigator 标签是小程序里的，PC端无法支持 width: 560rpx; height: 300rpx; } .popCont image{ //image 标签是小程序里的，PC端无法支持 width: 560rpx; height: 300rpx; } [代码] 但这些写法，其实在手机小程序和IDE工具里是完全正常的，PC版需要做兼容，改成class选择器。 布局结构混乱 如果遇到这种情况，会检查一下是否使用屏幕尺寸（rpx）来计算布局，PC 上屏幕尺寸比窗口尺寸大，应该使用窗口尺寸来计算。 小程序如何判断是 PC 平台？ 通过 getSystemInfo 官方接口（platform 是 windows） 通过 UA（PC UA 包含 MiniProgramEnv/Windows） 微信官方PC版小程序内测地址: https://dldir1.qq.com/weixin/Windows/WeChat2.7.0_beta.exe 最新官方IDE调试工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html 往期回顾： [打怪升级]小程序评论回复和发帖功能实战（二） [打怪升级]小程序评论回复和发贴组件实战（一） [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二） [填坑手册]小程序目录结构和component组件使用心得

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

自定义navigate+分包+自定义tabbar，有需要的可以拿去用用，可能会存在一些问题，根据自己的业务改改吧 大家也可以多多交流 代码片段：在这里 {"version":"1.1.5","update":[{"title":"修复 [复制代码片段提示] 无法使用的问题","date":"2020-06-15 09:20","imgs":[]}]} 更新日志:     2019-11-25  自定义navigate 也可以调用wx.showNavigationBarLoading 和 wx.hideNavigationBarLoading     2019-11-25  页面滚动条显示在自定义navigate 和 自定义tabbar上面的问题(点击“体验custom Tabbar” [图片] [图片] 其他demo: 云开发之微信支付：代码片段

前言(写给入坑的小白) 本文不涉及任何需要资质的小程序（如：视频类目）。小程序流量主是个人和小微企业主要变现途径之一，满1000人即可开通流量主（登录mp.weixin.qq.com，左侧边栏-推广-流量主-开通即可）。开通后，开发者可从流量主-广告位管理添加广告位，目前有6种广告位。 [图片] 正文（本文约很多字，分为四大主类，手里有1-10个小程序建议全部看完；手里有10个以上小程序，可跳过1、2、3，均为个人观点，不喜使劲喷） 一、小程序定位 小程序定位目前有以下四种，均不需要任何资质，个人(商城除外)/小微企业都可以做，由于本人不擅长文字表达，每个类型只选择一个做分析，谅解。 1、工具类 工具类有很多可以做：题库、技术文档、教程、去水印等。目前最火爆的应该属于疫情相关类的工具，关于疫情数据类小程序不做分析，没资质也没权利，主要说疫情周边可运营的工具。头像口罩，代表小程序：头像加口罩、戴个口罩吧、戴上口罩(每日搜索量约等于2000)，可参考以下做法： [图片] 以下为近7日访问数据量 [图片] 盈利方式：流量主 延伸参考：如果仅做头像加口罩的话，那么疫情过后，这个小程序会直线下降，将无任何作用。如果开发者手里目前有类似小程序，可参考“头像加口罩”做法，逐渐去延伸头像周边功能，例： ①、头像加字：头像+数字、头像加V、头像加字、头像加圣诞帽、新年头像边框、头像加福、头像加明星等 ②、聊天背景图、壁纸：武汉加油、卡通、美女（不要漏点太多）、二次元、跑车、科技等 ③、趣味九宫格配图：类似朋友圈9张图，中间获取用户自己头像，周围8张图弄点能吸引用户的等 ④、文字秀：微信昵称下标、上标、个性昵称等 运营分析：如果参考以上4点做法，首先你的程序再疫情结束后，不至于直线下滑，最起码能留住一些用户（UI很重要） 个人建议：工具类的好处就是不需要去长时间盯着后台，建议有想法的开发者，可以入门5-10个左右工具类小程序（功能不要相同）。 推广方式：参考本文第四大板块内容 2、返利类 主流返利平台：淘宝、天猫、拼多多、京东、蘑菇街、唯品会、网易考拉，以下参考 [图片] 盈利方式：返利(主)+流量主(辅) [图片] 基础分析：每个人微信里都会有一个或多个微信群是给你们购物优惠券链接的，他们盈利方式主要是靠每个平台的返利，比如淘宝天猫的叫“阿里妈妈”、拼多多的叫“多多进宝”等 运营分析： ①、平台功能：提供所有优惠券、商品返利、代理入驻、提现（个人可做收款码、企业可对接微信支付到零钱） ②、招代理商、可以给代理商(兼职、宝妈)50%以上的返利 ③、除了商品优惠券之外，可以把返利分给一部分给到用户。首先，用户会花更少的钱买到商品；其次，用户买完东西还会赚点小钱，每个月可提现到微信零钱。这样用户会发生裂变，省钱+赚钱。 个人建议：开发者至少有一个类似的返利小程序，每个月只需运营一天，工作内容一是把用户的返利发给用户&代理商，二是自己去各大平台领取每个月的“工资” 推广方式：参考本文第四大板块内容 3、商城类(个人开发者可跳过) 商城类，本人运营的比较少，每天就10-20单左右，卖啥就不做广告了 盈利方式：差价 基础分析：如果自己手里有一些商品低价资源，可以做一个“综合服务商城类目”，然后去试着用广告主去推一下 运营分析： ①、平台功能：砍价、返利、拼团、回购、入驻、积分、抽奖、游戏营销 ②、广告主曝光&点击报价不要最低，也不要最高，理由就是最低的话，80%的钱会给你推到一些质量很差的微信用户，比如我。 ③、对接圈子，虽然圈子刚起步，不确定能不能做大，万一呢？ 个人建议：企业一定要有一个自己的商城，哪怕没人买。这种东西怎么说呢，就好比一个企业站，虽然没什么用，但是得放那儿，万一客户要看呢？ 推广方式：参考本文第四大板块内容 4、游戏类（非小游戏） 答题、成语、找茬等类似运营的比较多，可自行搜索，不要认为这是游戏，开发者就望而却步，在线教育类目是可以通过的，这个开发者很多都不知道。以下可参考： [图片] 盈利方式：流量主 基础分析：基本所有的模式都是闯关类型，这种类型的小程序，基本都是用户消磨时间用 运营分析：关卡尽量多，入门、初级、中级、高级，高级模式可以做类比循环，形成无限关卡模式，闯关奖励机制，签到机制等。这种类型的小程序比较方便运营，裂变起来也快。 个人建议：裂变模式一定要有，虽然微信会严格把控这方面功能，但是开发者可以做一些技巧，不要让用户强制或者主动去触发，这样微信对开发者还是很友好的。 推广方式：参考本文第四大板块内容 二、小程序开发 有实力的开发者，自己开发，云开发很快，会前端就可以了，没实力的去正规平台买源码，论坛源码也很多，有部分论坛还是嵌入了比特币勒索，自己做好防护。个人建议：开发者能开发尽量自己开发，后期迭代方便，不要像我一样，50多个小程序80%是买现成去运营的。反正各有各的好处，开发者可自行决定，运营者可选择直接购买源码直接上线运营，前提是自己看好功能是不是和自己要的一样。有些SAAS平台的开发者实力还是可以的，支持定制功能。此处不做广告，自行搜索或者询问朋友。 三、广告位位置及利润 开发者的每个页面广告位一定要分开！一定要分开！一定要分开！这样做的目的是为了分析每个广告位的利润，好去做调整，把收益最大化。 失败案例举例：小程序的主页、个人中心页用同一个banner广告位，这样做出来一点好处都没有，后台只能看到banner收益是多少，看不到是哪个页面收益。极端情况，收益全部再首页，个人中心页没有广告收益，这种情况开发者是不知道的，如果把广告位分开，这种情况可以去优化个人页面，或者主页面换成视频banner。广告位分析页面：流量主--数据统计--广告数据--广告指标明细--细分数据 [图片] [图片] 1、很多人表示，疫情期间流量主收入下滑。这个原因不是因为微信调整流量主收益，根本问题是自己的用户质量。举个例子，当你开通流量主之后，你的用户还是这1000个，假如你第一天收益为100，你很开心，1000用户就能赚100，你第二天就放弃推广了，这样的话，你的用户质量是会逐渐下滑，微信方完全可以认定为你这1000人都是自己的号，去刷广告费的。长此以往下去，你的流量主利润会无限趋向于0。举个栗子： [图片] 2、广告位位置一定要合理好看，但是不代表“流氓”，比如全明星代言的某游戏“元宝无限收一刀999”点哪儿哪充值。开发者需要注意的是小程序的质量，需要用户在每个页面停留的时长最起码30秒，这样一个完整的视频广告才能曝光完。 3、banner广告收益是按有效点击计算的。很多人好几千曝光，但是点击只有几个、十几个，这种情况需要不断去优化接入的场景/位置，提高用户点击意愿。个人技巧：banner广告位尽量不要太多，1-2个就可以。尽量多放几个视频广告位，这样曝光也有收益。格子广告没试过，用过都说不好~ 4、激励广告作为流量主最高收益是有一定道理的，用户为了获取某些奖励是必须观看完整的，所以给开发者建议：用户如果可以获得小程序内某些奖励，可以适当多放一些激励广告位。 5、所有的广告位都是根据用户年龄、爱好等参数去调取相应的广告，开发者不需要去考虑 6、广告收益个人认为：激励》视频》插屏》前贴》banner》格子(格子没试过，暂放倒数第一) 四、小程序推广 尽量做成年人主打的小程序，有些开发者觉得好玩儿，做一些儿童益智类的小程序，你是认为儿童有手机，还是认为家长愿意让孩子玩儿手机呢？这个很不解。没有鄙视的意思，也许是情怀吧~~毕竟我做小程序比较俗，就是为了赚钱。 主流推广方式：公众号引流、截流，由于涉及一些不合常规的内容，本文只说常规操作，剩下的自己领悟，或者可以联系我~ 首先小程序的名字至关重要，一个好的名字可以带来无限的流量，再加上裂变功能（邪恶的微笑）。起名字的时候可以用到的工具：搜索小程序-微信指数，查询关键字，尽量找稳定再1000万以上的搜索量，从关键字中摸索自己的小程序名字。这样用户搜索到你的小程序几率会很高~ 1、工具类核心玩儿法（适用于所有小程序推广）：文章引流，截取关键字，火爆主题，比如2019年12月19日庆余年全集泄露、2020年疫情(不要发疫情数据内容，要发一些正能量的有内容文章去引流），我阅读过的文章最低的阅读量8000左右，最高的10万+，据说有好几百万的阅读量。如果你的文章写的好，结尾放一个小广告：为防止疫情蔓延，请给您的头像带上口罩~，啪，一个卡片小程序（或二维码），流量自己想~ 推广对象：18-30岁 2、返利类核心玩儿法： ①、可以参考工具类玩儿法 ②、各大微信群、QQ群，去推广，招代理等方式，或者去买一些基础流量，进行裂变，实际运营看下效果，好继续针对用户群体去推广，建立自己的群体系，群内发商品返利链接。微信好友没人？给你举个例子，我这篇文章发完，如果加个我的二维码，最起码能有100人加我，不是我文章写的有多好，是你永远不知道用户有什么样的目的和需求~ 推广对象：18-60岁 3、商城类核心玩儿法 ①、可参考返利类核心玩儿法，拥有自己的客户群体系，发一些自己的商品还是可以的，一定要带分销体系，你懂得~(最高3级，再高就是传销了) ②、广告主、目前效益个人感觉不明显，每次花1000块钱做广告，利润基本没有，和发广告的钱持平，而且用户留存也不是很高，可能是我的商品比较单一等各方面因素吧，不过赚流量还是不错的。 推广对象：18-30岁(以我的商城为例，还需看商城出售的内容) 4、游戏类核心玩儿法（非小游戏） ①、一个好的名字就够了。举例：精选商品橱窗（腾讯官方），微橱窗（我朋友的）。不得不说，这波流量很高，遗憾的是，他不是火爆的游戏类小程序~ [图片] ②、参考工具类玩儿法，文章引流截流 推广对象：18-40岁 五、小程序矩阵 矩阵一定要有，矩阵一定要有，矩阵一定要有，防截流，底配10个小程序。不是纯矩阵，是微信开发规定，每个小程序可以跳转10个小程序，开发者可以利用这个功能去添加自己的矩阵来获取更多的流量收益，保证自己的用户在自己的矩阵圈活动。 [图片] 写这篇文章主要是给大家传授经验，希望小白能学到点东西，入门后的朋友可领悟到更多运营方法，江湖之大，附月账单有缘再见 [图片]

昨天发了微信头像挂红旗的讲解文章，应大家要求，今天录制一套视频，免费送给大家。 我们先来看下效果图 [图片] [图片] [图片] 原理讲解 其实原理很简单，我们用canvas把自己的头像画在最下面，然后把对应的相框模版画到我们头像上面。然后使用小程序自带的api把我们画出来的图片，保存成本地图片文件，然后把这个图片作为我们的微信头像就可以了。 [图片] 免费视频链接 https://www.ixigua.com/i6740973288706540040/ B站免费视频链接 https://www.bilibili.com/video/av69074127/ 腾讯视频免费视频链接 https://v.qq.com/x/page/f3001t402da.html

最近朋友圈里经常有看到这样的头像 [图片] 既然这么火，大家要图又这么难，作为程序员的自己当然要自己动手实现一个。 老规矩，先看效果图 [图片] 仔细研究了下，发现实现起来并不难，核心代码只有下面10行。 [代码] wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: num, destHeight: num, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() }, fail: function(res) { wx.hideLoading() } }) [代码] 一，首先要创建一个小程序 至于如何创建小程序，我这里就不在细讲了，我也有写过创建小程序的文章，也有路过相关的学习视频，去翻下我历史文章找找就行。 二，创建好小程序后，我们就开始来布局 布局很简单，只有下面几行代码。 [代码]<!-- 画布大小按需定制 这里我按照背景图的尺寸定的 --> <canvas canvas-id="shareImg"></canvas> <!-- 预览区域 --> <view class='preview'> <image src='{{prurl}}' mode='aspectFit'></image> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="1">生成头像1</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="2">生成头像2</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="3">生成头像3</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="4">生成头像4</button> <button type='primary' bindtap='save'>保存分享图</button> </view> [代码] 实现效果图如下 [图片] 三，使用canvas来画图 其实我们实现微信头像挂红旗，原理很简单，就是把头像放在下面，然后把有红旗的相框盖在头像上面 [图片] 下面就直接把核心代码贴给大家 [代码]let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: "../../images/xiaoshitou.jpg", success: function(res) { console.log("promise1", res) resolve(res); } }) }); let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: `../../images/head${index}.png`, success: function(res) { console.log(res) resolve(res); } }) }); Promise.all([ promise1, promise2 ]).then(res => { console.log("Promise.all", res) //主要就是计算好各个图文的位置 let num = 1125; ctx.drawImage('../../'+res[0].path, 0, 0, num, num) ctx.drawImage('../../' + res[1].path, 0, 0, num, num) ctx.stroke() ctx.draw(false, () => { wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: num, destHeight: num, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() }, fail: function(res) { wx.hideLoading() } }) }) }) [代码] 来看下画出来的效果图 [图片] 四，头像加红旗画好以后，我们就要想办法把图片保存到本地了 [图片] 保存图片的代码也很简单。 [代码]save: function() { var that = this wx.saveImageToPhotosAlbum({ filePath: that.data.prurl, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好哒', confirmColor: '#72B9C3', success: function(res) { if (res.confirm) { console.log('用户点击确定'); } } }) } }) } [代码] 来看下保存后的效果图 [图片] 到这里，我的微信头像就成功的加上了小红旗了。 [图片] 源码我也已经给大家准备好了，有需要的同学在文末留言即可。 [图片] 后面我准备录制一门视频课程出来，来详细教大家实现这个功能，敬请关注。

背景 setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。详见官网描述 常见的 setData 操作错误 频繁的去 setData 每次 setData 都传递大量新数据 后台态页面进行 setData 针对第二点官网给出意见是,其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义 下面通过源码深入分析的方式了解小程序是怎么针对数据路径进行组装和构造数据 小程序逻辑层框架源码 微信小程序运行在三端：iOS（iPhone/iPad）、Android 和 用于调试的开发者工具。在开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的。这里简单点就直接通过开发者工具来查找源码。 在微信开发者工具中，编译运行你的小程序项目，然后打开控制台，输入 document 并回车，就可以看到小程序运行时，WebView 加载的完整的 WAPageFrame.html，如下图： [图片] 可以看到[代码]./__dev__/WAService.js[代码]这个库就小程序逻辑层基础库，提供逻辑层基础的 API 能力 查找WAService.js源码 在微信小程序 IDE 控制台输入 openVendor 命令，可以打开微信小程序开发工具的资源目录 [图片] 我们可以看到小程序各版本的运行时包 .wxvpkg。.wxvpkg 文件可以使用 wechat-app-unpack 解开，解开后里面就是[代码]WAService.js[代码] 和 [代码]WAWebView.js[代码] 等代码 [图片] 另外也可以只直接通过开发者工具的Sources面板查找到WAService.js的源码 [图片] 分析setData源码 在WAService.js中全局查找setData方法，找到定义此方法的地方，如下 [图片] 源代码使用了大量的逗号运算符，逗号运算符的优先级是最低的，比条件选择符还低 大量使用void 0 表示undefined setData函数定义中添加了关键的注释如下： [代码]function(c, e) { // 保存闭包内的this对象，即常用的that var u = this; // 官网定义 Page.prototype.setData(Object data, Function callback), // 即 c: Object对象，e: Function界面更新渲染完毕后的回调函数 try { // 返回 [object Object] 中的Object var t = v(c); if ("Object" !== t) return void E("类型错误", "setData accepts an Object rather than some " + t); Object.keys(c).forEach(function(e) { // e: 可枚举属性的键值, void 0 表示undefined (https://github.com/lessfish/underscore-analysis/issues/1) void 0 === c[e] && E("Page setData warning", 'Setting data field "' + e + '" to undefined is invalid.'); // t为包含子对象属性名的属性数组, u.data和u.__viewData__都是page.data的深拷贝副本 var t = N(e) , n = j(u.data, t) , r = n.obj , o = n.key; if (r && (r[o] = y(c[e])), void 0 !== c[e]) { var i = j(u.__viewData__, t) , a = i.obj , s = i.key; a && (a[s] = y(c[e])) } }), __appServiceSDK__.traceBeginEvent("Framework", "DataEmitter::emit"), this.__wxComponentInst__.setData(JSON.parse(JSON.stringify(c)), e), __appServiceSDK__.traceEndEvent() } catch (e) { k(e) } } [代码] 关键函数N(e)，解析属性名(包含.和[]等数据路径符号)，返回相应的层级数组，如 [代码]{abc: 1}中abc属性名 => [abc], {a.b.c: 1}中'a.b.c'属性 => [a,b,c], {"array[0].text": 1} => [array, 0, text][代码] 关键的注释如下 [代码]function N(e) { // 如果属性名不是String字符串就抛出异常 if ("String" !== v(e)) throw E("数据路径错误", "Path must be a string"), new M("Path must be a string"); for (var t = e.length, n = [], r = "", o = 0, i = !1, a = !1, s = 0; s < t; s++) { var c = e[s]; if ("\\" === c) // 如果属性名中包含\\. \\[ \\] 三个转义属性字符就将. [ ]三个字符单独拼接到字符串r中保存，否则就拼接\\ s + 1 < t && ("." === e[s + 1] || "[" === e[s + 1] || "]" === e[s + 1]) ? (r += e[s + 1], s++) : r += "\\"; else if ("." === c) // 遇到.字符并且r字符串非空时，就将r保存到n数组中并清空r; 目的是将{ a.b.c.d: 1 }中的链式属性名分开,保存到数组n中，如[a,b,c,] r && (n.push(r), r = ""); else if ("[" === c) { // 遇到[字符并且r字符串非空时，就将r保存到n数组中并清空r；目的是将{ array[11]: 1 }中的数组属性名保存到数组n中，如[array,] // 如果此时[为属性名的第一个字符就报错,也就是说属性名不能直接为访问器, 如{ [11]: 1} if (r && (n.push(r), r = ""), 0 === n.length) throw E("数据路径错误", "Path can not start with []: " + e), new M("Path can not start with []: " + e); // a赋值为true, i赋值为false i = !(a = !0) } else if ("]" === c) { if (!i) throw E("数据路径错误", "Must have number in []: " + e), new M("Must have number in []: " + e); // 遍历到{ array[11]: 1 }中的']'的时候，就将a赋值为false, 并将o保存到数组n中，如[array,11,] a = !1, n.push(o), o = 0 } else if (a) { if (c < "0" || "9" < c) throw E("数据路径错误", "Only number 0-9 could inside []: " + e), new M("Only number 0-9 could inside []: " + e); // 遍历到{ array[11]: 1 }中的'11'的时候，就将i赋值为true, 并将string类型的数字计算成Number类型保存到o中 i = !0, o = 10 * o + c.charCodeAt(0) - 48 } else r += c // 普通类型的字符就直接拼接到r中 } // 将普通的字符串属性名，.和]后面剩余的字符串保存到数组n中,如{abc: 1} => [abc], {a.b.c: 1} => [a,b,c], {array[0].text: 1} => [array, 0, text] if (r && n.push(r),0 === n.length) throw E("数据路径错误", "Path can not be empty"), new M("Path can not be empty"); return n } [代码] 关键函数j(e, t)，解析出属性最终对应的子对象的属性名，以及对应的子对象 [代码]var x = Object.prototype.toString; function _(e) { return "[object Object]" === x.call(e) } function j(e, t) { // e: page.data的深拷贝副本, t为包含子对象属性名的属性数组 /* - 遍历属性数组[a,b], e={a: {b: 1}} 1. i=0, 此时o为Object类型时, n = a, r = {a: {b: 1}}, o = {b: 1}; 2. i=1, 此时o为Object类型时, n = b, r = {b: 1}, o = 1; retrun { obj: {b: 1}, key: b} - 遍历属性数组[a,0,b], e={a: [{b: 1}]} 1. i=0, 此时t[i]=a, o为Object类型时, n = a, r = {a: [{b: 1}]}, o = [{b: 1}]; 2. i=1, 此时t[i]=0, o为Array类型时, n = 0, r = [{b: 1}], o = {b: 1}; 3. i=2, 此时t[i]=b, o为Object类型时, n = b, r = {b: 1}, o = 1; retrun { obj: {b: 1}, key: b} */ for (var n, r = {}, o = e, i = 0; i < t.length; i++) Number(t[i]) === t[i] && t[i] % 1 == 0 ? // t[i]是否为有效的Number Array.isArray(o) || (r[n] = [], o = r[n]) : _(o) || (r[n] = {}, o = r[n]), n = t[i], o = (r = o)[t[i]]; //注意由于逗号分隔符的优先级是最低的，所以这一行会在前面的条件运算符执行完，再执行 return { obj: r, key: n } } [代码] 最后通过[代码]r && (r[o] = y(c[e]))[代码]的方式将新的值赋给匹配出的子对象的属性，这里j(e,t)函数内部是通过引用的方式向外传递出[代码]r[代码]，所以这里改变[代码]r[o][代码]的值也会将[代码]u.data[代码]内部的值相应修改,完成局部刷新 由于不同的版本解包后，里面压缩之后的方法名称可能跟上面的对不上，但是大体的结构都是一样的 总结 官方提供的array[2].message，a.b.c.d方式就是通过解析成[array,2,message]和[a,b,c,d],找到相应的子结构进行复制操作,到达减少数据量的目的; 分页加载的时候，为了避免将整个list数据重新传输，就可以利用数据路径的方式只追加新的数据 [代码]假设原数组长度 length 为 10，新数组 newList 长度为 3 this.setData{ 'list[10]': newList[0], 'list[11]': newList[1], 'list[12]': newList[2], } [代码] 参考资料 微信小程序技术原理分析 小程序开发指南

尊敬的开发者，欢迎体验Thor UI！ 该项目主要是一些小程序代码片段的分享，以及基础组件的封装。项目免费开源，源码可在GitHub上下载，会不定期进行更新。 项目可能存在缺陷或者bug，如果您在使用过程中发现问题或者有更好的建议，可反馈给我。您也可以将自己觉得不错的案例分享给我，我会扩展到此项目中。 ThorUI QQ交流群：928308676 扫码体验(一) [图片] 扫码体验(二) [图片] 组件文档地址： http://www.thorui.cn/doc ThorUI uni-app版本GitHub地址： https://github.com/dingyong0214/ThorUI-uniapp ThorUI uni-app版本插件市场地址： https://ext.dcloud.net.cn/plugin?id=556 ThorUI 小程序版本GitHub地址： https://github.com/dingyong0214/ThorUI ThorUI 小程序版本插件市场地址： https://ext.dcloud.net.cn/plugin?id=569 V1.6.5（2021-05-24） 1.tui-validation（表单验证）优化，新增validator自定义验证配置项，具体查看文档。 2.tui-round-progress（圆形进度条）组件优化，修复已知问题。 3.tui-cascade-selection（级联选择器）组件优化，修复已知问题。 4.tui-tabs（标签页）组件优化，选项卡可设置数字角标。 ===================== 【ThorUI示例V1.1.0】更新： 1.tui-org-tree（组织架构树）组件优化，可控制节点内容排版方式、节点选中状态、展开收起子节点，具体查看文档。 2.新增tui-form（表单）组件，主要用于表单验证。 3.新增tui-input（输入框）组件，原生input组件增强。 4.新增tui-textarea（多行输入框）组件。 5.新增tui-label（标签）组件，用来改进表单组件的可用性。 6.新增tui-radio（单项选择器）组件。 7.新增tui-checkbox（多项选择器）组件。 8.新增tui-switch（开关）组件。 9.新增tui-picker（选择器）组件，支持1~3级数据。 10.新增tui-landscape（压屏窗）组件。 11.新增tui-segmented-control（分段器）组件。 12.新增tui-notice-bar（通告栏）组件。 13.新增tui-alerts（警告框）组件。 14.新增tui-request（数据请求）封装，支持Promise，支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等。 15.tui-utils（工具类）优化，具体查看文档。 16.新增tui-row组件，配合组件tui-col组件使用（24栅格化布局）。 17.新增tui-tree-view（树型菜单）组件。 18.新增tui-charts-column（柱状图-css版）组件。 19.新增tui-charts-bar（横向柱状图-css版）组件。 20.新增tui-charts-line（折线图表-css版）组件。 21.新增tui-charts-pie（饼状图表-css版）组件。 22.tui-lazyload-img（图片懒加载）组件优化，修复已知问题。 23.新增tui-pagination（分页器）组件。 部分功能截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] V1.4.0： 1.新增日期时间选择器组件。 2.H5新增复制文本功能。 3.新增悬浮按钮组件。 4.新增Tabbar组件。 5.新增tabs标签页组件。 6.新增折叠面板组件。 7.新增图片上传组件。 8.NumberBox组件优化调整。 9.Modal组件优化调整。 10.sticky组件优化调整。 11.countdown组件优化调整。 12.商城模板新增购物车、我的、提交订单、支付成功、我的订单、地址列表、新增地址、设置、用户信息等页面。 V1.3.0 1.新增倒计时组件:时分秒倒计时，支持设置大小，颜色等。 2.新增分隔符组件:Divider分隔符，可设置占据高度，线条宽度，颜色等。 3.新增卡片轮播:包含顶部轮播，秒杀商品轮播等。 4.nvue下拉刷新优化。 5.修复已知bug。 V1.2.2 1.新增组件Modal弹框:可设置按钮数，按钮样式，提示文字样式等，还可自定义弹框内容。 2.修复部分已知bug。 ThorUI V1.2.1 1.新增组件Modal弹框:可设置按钮数，按钮样式，提示文字样式等，还可自定义弹框内容。 2.修复已知bug。 3.ThorUI已上线uni-app版本，请移步uni-app插件市场搜索ThorUI。 ThorUI V1.2.0 1.新增组件NumberBox数字框:可设置步长，支持浮点数，支持调整样式(可单独设置)。 2.新增组件Rate评分:可设置星星数，可设置大小颜色。 3.新增聊天模板，包含：消息列表，好友列表，聊天界面等。 4.新增商城模板,包含：商城首页，商城列表，商城详情等。 5.优化部分体验。 ThorUI V1.1.0 1.将基础组件移出扩展，单独出来。 2.扩展改为单独tab bar选项extend。 3.新增滚动消息（extend=>滚动消息）：包括顶部通告栏，滚动新闻，以及搜索框中出现的热搜产品。 4.新增弹层下拉选择（extend=>弹层下拉选择）：包含顶部下拉选择列表、输入框下拉选择以及底部分享弹层。 5.新增ActionSheet操作菜单（extend=>ActionSheet）：可加入提示信息，可单独设置字体样式。 6.新增新闻模板（extend=>新闻模板）:包含新闻列表，新闻详情，评论等。 7.部分功能优化，修复已知bug。 ThorUI V1.0.0 1.【地图】新增拖拽定位功能 2.【扩展】新增基础组件，包括：字体图标，按钮，Grid宫格，List列表，Card卡片… 3.【扩展】新增数字键盘 4.【扩展】新增时间轴 5.完善thor(个人中心)功能，包括：关于Thor UI，模拟登录，GitHub地址复制，赞赏，反馈，更新日志等 6.已知bug修复，以及部分功能优化 商城模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 新闻模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] 聊天模板截图 [图片] [图片] [图片] 组件功能部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]

因为官方的 slider 只有横向的，所以按照官方的slider写了个纵向的，用 wxs 处理的事件（出了这么久了，却没有怎么用过。。）。代码片段如下 https://developers.weixin.qq.com/s/qYLgcDmC7Air 没什么难点，本来想着几行就写完了。。意料之外的多了些代码。。主要有几点想吐槽的 wxs 里的getState是用来存公共临时变量的。为什么不直接在 wxs里定义一个变量呢？因为如果有多个组件的话，这些变量会共享。另外还要注意下面的情况 [代码] var state = getState() state.value = 1 // 正确 state = {value: 1} // 错误 [代码] 点击事件是加到线条上的，线条本身太窄了，加了padding扩大点。另外，头尾两个位置应该是用户最常用的点击，但是却不怎么好点到，甚至根本点不到，所以在两头各加了2个view来直接设置最大最小值。 想点着圆点滑动的时候，偶尔会点到滚动条上，结果造成页面滑动，所以在最外面加了 touchmove 绑定了空方法。 为什么这个组件需要有 show-value 的配置。。感觉特别鸡肋。。 早先发到群里的那一版不太好，没优化，而且value的设置忘了减去 min了。。哈哈哈。。抱歉。。

       随着小程序使用的人数增长，小程序管理后台陆续收到非中文母语的用户要求支持英文的请求。小程序一开始是直接在程序里使用中文字符串的方式，要做国际化只能把这些硬编码中文的地方全部替换为i18n调用。写了个脚本跑了下，发现小程序里涉及到需要转换硬编码的地方有2000+处。。。手动修改不太科学，于是写了个名为mina-i18n的工具，用于小程序的国际化转换，有兴趣的同学可以用自己的小程序项目实验一下： npm install -g mina-i18n mina-i18n /path/to/origin/mina/project /path/to/i18n/mina/project工具主要包含对JS和WXML两种文件的处理，JS使用babel处理，WXML使用htmlparser库处理，json和css由于没法使用函数调用，这个需要用户自行处理了。 JS处理： JS文件的处理思路：找到中文字符串，将其改为以中文字符串为参数的i18n函数调用。我们的目标是一键转换后可以直接运行，而替换的行为发生在任何一个文件里，所以我们需要一个全局可访问的函数。在小程序里，有两个可以全局访问的变量，一个是getApp()，一个是wx，为了代码的简洁性，我们决定在wx上挂载一个L函数作为全局i18n函数。即： "中文" 转换为 wx._t("中文")直接使用正则表达式匹配是无法做到的符合语法的替换，这里使用babel完成保留程序上下文的替换，替换逻辑写在babel 的插件里的 StringLiteral 的回调里（所有JS程序里解析到的字符串都会进入这个回调），代码如下： const visitor = { StringLiteral(path) { const parentPath = path.parent // 每个中文字符串只处理一次，识别到已处理过就退出，不然会死循环 if (t.isCallExpression(parentPath)) { const callee = parentPath.callee if (t.isMemberExpression(callee)) { const { object, property } = callee if ( t.isIdentifier(object) && object.name === MINA_I18N_JS_FUNCTION_CALLEE && property.name === MINA_I18N_FUNCTION_NAME ) { return } } } const reg = /\s*[\u4E00-\u9FA5]+\s*/g const stringValue = path.node.value if (reg.test(stringValue)) { path.replaceWith(t.CallExpression( t.MemberExpression( t.identifier(MINA_I18N_JS_FUNCTION_CALLEE), t.identifier(MINA_I18N_FUNCTION_NAME) ), [t.stringLiteral(stringValue)] )) } } } WXML处理： 对WXML的处理思路与JS类似，就是找出WXML文件里的中文文本，替换为以文本为参数的i18n函数调用。在小程序里使用函数调用需要用到 WXS语言 ，这个语言无法使用小程序API，只有极少数的类库，反正你当成是个纯运算逻辑的WXML语法助手就行。因为WXS语言没法从外部获取数据，或者WXML里的i18n函数调用只能是类似 i18nFunc("中文","en") 这种形式，就是说具体要转为哪种语言，必须明确地告知WXS的函数。一般用户的语言都是从系统信息中获取，或者用户手动选择后存在服务端，这个语言的变量信息我们在JS里可以获取，而且这个变量每个页面都会用到，而WXML里是没法访问到getApp()和wx这些全局变量的，我们只能在每个页面的Page函数的data变量里加上这个语言变量Lang，才能在每个WXML里使用类似 i18nFunc("中文", Lang) 的形式来做文本替换。处理代码如下： const visitor = { ObjectProperty(path, state) { if (path.node.key.name === 'data') { const parentPath = path.parentPath || {} const parentParentPath = parentPath.parentPath || {} const node = parentParentPath.node if ( t.isObjectExpression(parentPath) && t.isCallExpression(parentParentPath) && node && node.callee && t.isIdentifier(node.callee) && node.callee.name === 'Page' ) { // 变量插入只处理一次，识别到已处理过就退出，不然会死循环 if ( t.isCallExpression(path.node.value) && t.isObjectExpression(path.node.value.arguments[0]) && path.node.value.arguments[0].properties[0].key.name === MINA_I18N_LANG_NAME ) { return } path.replaceWith( t.objectProperty( path.node.key, t.CallExpression( t.MemberExpression( t.identifier('Object'), t.identifier('assign') ), [ t.objectExpression([ t.objectProperty( t.identifier(MINA_I18N_LANG_NAME), t.CallExpression( t.MemberExpression( t.identifier(MINA_I18N_JS_FUNCTION_CALLEE), t.identifier(MINA_I18N_GETLANG_FUNCTION_NAME) ), [] ) ) ]), path.node.value ] ) ) ) } } } } 有了可在WXML里运行的 i18n函数，接下来就是对WXML源文件里的中文文本进行替换。WXML的转换处理要比JS复杂一些，处理JS的时候babel帮我们做好了语法树的解析、遍历和代码生成过程，我们只要实现语法树访问的回调就行，WXML就没有这么好用的工具了，所以需要自己做多点工作。WXML的解析用了 htmlparser2 ，这个库会返回给你一棵DOM树，按着根节点就能遍历整棵树。不过在实际解析生成WXML的时候，发现这个库有个地方没法满足，就是它解析出来的节点属性无法区分开是为空还是 boolean attributes ，也就是说<view hidden></view>和<view hidden=""></view>解析出来的结果都是一样的{hidden: ""}，这其实有很大的歧义，因为在小程序里<view hidden></view>会表示这个view的hidden=true，而<view hidden=""></view>这会被解释为hidden=false，因此按照这个解析结果生成的话，就发现原来小程序里应该隐藏的view都被显示了。。。搜了下其他有其他人给作者提过这个问题的 issue ，我看作者的意思大概是这个库不是用来处理序列化或者生成代码这类事的，在github搜了下好像这个库又确实是JS里HTML解析库里排名第一的，于是就自己fork出来 一份，加了个选项来做boolean attributes 的区分。 在做WXML处理的时候，我犯了个错误，就是把处理WXML跟处理HTML这两件事等同起来了，可能之前做过一些HTML相关的处理工作，所以写着写着就很顺地按着原来用正则表达式处理的方式去做了，结果发现在处理节点属性为{{xxx}}的动态属性时总是有edge case处理不到。中间隔了两天去做其他需求后再回来一想，这{{xxx}}里的xxx就是JS代码啊，直接用babel不就完事了吗？困在原来处理HTML的思路里调试了大半天浪费时间。正确的处理WXML的方式就是用htmlparser解析静态文本，解析到的{{xxx}}语法交给babel处理，最后再重新合成WXML代码。这里面还有属性的单双引号处理、uincode与汉字的一些处理等细节，具体就不展开了，代码里都有： function buildWXML(root) { if (Array.isArray(root)) { let xmlString = '' root.forEach(node => { xmlString += buildWXML(node) }) return xmlString } else if (root.type === 'text') { const text = root.data return processMinaTemplateText(text) } else if (root.type === 'tag') { const tagName = root.name.replace('wx-', '') let tagString = `<${tagName}` const attr = root.attribs || {} Object.keys(attr).forEach(key => { if (attr[key] === null) { tagString += ` ${key}` } else { const attrValue = processMinaTemplateText(attr[key], { isAttrValue: true }) tagString += ` ${key}="${attrValue}"` } }) const children = root.children || [] if (isSelfCloseTag(tagName) && children.length === 0) { tagString += '/>' } else { tagString += '>' children.forEach(node => { tagString += buildWXML(node) }) tagString += `</${tagName}>` } return tagString } else if (root.type === 'comment') { return `<!--${root.data}-->` } else { return '' } } function processMinaTemplateText(text, options = {}) { const textArray = text.split(/({{[^}]*}})/g) let returnText = '' textArray.forEach(item => { if (item.startsWith('{{') && item.endsWith('}}')) { let expression = item.substring(2, item.length - 2) returnText += '{{' + processMinaTemplateExpression(expression) + '}}' } else { returnText += processPlainText(item) } }) return returnText } function processMinaTemplateExpression(code) { const visitor = { StringLiteral(path) { const parentPath = path.parent if (t.isCallExpression(parentPath)) { const callee = parentPath.callee if (t.isIdentifier(callee) && callee.name === MINA_I18N_FUNCTION_NAME) { return } } const reg = /\s*[\u4E00-\u9FA5]+\s*/g const stringValue = path.node.value if (reg.test(stringValue)) { path.replaceWith(t.CallExpression( t.identifier(MINA_I18N_FUNCTION_NAME), [t.stringLiteral(stringValue), t.identifier(MINA_I18N_LANG_NAME)] )) createI18NData(stringValue) } } } try { const result = babel.transform(code, { plugins: [ { visitor } ], generatorOpts: { quotes: 'single', compact: false } }) const i18nScriptContent = transformText(toSingleQuotes(result.code)) return i18nScriptContent.replace(/[\r\n]+$/g, '').replace(/^;/g, '').replace(/;$/g, '') } catch (e) { console.log(`parser expression : ${code}, error: ${JSON.stringify(e)}`) return code } } 翻译：一开始做这个工具的目的，就是要做到一键转换后就可以在微信开发者工具里跑起来。经过上面两步的处理，我们已经把项目里出现过的所有中文字符串都提取并替换，接下来我们就要实现 i18n 翻译函数。 最简单的是简体和繁体的转换，因为已经有 opencc 这个优秀的开源库可以处理 。 const OpenCC = require('opencc') const opencc = new OpenCC() const hant_text = opencc.convertSync(text) 中英文的翻译没法离线，只能找线上服务。在找了google，有道，金山，必应，百度等翻译服务后，发现微软的必应是最方便的，不需要申请token或者去对抗防爬虫，翻译效果也不错，非常适合用在一个可以无条件使用的工具里，接口调用非常简洁： request.post({ url: 'https://cn.bing.com/ttranslatev3', form: { fromLang: 'zh-Hans', to: 'en', text: text }, json: true, timeout: 2000 }).then(res => { return res[0].translations[0].text }) 绝大多数中文项目的i18n做到繁体+英文就够了，外贸项目等特殊情况的话，改一下调用bing API的语言参数就行，bing支持多种语言翻译。 至此，工具也算基本完成了，使用了自己小程序和github上找的几个开源小程序项目做测试，基本都是一键转换后就能直接在开发者工具上跑的，真机预览也没出问题。有兴趣的同学可以在自己项目的小程序上跑跑看。我看了下日常使用的各个小程序，可以说几乎100%都是没有提供切换语言选项的，万一以后有需求的话，希望这个工具可以方便到大家。 对源码有兴趣的同学可以到 github 看一下，如果转换的小程序跑起来有错误的话也欢迎提issue，我会尽快解决的。

[图片] 这次分享下“发帖功能”，这个功能其实风险蛮大的，特别是对一些敏感言论的控制，如果没有做好可能导致小程序被封，所以除了必要的人工审核和巡查以外，我们需要一些微信安全监测API的帮忙，在AI加持下，现在很多大公司对内容和图片的效率大大提高了。 [图片] 这个DEMO仅是一个流程示例，由于涉及到云函数和“真”敏感图，这里就有文字图代替。 [图片] 发帖的功能只要理清思路，其实并不复杂，利用机器AI做内容审查是关键，直接关系到小程序的整体安全。 用户选择手机图库或拍照 [代码]let tempImg = 0; //代表已选择的图片 wx.chooseImage({ count: 3 - tempImg.length, //选择不超过3张照片,去掉当前已经选择的照片 sizeType: ['original', 'compressed'], //获取原图或者压缩图 sourceType: ['album', 'camera'], //获取图片来源 图库、拍照 success(res) { // tempFilePath可以作为img标签的src属性显示图片 let tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); //举例：这里可以size 来判断图片是否大于 1MB，方便后面内容检查 if (res.tempFiles[0] && res.tempFiles[0].size > 1024 * 1024) { console.log("图片大于1MB啦") } } }) [代码] 这里用到的方法是chooseImage，它可以设置让用户选择手机图片库和拍照获得，需要注意的是考虑到后面要用微信自带API做图片安全检查，图片大小不能超过1MB，所以需要设置sizeType为compressed。 内容检查（重点） 由于内容安全对于小程序运营至关重要，稍有不慎就容易导致小程序被封，所以在这块的校验除了常规人工检查外，我们还可以用到微信的内容安全API。 为什么用微信官方提供的API？ 主要有二点：有一定的免费额度，基于企鹅大厂的专业AI检查。 1、云函数+云调用 [图片] 目录结构 [代码]├─checkContent │ config.json //云调用的权限配置 │ index.js //云服务器node 入口文件 │ package-lock.json │ package.json // NPM包依赖 │ ... [代码] 为什么要强调这个？ 因为本人一开始在用云函数+云调用的时候，经常会出现各种不明BUG，很多都是因为目录里面少传文件，或者少配置。 云函数内容： [代码]const cloud = require('wx-server-sdk'); cloud.init(); exports.main = async (event, context) => { console.log(event.txt); const { value, txt } = event; try { let msgR = false; let imageR = false; //检查 文字内容是否违规 if (txt) { msgR = await cloud.openapi.security.msgSecCheck({ content: txt }) } //检查 图片内容是否违规 if (value) { imageR = await cloud.openapi.security.imgSecCheck({ media: { header: { 'Content-Type': 'application/octet-stream' }, contentType: 'image/png', value: Buffer.from(value) } }) } return { msgR, //内容检查返回值 imageR //图片检查返回值 }; } catch (err) { // 错误处理 // err.errCode !== 0 return err } } [代码] 这里主要用到security.msgSecCheck和security.imgSecCheck这2个微信开放云调用方法（需开发者工具版本 >= 1.02.1904090），以往我们还要在服务器上单独写个方法，现在变得十分的方便，直接在云函数中调用即可。 这里需要重点说2个点 图片security.imgSecCheck 方法只能接收buffer，所以需要把temp的临时图片转化为buffer的形式传过去，我们这里用到 getFileSystemManager 的方法。 如果目录文件中没有config.json，需要自己建一个，并且做一个授权的配置。 [代码]{ "permissions": { "openapi": [ "security.msgSecCheck", "security.imgSecCheck" ] } } [代码] 2、检查文字内容安全 [代码]wx.cloud.callFunction({ name: 'checkContent', data: { txt: "乐于分享，一起进步" }, success(_res) { console.log(_res) }, fail(_res) { console.log(_res) } }) //返回值参考 { "errMsg": "cloud.callFunction:ok", "result": { "msgR": { "errMsg": "openapi.security.msgSecCheck:ok", "errCode": 0 }, "imageR": false }, "requestID": "77952319-b2b4-11e9-bdc8-525400192d0e" } [代码] 应用场景举例： 用户个人资料违规文字检测； 媒体新闻类用户发表文章，评论内容检测； 游戏类用户编辑上传的素材(如答题类小游戏用户上传的问题及答案)检测等。 频率限制：单个 appId 调用上限为 4000 次/分钟，2,000,000 次/天* 通过wx.cloud.callFunction的方法调用checkContent的云函数，检查一段文本是否含有违法违规内容。 3、检查图片内容安全 [代码]//获取 temp临时图片文件的 buffer wx.getFileSystemManager().readFile({ filePath: tempImg[0], //这里做示例，所以就选取第一张图片 success: buffer => { console.log(buffer.data) //这里是 云函数调用方法 wx.cloud.callFunction({ name: 'checkContent', data: { value: buffer.data }, success(json) { console.log(json.result.imageR) if (json.result.imageR.errCode == 87014) { wx.showToast({ title: '图片含有违法违规内容', icon: 'none' }); console.log("bad") } else { //图片正常 } } }) } }) //返回值参考 { "errMsg": "cloud.callFunction:ok", "result": { "msgR": false, "imageR": { "errMsg": "openapi.security.imgSecCheck:ok", "errCode": 0 } }, "requestID": "c126353c2d-b40b-11e9-81c4d-525400235f2a" } [代码] 应用场景举例： 图片智能鉴黄：涉及拍照的工具类应用(如美拍，识图类应用)用户拍照上传检测；电商类商品上架图片检测；媒体类用户文章里的图片检测等； 敏感人脸识别：用户头像；媒体类用户文章里的图片检测；社交类用户上传的图片检测等。 频率限制：单个 appId 调用上限为 2000 次/分钟，200,000 次/天*（图片大小限制：1M） 这里先要用 getFileSystemManager() 获取临时图片的buffer（这个是重点），然后再通过wx.cloud.callFunction的方法调用 checkContent的云函数中security.imgSecCheck的方法，校验一张图片是否含有违法违规内容。 一开始本人调试的时候，也遇到无法上传的问题，必须通过文件管理(getFileSystemManager)获取buffer后才能上传检查图片，耗费了本人不少debugger时间。 完整代码 原本想做个实际的demo（代码片段）分享给大家打开参考的，但是云函数必须是一个已注册的APPID，无奈只能贴代码。 这里主要还是提供一个整体思路，希望能帮助大家减少开发成本，更好的解决问题和完成任务 ^_^ html部分： [代码]<!-- pages/post /index.wxml --> <view class="wrap"> <view class="title"> <input placeholder="智酷方程式，乐于分享" maxlength="30" bindinput="getTitle"/> </view> <view class="content"> <textarea auto-focus="true" maxlength="200" bindinput="textareaCtrl" placeholder-style="color:#999;" placeholder="关注公众号，一起学习，一起进步" /> <view class='fontNum'>{{content.length}}/200</view> </view> <view class="chooseImg"> <block wx:for="{{tempImg}}" wx:for-item="item" wx:key="ids" wx:for-index="index"> <view class="chooseImgBox"> <image src="{{item}}" /> <view data-index="{{index}}" catch:tap="removeImg" class="removeImg"></view> </view> </block> <!-- 判断图片 大于等于3张的时候 取消 更多 --> <block wx:if="{{tempImg.length < 3}}"> <view class="chooseImgBoxMore" catch:tap="choosePhoto"> <view class="arrow"></view> </view> </block> </view> <view class='submit' catch:tap="submitPost"> <view class='blue'>提交</view> <view>取消</view> </view> </view> [代码] JS部分： [代码]Page({ /** * 页面的初始数据 */ data: { titleDetail: "", //帖子title内容 content: "", //发帖内容 tempImg: [], //选择图片的缩略图，临时地址 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.cloud.init(); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 检测输入字数 * @param {object} e */ textareaCtrl: function (e) { if (e.detail.value) { this.setData({ content: e.detail.value }) } else { this.setData({ content: "" }) } }, /** * 选择图片 */ choosePhoto() { let self = this; let tempImg = self.data.tempImg; if (tempImg.length > 2) { return; } wx.chooseImage({ count: 3 - tempImg.length, //选择不超过3张照片,去掉当前已经选择的照片 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { console.log(res); // tempFilePath可以作为img标签的src属性显示图片 let tempFilePaths = res.tempFilePaths; tempImg = tempImg.concat(tempFilePaths); console.log(tempImg); self.setData({ tempImg }) wx.getFileSystemManager().readFile({ filePath: tempImg[0], success: buffer => { console.log(buffer.data) wx.cloud.callFunction({ name: 'checkContent', data: { value: buffer.data }, success(json) { console.log(JSON.stringify(json)) console.log(json.result.imageR) if (json.result.imageR.errCode == 87014) { wx.showToast({ title: '图片含有违法违规内容', icon: 'none' }); console.log("bad") } else { //图片正常 } } }) } }) }, fail: err => { console.log(err) } }) }, /** * 删除照片 */ removeImg(e) { let self = this; let index = e.currentTarget.dataset.index; console.log(e); let tempImg = self.data.tempImg; tempImg.splice(index, 1); self.setData({ tempImg }) }, /** * 发贴 */ submitPost(e) { let { titleDetail, content } = this.data; wx.cloud.callFunction({ name: 'checkContent', data: { txt: content }, success(_res) { console.log(JSON.stringify(_res)) wx.navigateTo({ url: "/pages/postimg/result" }) }, fail(_res) { console.log(_res) } }) } }) [代码] 往期回顾： [打怪升级]小程序评论回复和发贴组件实战（一） [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二） [填坑手册]小程序目录结构和component组件使用心得

[图片] 在学习成长的过程中，常常会遇到一些自己从未接触的事物，这就好比是打怪升级，每次打倒一只怪，都会获得经验，让自己进步强大。特别是我们这些做技术的，逆水行舟不进则退。下面分享下小程序开发中的打怪升级经历~ [图片] 先来看下实际效果图，小程序开发中有时会要做一些的功能复杂的组件，比如评论回复和发帖功能等，这次主要讲的是关于评论模块的一些思路和实战中的经验，希望能抛砖引玉，给大家一些启发，一同成长~ [代码片段]评论回复组件实战demo demo的微信路径： https://developers.weixin.qq.com/s/oHs5cMma7N9W demo的ID：oHs5cMma7N9W 如果你装了IDE工具，可以直接访问上面的demo路径 通过代码片段将demo的ID输入进去也可添加： [图片] [图片] [图片] 根据这个demo.gif，本人做了一个简单的流程图，帮助大家理解。下面罗列一些开发中需要“打的怪”： 1、组件目录结构 [代码]├─components ---小程序自定义组件 │ ├─plugins --- （重点）可独立运行的大型模块，可以打包成plugins │ │ ├─comment ---评论模块 │ │ │ │ index.js │ │ │ │ index.json │ │ │ │ index.wxml │ │ │ │ index.wxss │ │ │ │ services.js ---（重点）用来处理和清洗数据的service.js，配套模板和插件 │ └─submit ---评论模块子模块：提交评论 index.js index.json index.wxml index.wxss [代码] 为什么要单独做个评论页面页面（submit）？ 因为如果是当前页面最下面input输入的形式，会出现一些兼容问题，比如： 不同手机的虚拟键盘高度不同，不好绝对定位和完全适配 弹窗输入框过小输入不方便，如果是大的textare时，容易误触下面评论的交。 注：目录结构，仅供参考。 2、NODE端API接口返回结构和页面结构 [代码]//node：API接口返回 { "data": { "commentTotal": 40, "comments": [ { "contentText": "喜欢就关注我", //评论内容 "createTime": 1560158823647, //评论时间 "displayName": "智酷方程式", //用户名 "headPortrait": "https://blz.nosdn.127.net/1/weixin/zxts.jpg", //用户头像 "id": "46e0fb0066666666", //评论ID 用于回复和举报 "likeTotal": 2, //点赞数 "replyContents": [ //回复评论 { "contentText": "@智酷方程式 喜欢就回复我", //回复评论内容 "createTime": 1560158986524, //回复时间 "displayName": "神秘的前端开发", //回复的用户名 "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg", //回复的用户头像 "id": "46e0fb00111111111", //回复评论的ID "likeTotal": 2, //回复评论的点赞数 "replyContents": [], //回复的回复 盖楼 "replyId": "46e0fb001ec222222222", //回复评论的独立ID，用于统计 }, { "contentText": "@智酷方程式： 威武，学习学习", "createTime": 1560407232814, "displayName": "神秘的前端开发", "headPortrait": "https://blz.nosdn.127.net/1/2018cosplay/fourth/tesss.jpg", "id": "46e0fb00111111111", "likeTotal": 0, "replyContents": [], "replyId": "46e0fb001ec222222222", } ], "replyId": "", "topicId": "46e0fb001ec3333333", } ], "curPage": 1, //当前页面 //通过ID 判断 当前用户点赞了 哪些评论 "likes": [ "46e0fb00111111111", "46e0fb001ec222222222", "46e0fb0066666666", ], "nextPage": null, //下一页 "pageSize": 20, //一页总共多少评论 "total": 7, //总共多少页面 }, "msg": "success", "status": "success" } [代码] [代码]<!-- HTML 部分 --> <block wx:if="{{commentList.length>0}}"> <!-- 评论模块 --> <block wx:for="{{commentList}}" wx:for-item="item" wx:for-index="index" wx:key="idx"> <view class="commentItem" catchtap="_goToReply" data-contentid="{{item.id}}" data-replyid="{{item.id}}" data-battle-tag="{{item.displayName}}"> <view class="titleWrap"> <image class="logo" src="{{item.headPortrait||'默认图'}}"></image> <view class="authorWrap"> <view class="author">{{item.displayName}}</view> <view class="time">{{item.createTime}}</view> </view> <view class="starWrap" catchtap="_clickLike" data-index="{{index}}" data-like="{{item.like}}" data-contentid="{{item.id}}" data-topicid="{{item.topicId}}"> <text class="count">{{item.likeTotal||""}}</text> <view class="workSprite icon {{item.like?'starIconHasClick':'starIcon'}}"></view> </view> </view> <view class="text"> {{item.contentText}} </view> </view> <!-- 评论的评论 --> <block wx:for="{{item.replyContents}}" wx:for-item="itemReply" wx:for-index="indexReply" wx:key="idxReply"> <view class="commentItem commentItemReply" catchtap="_goToReply" data-contentid="{{itemReply.id}}" data-replyid="{{item.id}}" data-battle-tag="{{itemReply.displayName}}"> ... 和上面类似 </view> </block> </block> <!-- 加载更多loading --> <block wx:if="{{isOver}}"> <view class="more">评论加载完成</view> </block> </block> [代码] 通过node提供一个API接口，通过用户的openId来判断是否点赞，这里提供一个参考的JSON结构。 JSON尽量做成array循环的结构方便渲染，根据ID来BAN人和管理。底部加上加载更多的效果，同时，记得做一些兼容，比如默认头像等。 3、评论中的一些微信原生交互 这里建议很多交互如果不是必须要特别定制，可以才用微信原生的组件，效果和兼容性都有保障，而且方便简单。 对评论进行回复/举报 [代码]<!-- HTML部分 通过绑定事件：_goToReply 进行交互--> <view class="commentItem" catchtap="_goToReply" data-contentid="{{item.id}}" data-replyid="{{item.id}}" data-battle-tag="{{item.displayName}}"> ... 内部省略 </view> [代码] [代码]//JS部分 微信原生wx.showActionSheet 显示操作菜单交互 _goToReply(e) { // 上面的各种授权判断省略... let self = this; wx.showActionSheet({ itemList: ['回复', '举报'], success: function (res) { if (!res.cancel) { console.log(res.tapIndex); //前往评论 if (res.tapIndex == 0) { //判断是否是 评论的评论 self._goToComment(replyid); } //举报按钮 if (res.tapIndex == 1) { //弹出框 self.setComplain(contentid); } } else { //取消选择 } }, fail(res) { console.log(res.errMsg) } }); } //当选择“举报”的时候，二次调用 wx.showActionSheet 方法 setComplain(contentid){ let complainJson = ["敏感信息", "色情淫秽", "垃圾广告", "语言辱骂", "其它"]; wx.showActionSheet({ itemList: complainJson, success: async res => { if (!res.cancel) { //选择好后，提交举报 try { let complainResult = await request.postComplainReport(complainJson[index], openid, contentid); if (complainResult.msg == "success") { //提交成功后反馈 } else { } } catch (e) { console.log(e) } } } }); } [代码] 显示操作菜单 wx.showActionSheet 方法说明 属性 类型 说明 itemList Array.<string> 按钮的文字数组，数组长度最大为 6 itemColor string 按钮的文字颜色 success function 接口调用成功的回调函数 fail function 接口调用失败的回调函数 complete function 接口调用结束的回调函数（调用成功、失败都会执行） 使用这个方法，即是主流的做法，也能很好的兼容不同机型，同时给予用户“习惯性体验”。 原生评论排序切换 [图片] [代码]<!-- picker组件 html部分--> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> [代码] [代码]// js部分 Page({ data:{ //查看评论类型切换 array: ["最佳", "最新", "只看自己"], //选择数组中的第几个显示 index:0 }, bindPickerChange(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) } }) [代码] picker组件是一个从底部弹起的滚动选择器，这里我们用它来切换不同评论的排序。每次切换都可以通过 bindchange获得对应的变化，通过 e.detail.value获取用户选择的索引值。 官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 4、传参跳转写评论页 [代码]let uriData = { logo: "xxx.jpg", type: "commentReply", title: "文章：小程序评论，动态发帖开发指北\n 作者：智酷方程式", openId:"xxxxxxxxxxx", replyId:"aaaaaa" //用户回复的是哪个评论的ID }; wx.navigateTo({ url: `/components/plugins/comment/submit/index?uriData=${encodeURIComponent(JSON.stringify(uriData))}` }); [代码] 这个可以用encodeURIComponent的方式处理下参数中的中文，避免跳转发布评论页接收数据时出现乱码。 5、发表评论页 [图片] 显示和控制评论的字数 [代码]<!-- html部分 关于textarea 的配置 --> <view class='feedback-cont'> <textarea auto-focus="true" value="{{replyName}}" maxlength="200" bindinput="textareaCtrl" placeholder-style="color:#999;" placeholder="留下评论，共同学习，一起进步" /> <view class='fontNum'>{{content.length}}/200</view> </view> <view class='feedback-btn' bindtap='commentSubmit'>提交</view> [代码] [代码]// js部分 Page({ data: { //初始化评论内容，如果是回复则通过传参变成 @xxxx的形式 content: "@xxxx", }, textareaCtrl: function (e) { if (e.detail.value) { this.setData({ content: e.detail.value }) } else { this.setData({ content: "" }) } } }) [代码] textarea 在小程序中改动不大，这个标签原有的一些属性都可以继续使用，通过配置maxlength来控制字数，同时，设置auto-focus="true"可以让用户进到这个发表评论页面时自动弹出虚拟键盘和光标定位在输入的区域。 当然，也可以将发表评论和评论展示区域做在一起，这个就要考虑到要么通过“小程序API”获取键盘高度，要么将“发布评论”置顶区域显示，也是可以做的，只是相对考虑的点会多些。当时开发评论组件的时候，考虑开发时间短和用户体验，权衡后，最终决定以上方案，希望能给到大家一些参考和借鉴，在其他组件开发中触类旁通。 总结，“组件化思想”对于无论做小程序、react/VUE还是其他项目来说，减少重复开发，提高复用性都是一个非常重要的点。评论功能其实只要理清楚整体思路，做起来难度并不大，通过一些原生组件，可以大大提高开发效率，同时保证良好的兼容性。 后面一期还将分享下功能点较多的发帖组件开发。 往期回顾： [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二） [填坑手册]小程序目录结构和component组件使用心得

数据是无价的，我们通常会把重要的业务数据存放在数据库中，并需要对数据库做定时的自动备份工作，防止数据异常丢失，造成无法挽回的损失。 小程序云开发提供了方便的云数据库供我们直接使用，云开发使用了腾讯云提供的云数据库，拥有完善的数据保障机制，无需担心数据丢失。但是，我们还是不可避免的会担心数据库中数据的安全，比如不小心删除了数据集合，写入了脏数据等。 还好，云开发控制台提供了数据集合的导出，导入功能，我们可以手动备份数据库。不过，总是手动备份数据库也太麻烦了点，所有重复的事情都应该让代码去解决，下面我们就说说怎么搞定云开发数据库自动备份。 通过查阅微信的文档，可以发现云开发提供了数据导出接口databaseMigrateExport [代码]POST https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=ACCESS_TOKEN [代码] 通过这个接口，结合云函数的定时触发功能，我们就可以做数据库定时自动备份了。梳理一下大致的流程： 创建一个定时触发的云函数 云函数调用接口，导出数据库备份文件 将备份文件上传到云存储中以供使用 1. 获取 access_token 调用微信的接口需要 access_token，所以我们首先要获取 access_token。通过文档了解到使用 auth.getAccessToken 接口可以用小程序的 appid 和 secret 获取 access_token。 [代码]// 获取 access_token request.get( `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, (err, res, body) => { if (err) { // 处理错误 return; } const data = JSON.parse(body); // data.access_token } ); [代码] 2. 创建数据库导出任务 获取 access_token 后，就可以使用 [代码]databaseMigrateExport[代码] 接口导出数据进行备份。 [代码]databaseMigrateExport[代码] 接口会创建一个数据库导出任务，并返回一个 job_id，这个 job_id 怎么用我们下面再说。显然数据库的数据导出并不是同步的，而是需要一定时间的，数据量越大导出所要花费的时间就越多，个人实测，2W 条记录，2M 大小，导出大概需要 3~5 S。 调用 [代码]databaseMigrateExport[代码] 接口需要传入环境 Id，存储文件路径，导出文件类型（1 为 JSON，2 为 CSV），以及一个 query 查询语句。 因为我们是做数据库备份，所以这里就导出 JSON 类型的数据，兼容性更好。需要备份的数据可以用 query 来约束，这里还是很灵活的，既可以是整个集合的数据，也可以是指定的部分数据，这里我们就使用 [代码]db.collection('data').get()[代码] 备份 data 集合的全部数据。同时我们使用当前时间作为文件名，方便以后使用时查找。 [代码]request.post( `https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=${accessToken}`, { body: JSON.stringify({ env, file_path: `${date}.json`, file_type: '1', query: 'db.collection("data").get()' }) }, (err, res, body) => { if (err) { // 处理错误 return; } const data = JSON.parse(body); // data.job_id } ); [代码] 3. 查询任务状态，获取文件地址 在创建号数据库导出任务后，我们会得到一个 job_id，如果导出集合比较大，就会花费较长时间，这时我们可以使用 databaseMigrateQueryInfo 接口查询数据库导出的进度。 当导出完成后，会返回一个 [代码]file_url[代码]，即可以下载数据库导出文件的临时链接。 [代码]request.post( `https://api.weixin.qq.com/tcb/databasemigratequeryinfo?access_token=${accessToken}`, { body: JSON.stringify({ env, job_id: jobId }) }, (err, res, body) => { if (err) { reject(err); } const data = JSON.parse(body); // data.file_url } ); [代码] 获取到文件下载链接之后，我们可以将文件下载下来，存入到自己的云存储中，做备份使用。如果不需要长时间的保留备份，就可以不用下载文件，只需要将 job_id 存储起来，当需要恢复备份的时候，通过 job_id 查询到新的链接，下载数据恢复即可。 至于 job_id 存在哪，就看个人想法了，这里就选择存放在数据库里。 [代码]await db.collection('db_back_info').add({ data: { date: new Date(), jobId: job_id } }); [代码] 4. 函数定时触发器 云函数支持定时触发器，可以按照设定的时间自动执行。云开发的定时触发器采用的 [代码]Cron[代码] 表达式语法，最大精度可以做的秒级，详细的使用方法可以参考官方文档：定时触发器 | 微信开放文档 这里我们配置函数每天凌晨 2 点触发，这样就可以每天都对数据库进行备份。在云函数目录下新建 [代码]config.json[代码]文件，写入如下内容： [代码]{ "triggers": [ { "name": "dbTrigger", "type": "timer", "config": "0 0 2 * * * *" } ] } [代码] 完整代码 最后，贴出可以在云函数中使用的完整代码，只需要创建一个定时触发的云函数，并设置好相关的环境变量即可使用 appid secret backupColl：需要备份的集合名称，如 ‘data’ backupInfoColl：存储备份信息的集合名称，如 ‘db_back_info’ 注意，云函数的默认超时时间是 3 秒，创建备份函数时，建议将超时时间设定到最大值 20S，留有足够的时间查询任务结果。 [代码]/* eslint-disable */ const request = require('request'); const cloud = require('wx-server-sdk'); // 环境变量 const env = 'xxxx'; cloud.init({ env }); // 换取 access_token async function getAccessToken(appid, secret) { return new Promise((resolve, reject) => { request.get( `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, (err, res, body) => { if (err) { reject(err); return; } resolve(JSON.parse(body)); } ); }); } // 创建导出任务 async function createExportJob(accessToken, collection) { const date = new Date().toISOString(); return new Promise((resolve, reject) => { request.post( `https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=${accessToken}`, { body: JSON.stringify({ env, file_path: `${date}.json`, file_type: '1', query: `db.collection("${collection}").get()` }) }, (err, res, body) => { if (err) { reject(err); } resolve(JSON.parse(body)); } ); }); } // 查询导出任务状态 async function waitJobFinished(accessToken, jobId) { return new Promise((resolve, reject) => { // 轮训任务状态 const timer = setInterval(() => { request.post( `https://api.weixin.qq.com/tcb/databasemigratequeryinfo?access_token=${accessToken}`, { body: JSON.stringify({ env, job_id: jobId }) }, (err, res, body) => { if (err) { reject(err); } const { status, file_url } = JSON.parse(body); console.log('查询'); if (status === 'success') { clearInterval(timer); resolve(file_url); } } ); }, 500); }); } exports.main = async (event, context) => { // 从云函数环境变量中读取 appid 和 secret 以及数据集合 const { appid, secret, backupColl, backupInfoColl } = process.env; const db = cloud.database(); try { // 获取 access_token const { errmsg, access_token } = await getAccessToken(appid, secret); if (errmsg && errcode !== 0) { throw new Error(`获取 access_token 失败：${errmsg}` || '获取 access_token 为空'); } // 导出数据库 const { errmsg: jobErrMsg, errcode: jobErrCode, job_id } = await createExportJob(access_token, backupColl); // 打印到日志中 console.log(job_id); if (jobErrCode !== 0) { throw new Error(`创建数据库备份任务失败：${jobErrMsg}`); } // 将任务数据存入数据库 const res = await db.collection('db_back_info').add({ data: { date: new Date(), jobId: job_id } }); // 等待任务完成 const fileUrl = await waitJobFinished(access_token, job_id); console.log('导出成功', fileUrl); // 存储到数据库 await db .collection(backupInfoColl) .doc(res._id) .update({ data: { fileUrl } }); } catch (e) { throw new Error(`导出数据库异常：${e.message}`); } }; [代码]

话不多说直接看代码片段 https://developers.weixin.qq.com/s/ifebUum77haK 感觉好用点个赞

摘要： 理解小程序原理… 原文：浅谈小程序运行机制 作者：小白 Fundebug经授权转载，版权归原作者所有。 写作背景 接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的。“比如我在面试的时候问到一个关于小程序的问题，问小程序有window对象吗？他说有吧”，但其实是没有的。感觉他并没有了解小程序底层的一些东西，归根结底来说应该只能算会使用这个工具，但并不明白其中的道理。 小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯Vue，react开发的开发者会吐槽小程序新建页面的繁琐，page必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得setData、没有像Vue方便的watch监听、不能操作Dom，对于复杂性场景不太好，之前不支持npm，不支持sass，less预编译处理语言。 “有的人说小程序就像被阉割的Vue”，哈哈当然了，他们从设计的出发点就不同，咱也得理解小程序设计的初衷，通过它的使用场景，它为什么采用这种技术架构，这种技术架构有什么好处，相信在你了解完这些之后，就会理解了。下面我会从以下几个角度去分析小程序的运行机制和它的整体技术架构。 了解小程序的由来 在小程序没有出来之前，最初微信WebView逐渐成为移动web重要入口，微信发布了一整套网页开发工具包，称之为 JS-SDK，给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。 但JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题，比如受限于设备性能和网络速度，会出现白屏的可能。因此又设计了一个增强版JS-SDK，也就是“微信 Web 资源离线存储”，但在复杂的页面上依然会出现白屏的问题，原因表现在页面切换的生硬和点击的迟滞感。这个时候需要一个 JS-SDK 所处理不了的，使用户体验更好的一个系统，小程序应运而生。 快速的加载 更强大的能力 原生的体验 易用且安全的微信数据开放 高效和简单的开发 小程序与普通网页开发的区别 小程序的开发同普通的网页开发相比有很大的相似性，小程序的主要开发语言也是 JavaScript，但是二者还是有些差别的。 普通网页开发可以使用各种浏览器提供的 DOM API，进行 DOM 操作，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。 普通网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。 网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。 小程序的执行环境 [图片] 小程序架构 一、技术选型 一般来说，渲染界面的技术有三种： 用纯客户端原生技术来渲染 用纯 Web 技术来渲染 用客户端原生技术与 Web 技术结合的混合技术（简称 Hybrid 技术）来渲染 通过以下几个方面分析，小程序采用哪种技术方案 开发门槛：Web 门槛低，Native 也有像 RN 这样的框架支持 体验：Native 体验比 Web 要好太多，Hybrid 在一定程度上比 Web 接近原生体验 版本更新：Web 支持在线更新，Native 则需要打包到微信一起审核发布 管控和安全：Web 可跳转或是改变页面内容，存在一些不可控因素和安全风险 由于小程序的宿主环境是微信，如果用纯客户端原生技术来编写小程序，那么小程序代码每次都需要与微信代码一起发版，这种方式肯定是不行的。 所以需要像web技术那样，有一份随时可更新的资源包放在云端，通过下载到本地，动态执行后即可渲染出界面。如果用纯web技术来渲染小程序，在一些复杂的交互上可能会面临一些性能问题，这是因为在web技术中，UI渲染跟JavaScript的脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占UI渲染的资源。 所以最终采用了两者结合起来的Hybrid 技术来渲染小程序，可以用一种近似web的方式来开发，并且可以实现在线更新代码，同时引入组件也有以下好处： 扩展 Web 的能力。比如像输入框组件（input, textarea）有更好地控制键盘的能力 体验更好，同时也减轻 WebView 的渲染工作 绕过 setData、数据通信和重渲染流程，使渲染性能更好 用客户端原生渲染内置一些复杂组件，可以提供更好的性能 二、双线程模型 小程序的渲染层和逻辑层分别由 2 个线程管理：视图层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS脚本。 [图片] [图片] 那么为什么要这样设计呢，前面也提到了管控和安全，为了解决这些问题，我们需要阻止开发者使用一些，例如浏览器的window对象，跳转页面、操作DOM、动态执行脚本的开放性接口。 我们可以使用客户端系统的 JavaScript 引擎，iOS 下的 JavaScriptCore 框架，安卓下腾讯 x5 内核提供的 JsCore 环境。 这个沙箱环境只提供纯 JavaScript 的解释执行环境，没有任何浏览器相关接口。 这就是小程序双线程模型的由来： 逻辑层：创建一个单独的线程去执行 JavaScript，在这里执行的都是有关小程序业务逻辑的代码，负责逻辑处理、数据请求、接口调用等 视图层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以视图层存在多个 WebView 线程 JSBridge 起到架起上层开发与Native（系统层）的桥梁，使得小程序可通过API使用原生的功能，且部分组件为原生组件实现，从而有良好体验 三、双线程通信 把开发者的 JS 逻辑代码放到单独的线程去运行，但在 Webview 线程里，开发者就没法直接操作 DOM。 那要怎么去实现动态更改界面呢？ 如上图所示，逻辑层和试图层的通信会由 Native （微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发。 这也就是说，我们可以把 DOM 的更新通过简单的数据通信来实现。 Virtual DOM 相信大家都已有了解，大概是这么个过程：用 JS 对象模拟 DOM 树 -> 比较两棵虚拟 DOM 树的差异 -> 把差异应用到真正的 DOM 树上。 如图所示： [图片] 1. 在渲染层把 WXML 转化成对应的 JS 对象。 2. 在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层。 3. 经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面。 我们通过把 WXML 转化为数据，通过 Native 进行转发，来实现逻辑层和渲染层的交互和通信。 而这样一个完整的框架，离不开小程序的基础库。 四、小程序的基础库 小程序的基础库可以被注入到视图层和逻辑层运行，主要用于以下几个方面： 在视图层，提供各类组件来组建界面的元素 在逻辑层，提供各类 API 来处理各种逻辑 处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑 由于小程序的渲染层和逻辑层是两个线程管理，两个线程各自注入了基础库。 小程序的基础库不会被打包在某个小程序的代码包里边，它会被提前内置在微信客户端。 这样可以： 降低业务小程序的代码包大小 可以单独修复基础库中的 Bug，无需修改到业务小程序的代码包 五、Exparser 框架 Exparser是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。小程序内的所有组件，包括内置组件和自定义组件，都由Exparser组织管理。 Exparser的主要特点包括以下几点： 基于Shadow DOM模型：模型上与WebComponents的ShadowDOM高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他API以支持小程序组件编程。 可在纯JS环境中运行：这意味着逻辑层也具有一定的组件树组织能力。 高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。 小程序中，所有节点树相关的操作都依赖于Exparser，包括WXML到页面最终节点树的构建、createSelectorQuery调用和自定义组件特性等。 内置组件 基于Exparser框架，小程序内置了一套组件，提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。有了这么丰富的组件，再配合WXSS，可以搭建出任何效果的界面。在功能层面上，也满足绝大部分需求。 六、运行机制 小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台状态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。 小程序没有重启的概念 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁 当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁 [图片] 七、更新机制 小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。 八、性能优化 主要的优化策略可以归纳为三点： 精简代码，降低WXML结构和JS代码的复杂性； 合理使用setData调用，减少setData次数和数据量； 必要时使用分包优化。 1、setData 工作原理 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。 而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。 2、常见的 setData 操作错误 频繁的去 setData在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：Android下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时； 每次 setData 都传递大量新数据由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程， 后台态页面进行 setData当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。 总结 大致从以上几个角度分析了小程序的底层架构，从小程序的由来、到双线程的出现、设计、通信、到基础库、Exparser 框架、再到运行机制、性能优化等等，都是一个个相关而又相互影响的选择。关于小程序的底层框架设计，其实涉及到的还有很多，比如自定义组件，原生组件、性能优化等方面，都不是一点能讲完的，还要多看源码，多思考。每一个框架的诞生都有其意义，我们作为开发者能做的不只是会使用这个工具，还应理解它的设计模式。只有这样才不会被工具左右，才能走的更远！

前言: 看完此文后， 可以在 github上新建一个 仓库，之后新建一个小程序项目，上传到github的仓库. 一.git基本功能 讲解 拉取: 获得服务器 指定分支代码 到本地的 head分支(当前分支) 抓取：获取服务器分支的 最新修改，不会合并入本地 推送：将本地分支 推送到服务器指定分支 分支： 基于某个本地分支 创建 新分支 合并：将本地的两个分支 进行合并 用于代码提交 就是讲 某个分支 合并到 当前分支(head标识的分支) 分支理解:每个人开发 的 都是自己的 分支，可以是远程的分支，也可以是本地的分支.本地开发完 合并到 主分支就行了. 二.现有项目代码上传到git. 1.打开现有项目. 2.点击版本管理 ->设置->远程->添加 添加你的git地址. 3.抓取->抓取全部 4.点击远程分支-> 查看嵌入记录 ->右键 从提交 新建分支.分支名称你随意 如果 没有 记录 就可以自己新建一个 分支. 5.之后你就可以推送了. [图片] [图片] 三.推荐使用分支的 标准 每个项目做一个远程dev分支，用于主开发分支.代码同步 开发人员获取 远程dev分支，新建本地dev分支. 基于本地dev分支 新建 本地 开发者 分支. 代码获取: 在本地dev分支 获取远程dev分支的变更，之后 merge 本地dev到 本地开发人员的 本地分支上. 代码嵌入，合并:在本地开发人员分支 变更后，嵌入本地开发人员分支. 之后 切换到本地dev分支，在本地dev分支上 拉取远程dev的最新分支代码. 5.1 将开发人员分支 合并到 本地dev分支，之后推送 到远程dev分支，达到代码嵌入的目的. 四.常见问题. [图片] 这个是你 推送之前 没commit导致的. [图片] 2.这个是 你本地 没有 此分支的 head，你在你想要拉取的 远程分支 的 最新嵌入记录上 右键，获取head，就可以了，相当于重置了 head.重置head方法如下: [图片] 3.拉取远程分支可以 点拉取按钮，也可以如下图. [图片] 4.git 仓库的验证方式 还需要你们自己去选择，因为 仓库的 验证 都是 仓库那边决定的. 在 设置->网络和认证 中 设置. [图片]

源码地址：https://github.com/qiushi123/diancan 后台技术选型： JDK8 MySQL Spring-boot Spring-data-jpa Lombok Freemarker Bootstrap Websocket 小程序端技术选型 微信小程序 老规矩先看效果图 管理后台 [图片] [图片] 小程序下单完成后会有消息推送，如下 [图片] 可以直接操作订单 [图片] 小程序端 [图片] 如上图，目前实现了如下功能。 扫码点餐 菜品分类显示 模拟支付 评论系统 下面说下使用流程 一，找老师索要源码，或者到老师微信公号回复“点餐小程序”获取源码 老师微信：2501902696 老师公号： [图片] 二，导入java代码 1，我的java开发工具是IntelliJ IDEA，最好和我保持一致 2，如果你不知道如何导入java源码到idea，可以看下下面视频教程。 https://edu.csdn.net/course/play/23443/265597 三，创建数据表格 导入源码成功后，执行下图的sql语句，建表 [图片] 我是用IntelliJ IDEA自带的建表工具进行快速建表和管理表的 [图片] 如果你想用idea自带的管理工具，可以看下面这个视频： https://edu.csdn.net/course/play/23443/268165 四，修改配置 只需要把mysql数据库的账号和密码改成你的就行了。 [图片] 五，在seller_info表里创建一个管理员用于登录管理后台 [图片] #小程序代码 一，导入源码到小程序开发工具 [图片] 你如果没有小程序开发基础，只需要看下这个视频学习下如何导入小程序源码到开发者工具即可 https://edu.csdn.net/course/play/9531/234418 二，导入成功后直接就可以用了 如果你想用扫码点餐，就把下面注释打开 [图片] [图片] 三，如果要扫码点餐的话，就扫码下面二维码。识别桌号 [图片] 到这里我们java后台+点餐小程序实现就可以了。 如果导入代码中有任何问题可以加我微信：2501902696（备注编程） [图片]

前言 最近一年多一直在做前端的一些测试，从小程序到店铺装修，基本都是纯前端的工作，刚开始从后端测试转为前端测试的时候，对前端东西茫然无感，而且团队内没有人做过纯前端的测试工作，只能一边踩坑一边总结经验，然后将容易出现问题的点形成体系、不断总结摸索，最终形成了目前的一套前端测试解决方案。在此，将有赞的前端质量保障体系进行总结，希望和大家一起交流。 先来全局看下有赞前端的技术架构和针对每个不同的层次，主要做了哪些保障质量的事情： [图片] [图片] 有赞的 Node 技术架构分为业务层、基础框架层、通用组件和基础服务层，我们日常比较关注的是基础框架、通用组件和业务层代码。Node 业务层做了两件事情，一是提供页面渲染的 client 层，用于和 C 端用户交互，包括样式、行为 js 等；二是提供数据服务的 server 层，用于组装后台提供的各种接口，完成面向 C 端的接口封装。 对于每个不同的层，我们都做了一些事情来保障质量，包括： 针对整个业务层的 UI 自动化、核心接口|页面拨测； 针对 client 层的 sentry 报警； 针对 server 层的接口测试、业务报警； 针对基础框架和通用组件的单元测试； 针对通用组件变更的版本变更报警； 针对线上发布的流程规范、用例维护等。 下面就来分别讲一下这几个维度的质量保障工作。 一、UI 自动化 很多人会认为，UI 自动化维护成本高、性价比低，但是为什么在有赞的前端质量保证体系中放在了最前面呢？ 前端重用户交互，单纯的接口测试、单元测试不能真实反映用户的操作路径，并且从以往的经验中总结得出，因为各种不可控因素导致的发布 A 功能而 B 功能无法使用，特别是核心简单场景的不可用时有出现，所以每次发布一个应用前，都会将此应用提供的核心功能执行一遍，那随着业务的不断积累，需要回归的测试场景也越来越多，导致回归的工作量巨大。为了降低人力成本，我们亟需通过自动化手段释放劳动力，所以将核心流程回归的 UI 自动化提到了最核心地位。 当然，UI 自动化的最大痛点确实是维护成本，为降低维护成本，我们将页面分为组件维度、页面维度，并提供统一的包来处理公用组件、特殊页面的通用逻辑，封装通用方法等，例如初始化浏览器信息、环境选择、登录、多网点切换、点击、输入、获取元素内容等等，业务回归用例只需要关注自己的用例操作步骤即可。 1、框架选择 – puppeteer[1]，它是由 Chrome 维护的 Node 库，基于 DevTools 协议来驱动 chrome 或者 chromium 浏览器运行，支持 headless 和 non-headless 两种方式。官网提供了非常丰富的文档，简单易学。 UI 自动化框架有很多种，包括 selenium、phantom；对比后发现 puppeteer 比较轻量，只需要增加一个 npm 包即可使用；它是基于事件驱动的方式，比 selenium 的等待轮询更稳当、性能更佳；另外，它是 chrome 原生支持，能提供所有 chrome 支持的 api，同时我们的业务场景只需要覆盖 chrome，所以它是最好的选择。 – mocha[2] + mochawesome[3]，mocha 是比较主流的测试框架，支持 beforeEach、before、afterEach、after 等钩子函数，assert 断言，测试套件，用例编排等。 mochawesome 是 mocha 测试框架的第三方插件，支持生成漂亮的 html/css 报告。 js 测试框架同样有很多可以选择，mocha、ava、Jtest 等等，选择 mocha 是因为它更灵活，很多配置可以结合第三方库，比如 report 就是结合了 mochawesome 来生成好看的 html 报告；断言可以用 powser-assert 替代。 2、脚本编写 封装基础库 封装 pc 端、h5 端浏览器的初始化过程 封装 pc 端、h5 端登录统一处理 封装页面模型和组件模型 封装上传组件、日期组件、select 组件等的统一操作方法 封装 input、click、hover、tap、scrollTo、hover、isElementShow、isElementExist、getElementVariable 等方法 提供根据 “html 标签>>页面文字” 形式获取页面元素及操作方法的统一支持 封装 baseTest，增加用例开始、结束后的统一操作 封装 assert，增加断言日志记录 业务用例 安装基础库 编排业务用例 3、执行逻辑 分环境执行 增加预上线环境代码变更触发、线上环境自动执行 监控源码变更 增加 gitlab webhook，监控开发源码合并 master 时自动在预上线环境执行 增加 gitlab webhook，监控测试用例变更时自动在生产环境执行 每日定时执行 增加 crontab，每日定时执行线上环境 [图片] [图片] [图片] [图片] 二、接口测试 接口测试主要针对于 Node 的 server 层，根据我们的开发规范，Node 不做复杂的业务逻辑，但是需要将服务化应用提供 dubbo 接口进行一次转换，或将多个 dubbo 接口组合起来，提供一个可供 h5/小程序渲染数据的 http 接口，转化过程就带来了各种数据的获取、组合、转换，形成了新的端到端接口。这个时候单单靠服务化接口的自动化已经不能保障对上层接口的全覆盖，所以我们针对 Node 接口也进行自动化测试。为了使用测试内部统一的测试框架，我们通过 java 去请求 Node 提供的 http 接口，那么当用例都写好之后，该如何评判接口测试的质量？是否完全覆盖了全部业务逻辑呢？此时就需要一个行之有效的方法来获取到测试的覆盖情况，以检查有哪些场景是接口测试中未覆盖的，做到更好的查漏补缺。 – istanbul[4] 是业界比较易用的 js 覆盖率工具，它利用模块加载的钩子计算语句、行、方法和分支覆盖率，以便在执行测试用例时透明的增加覆盖率。它支持所有类型的 js 覆盖率，包括单元测试、服务端功能测试以及浏览器测试。 但是，我们的接口用例写在 Java 代码中，通过 Http 请求的方式到达 Node 服务器，非 js 单测，也非浏览器功能测试，如何才能获取到 Node 接口的覆盖率呢？ 解决办法是增加 cover 参数：–handle-sigint，通过增加 --handle-sigint 参数启动服务，当服务接收到一个 SIGINT 信号（linux 中 SIGINT 关联了 Ctrl+C），会通知 istanbul 生成覆盖率。这个命令非常适合我们，并且因此形成了我们接口覆盖率的一个模型： [代码]1. istanbule --handle-sigint 启动服务 2. 执行测试用例 3. 发送 SIGINT结束istanbule，得到覆盖率 [代码] 最终，解决了我们的 Node 接口覆盖率问题，并通过 jenkins 持续集成来自动构建 [图片] [图片] [图片] 当然，在获取覆盖率的时候有需求文件是不需要统计的，可以通过在根路径下增加 .istanbule.yml 文件的方式，来排除或者指定需要统计覆盖率的文件 [代码]verbose: false instrumentation: root: . extensions: - .js default-excludes: true excludes:['**/common/**','**/app/constants/**','**/lib/**'] embed-source: false variable: __coverage__ compact: true preserve-comments: false complete-copy: false save-baseline: false baseline-file: ./coverage/coverage-baseline.json include-all-sources: false include-pid: false es-modules: false reporting: print: summary reports: - lcov dir: ./coverage watermarks: statements: [50, 80] lines: [50, 80] functions: [50, 80] branches: [50, 80] report-config: clover: {file: clover.xml} cobertura: {file: cobertura-coverage.xml} json: {file: coverage-final.json} json-summary: {file: coverage-summary.json} lcovonly: {file: lcov.info} teamcity: {file: null, blockName: Code Coverage Summary} text: {file: null, maxCols: 0} text-lcov: {file: lcov.info} text-summary: {file: null} hooks: hook-run-in-context: false post-require-hook: null handle-sigint: false check: global: statements: 0 lines: 0 branches: 0 functions: 0 excludes: [] each: statements: 0 lines: 0 branches: 0 functions: 0 excludes: [] [代码] 三、单元测试 单元测试在测试分层中处于金字塔最底层的位置，单元测试做的比较到位的情况下，能过滤掉大部分的问题，并且提早发现 bug，也可以降低 bug 成本。推行一段时间的单测后发现，在有赞的 Node 框架中，业务层的 server 端只做接口组装，client 端面向浏览器，都不太适合做单元测试，所以我们只针对基础框架和通用组件进行单测，保障基础服务可以通过单测排除大部分的问题。比如基础框架中店铺通用信息服务，单测检查店铺信息获取；比如页面级商品组件，单测检查商品组件渲染的 html 是否和原来一致。 单测方案试行了两个框架： Jest[5] ava[6] 比较推荐的是 Jest 方案，它支持 Matchers 方式断言；支持 Snapshot Testing，可测试组件类代码渲染的 html 是否正确；支持多种 mock，包括 mock 方法实现、mock 定时器、mock 依赖的 module 等；支持 istanbule，可以方便的获取覆盖率。 总之，前端的单测方案也越来越成熟，需要前端开发人员更加关注 js 单测，将 bug 扼杀在摇篮中。 四、基础库变更报警 上面我们已经对基础服务和基础组件进行了单元测试，但是单测也不能完全保证基础库的变更完全没有问题，伴随着业务层引入新版本的基础库，bug 会进一步带入到业务层，最终影响 C 端用户的正常使用。那如何保障每次业务层引入新版本的基础库之后能做到全面的回归？如何让业务测试同学对基础库变更更加敏感呢？针对这种情况，我们着手做了一个基础库版本变更的小工具。实现思路如下： [代码]1. 对比一次 master 代码的提交或 merge 请求，判断 package.json 中是否有特定基础库版本变更 2. 将对应基础库的前后两个版本的代码对比发送到测试负责人 3. 根据 changelog 判断此次回归的用例范围 4. 增加 gitlab webhook，只有合并到合并发布分支或者 master 分支的代码才触发检查 [代码] 这个小工具的引入能及时通知测试人员针对什么需求改动了基础组件，以及这次基础组件的升级主要影响了哪些方面，这样能避免相对黑盒的测试。 第一版实现了最简功能，后续再深挖需求，可以做到前端代码变更的精准测试。 [图片] 五、sentry 报警 在刚接触前端测试的时候，js 的报错没有任何追踪，对于排查问题和定位问题有很大困扰。因此我们着手引入了 sentry 报警监控，用于监控线上环境 js 的运行情况。 – sentry[7] 是一款开源的错误追踪工具，它可以帮助开发者实时监控和修复崩溃。 开始我们接入的方式比较简单粗暴，直接全局接入，带来的问题是报警信息非常庞大，全局上报后 info、warn 信息都会打出来。 更改后，使用 sentry 的姿势是： sentry 的全局信息上报，并进行筛选 错误类型: TypeError 或者 ReferenceError 错误出现用户 > 1k 错误出现在 js 文件中 出现错误的店铺 > 2家 增加核心业务异常流程的主动上报 最终将筛选后的错误信息通过邮件的形式发送给告警接收人，在固定的时间集中修复。 [图片] [图片] 六、业务报警 除了 sentry 监控报警，Node 接口层的业务报警同样是必不可少的一部分，它能及时发现 Node 提供的接口中存在的业务异常。这部分是开发和运维同学做的，包括在 Node 框架底层接入日志系统；在业务层正确的上报错误级别、错误内容、错误堆栈信息；在日志系统增加合理的告警策略，超过阈值之后短信、电话告警，以便于及时发现问题、排查问题。 业务告警是最能快速反应生产环境问题的一环，如果某次发布之后发生告警，我们第一时间选择回滚，以保证线上的稳定性。 七、约定规范 除了上述的一些测试和告警手段之外，我们也做了一些流程规范、用例维护等基础建设，包括： 发布规范 多个日常分支合并发布 限制发布时间 规范发布流程 整理自测核心检查要点 基线用例库 不同业务 P0 核心用例定期更新 项目用例定期更新到业务回归用例库 线上问题场景及时更新到回归用例库 目前有赞的前端测试套路基本就是这样，当然有些平时的努力没有完全展开，例如接口测试中增加返回值结构体对比；增加线上接口或页面的拨测[8]；给开发进行自测用例设计培训等等。也还有很多新功能探索中，如接入流量对比引擎，将线上流量导到预上线环境，在代码上线前进行对比测试；增加UI自动化的截图对比；探索小程序的UI自动化等等。 参考链接 [1] https://github.com/GoogleChrome/puppeteer [2] https://www.npmjs.com/package/mocha [3] https://www.npmjs.com/package/mochawesome [4] https://github.com/gotwarlost/istanbul [5] https://github.com/facebook/jest [6] https://github.com/avajs/ava [7] https://docs.sentry.io [8] https://tech.youzan.com/youzan-online-active-testing/

一般情况下，一个云函数完成单一的逻辑功能，就是一个类的方法一样，如图: [图片] 但是受限免费用户最多只能使用20个云函数，想要在单一云函数中实现多个复杂的功能就需要通过参数来区别，可读性差，不利于管理。通过路由，尝试将请求归类，一个云函数处理某一类的请求，比如有专门负责处理用户的，或者专门处理支付的云函数。如图: [图片] 为了方便大家试用，腾讯云 Tencent Cloud Base 团队开发了 tcb-router，云函数路由管理库方便大家使用。 基于 koa 风格的小程序·云开发云函数轻量级类路由库，主要用于优化服务端函数处理逻辑 使用 npm install --save tcb-router 云函数端 // 云函数的 index.js const TcbRouter = require(’./router’); exports.main = (event, context) => { const app = new TcbRouter({ event }); [代码]// app.use 表示该中间件会适用于所有的路由 app.use(async (ctx, next) => { ctx.data = {}; await next(); // 执行下一中间件 }); // 路由为数组表示，该中间件适用于 user 和 timer 两个路由 app.router(['user', 'timer'], async (ctx, next) => { ctx.data.company = 'Tencent'; await next(); // 执行下一中间件 }); // 路由为字符串，该中间件只适用于 user 路由 app.router('user', async (ctx, next) => { ctx.data.name = 'heyli'; await next(); // 执行下一中间件 }, async (ctx, next) => { ctx.data.sex = 'male'; await next(); // 执行下一中间件 }, async (ctx) => { ctx.data.city = 'Foshan'; // ctx.body 返回数据到小程序端 ctx.body = { code: 0, data: ctx.data}; }); // 路由为字符串，该中间件只适用于 timer 路由 app.router('timer', async (ctx, next) => { ctx.data.name = 'flytam'; await next(); // 执行下一中间件 }, async (ctx, next) => { ctx.data.sex = await new Promise(resolve => { // 等待500ms，再执行下一中间件 setTimeout(() => { resolve('male'); }, 500); }); await next(); // 执行下一中间件 }, async (ctx)=> { ctx.data.city = 'Taishan'; // ctx.body 返回数据到小程序端 ctx.body = { code: 0, data: ctx.data }; }); return app.serve(); [代码] } tips: 小程序云函数的 node 环境默认支持 async/await 语法，推荐涉及到的异步操作时像 demo 中那样使用 小程序端 // 调用名为 router 的云函数，路由名为 user wx.cloud.callFunction({ // 要调用的云函数名称 name: “router”, // 传递给云函数的参数 data: { $url: “user”, // 要调用的路由的路径，传入准确路径或者通配符* other: “xxx” } }); 完整的实例，请参考我的另一篇博客: 分享使用tcb-router路由开发的云函数短信平台SDK

我的小程序（启程考驾照），文件和代码被盗用了，怎么维权？