测试驱动简介 关于测试驱动的快速入门，可以看之前的这篇文章《 换一种思路写代码，前端测试驱动开发模式(TDD)快速入门》,这篇文章就跳过一些基础的概念。 小程序自动化 来自官方的介绍： [代码]小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。[代码] 个人理解，这个小程序自动化工具，就是可以用代码去写一些脚本，可以操作[代码]小程序开发者工具[代码]自动的执行一些操作。 官方文档： https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/ 工具的安装和配置 运行环境(来自官方文档): 安装  Node.js  并且版本大于 8.0 基础库版本为  2.7.3  及以上 开发者工具版本为  1.02.1907232  及以上 首先 npm init, 初始化一个项目。 执行下面命令安装工具： [代码]npm i miniprogram-automator --save-dev [代码] 因为需要使用 jest 做为测试的工具，所以需要安装 jest，执行以下两条命令: [代码]npm i jest --save-dev npm i jest -g [代码] 在目录下创建 test 文件夹，创建以[代码].spec.js[代码]结尾的文件，在此文件中写入测试代码, 我这里建立[代码]index.spec.js[代码]。在 package.json 的 script 中添加： [代码]{ "test": "jest" } [代码] 这样[代码]npm run test 文件名[代码]就可以运行指定的测试文件。 连接小程序开发工具 我在尝鲜的时候在这里花了一些时间在连接小程序开发工具上。 首先需要在微信开发者工具， 设置->通用设置->安全中把服务端口打开。 [图片] 在[代码]index.spec.js[代码]中添加连接的代码: [代码]import automator from 'miniprogram-automator' describe('index', () => {   let miniProgram // beforeAll 表示在执行所有测试之前需要的操作 beforeAll(async () => { miniProgram = await automator.launch({ cliPath: `${cli.bat文件的路径}`, // 如果是默认安装路径，就不需要写了 projectPath: `${项目路径}` //这里需要写上项目路径 }) }, 40000) }) [代码] 这时候就可以执行命令来测试连接小程序开发者工具了， 如果连接成功的话，在执行命令后，就会自动打开微信开发者工具，如果连接失败，就是命令行工具会关闭，并且打不开微信开发者工具。 一些连接经验： 为了路径兼容 windows 和 mac 最好用 node 的 path 模块去拼路径 cli.bat 是在微信开发者工具的根目录中，记得写路劲的时候要加上.bat 的后缀名 如果你是默认路径安装的，如果还是打不开，我自己就是遇到这个情况，我是通过 imweb 团队这篇文章中写的，打开自动化操作服务端口后就可以连接使用了 基本使用思路 目前这个工具只有四个 api： Automator, MiniProgram, Page, Element, 点击查看文档。 Automator 主要提供启动和连接开发者工具的方法。 MiniProgram 主要提供操作小程序的一些方法， 比如跳转页面，getSystemInfo, 或者执行 wx 对象上的方法 Page 主要提供操作页面的方法，比如用$获取元素，获取页面的 data,调用页面的方法 element 主要提供元素的操作方法 主要的使用思路就是用代码来操作小程序的操作。比如可以先用 MiniProgram 的页面跳转方法跳转到指定的页面，用 Page 的 callMethod 来执行相关的方法，再选取需要测试的元素，比较是否符合预期。 示例 这里展示一个小的示例。在电商小程序中，大部分页面都需要一进入就需要请求接口拿数据，我们通常把原始数据经过洗数据层变成前端想要的样子。现在就来测试一下是否初始的数据是我们期望的那样。 步骤是： 连接小程序，并且跳转的指定页面 等待初始接口调用 查看 page 的 data，比较是否符合预期 [代码]describe('index', () => { let miniProgram let page // 连接微信开发者工具 beforeAll(async () => { miniProgram = await automator.launch({ projectPath: `${root}` }) page = await miniProgram.reLaunch('/pages/plp/plp') // 使用miniProgram的api跳转到指定页面 await page.waitFor(500) // 等待页面请求接口 }, 40000) it('初始化洗数据后， 初始数据满足要求', async (done)=>{ const data = await page.data() // 使用page的方法获取当前页面的data expect(data).toMatchObject({ items: expect.anything(), facet: expect.anything() }) // 通过jest的expect方法比较这个data是否符合预期 done() }) 在执行 afterAll(async () => { await miniProgram.close() }) }) [代码] 执行 [代码]npm run test index[代码] 后，看到 pass 的字样，就表示这个测试通过了。 Jest 会自动把通过与不通过的测试用例都展示出来。 总结 小程序自动化测试工具 api 很简单，思路也简单易懂，可能连接的时候需要花一点时间。 实施好自动化测试可以提升程序本身的健壮性。 之后还要花一些时间来深入的使用。

小程序发布了 miniprogram-ci 已经一段时间了。 不建议采用通过命令行来触发上传动作, 通过 miniprogram-ci 更为方便 小程序中的 体验版 和 开发板 开发版: 开发者通过 [代码]微信开发者工具[代码] 上传代码的版本。不同开发者上传后，对应着不同的 [代码]开发版[代码]，[代码]开发版[代码] 不能直接被访问到。通过 微信开发者工具 上的 [代码]预览[代码] 功能，生成二维码预览（二维码有效时间较短 20~30 min）。 体验版: 在 微信公众平台 后台，指定某个 [代码]开发版[代码] 指定为 [代码]体验版[代码]。[代码]体验版[代码] 长期有效，只能指定一个。 所以如果我们可以将 [代码]体验版[代码] 始终指定某一个开发者 的 [代码]开发版[代码] 上，然后每次通过这个开发者上传小程序代码。这样就只需要访问 [代码]体验版[代码] 即可。 小程序自动部署 常用的 CI/CD 有很多，由于小程序上传代码只能通过 [代码]微信开发者工具[代码]。 而 [代码]微信开发者工具[代码] 只能支持 Windows/Mac 而不支持 Linux，所以最后决定采用 GitLab CI。 因为 [代码]GitLab CI[代码] 中的 GitLab Runner 可以执行 GitLab CI 中的任务。我们使用 [代码]GitLab Runner[代码] 在自己电脑上注册个 Runner 来执行上传小程序代码的任务。 GitLab CI 配置流程 下载 GitLab Runner Install，注册一个 Runner 运行 gitlab-runner register 根据命令提示操作 [代码]# 输入 GitLab 服务地址 Please enter the gitlab-ci coordinator URL (e.g. <https://gitlab.com/>): https://gitlab.com # token 在对应项目中的 Setting => CI/CD => Runners 中 如下 图1 Please enter the gitlab-ci token for this runner: hVGe8TvU5KL-ZQqsv48z # 输入描述信息 Please enter the gitlab-ci description for this runner: this is description for the runner # 注意: 这里输入的 tags 会在后面 .gitlab-ci.yml 配置的时候用到。 Please enter the gitlab-ci tags for this runner (comma separated): test # 是否作执行没有指定 tags 的 builds Whether to run untagged builds [true/false]: false # 是将 Runner 锁定至当前项目 Whether to lock the Runner to current project [true/false]: true # 注册成功 Registering runner... succeeded runner=hVGe8TvU # 输入 Runner 执行环境 Please enter the executor: docker, docker-ssh, shell, parallels, ssh, virtualbox, docker+machine, docker-ssh+machine, kubernetes: shell Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded! [代码] [图片] 这个时候就注册号好了。我们去到项目的 Setting => CI/CD => Runners 下会发这个 Runner [图片] 注意: 此时这个 Runner 前面是个 感叹号，我们运行 [代码]gitlab-runner start [代码] 配置 .gitlab.yml 文件，在项目根目录下创建 .gitlab-ci.yml 文件 [代码]image: node:9 # 制定任务执行时的 docker 镜像 stages: # 定义阶段用于执行任务（定义了 build 和 deploy 两个阶段） - build - deploy build: # 定义 build 任务 stage: build # 该任务属于 build 阶段 script: # 执行下面脚本 - yarn install - yarn build artifacts: # 制定任务成功后保存的文件(可以在 GitLab 上下载) name: $CI_JOB_NAME untracked: false # 是否添加所有 git untracked 的文件 paths: # 需要添加文件的位置 - dist tags: # tags 制定运行在哪个 Runner 上 - gitlab-org deploy: # 定义 deploy 任务 stage: deploy # 该任务属于 deploy 阶段 dependencies: # 该任务依赖 build 阶段的所有任务 - build variables: # 定义变量 VERSION: 1.0.0 DESCRIPTION: 描述内容 CLI: C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat script: # 执行下面脚本 # 下面是 小程序 上传代码的脚本，以 Windows 为例 # https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html#4-%E5%91%BD%E4%BB%A4%E8%A1%8C%E4%B8%8A%E4%BC%A0%E4%BB%A3%E7%A0%81 - %CLI% -u %VERSION%@%cd% --upload-desc %DESCRIPTION% tags: # 这里需要在我们刚注册的 Runner 运行，和注册时的 tags 匹配 - test [代码] 注意：小程序上传代码通过开发工具的 命令行调用 GitLab Pipelines 当我们提交将代码 push GitLab 后, 当 GitLab 检测到 [代码].gitlab-ci.yml[代码] 文件后， 会自动触发 Pipeline 任务，如图： [图片] 我们在 GitLab 上看 这个 Pipeline 下的 Jobs 的运行状态 当 [代码]deploy[代码] Job 成功后，就表示我们自动化的上传代码流程成功。 修改开发者工具源代码。 由于在执行cli的时候，错误并不会抛出。(比如开发者工具没有登录，但是 cli 执行 upload 命令的时候错误没有抛出，导致就pipeline 显示成功) 所以我们需要在修改开发者工具目录下的 cli.bat 文件，添加一行内容 [代码]@echo off set CALLING_DIR=%CD% cd /d %~dp0 .\node.exe .\cli.js %* + if %errorlevel% neq 0 exit /b %errorlevel% ... [代码]

小程序流量主广告位使用ad组件如何设置下载自己的app应用？？ 这是一个提问贴，想实现在小程序里提供下载自己的app的能力，发现ad 组件可以支持，但开发相关的介绍不是很全面。[图片] [图片] [图片] 介绍说可以推广我的应用，但是具体实现没有介绍。 官方人员可以帮忙解惑下吗？谢谢！

用swiper做的焦点图轮播，不明原因下自行抖动，快速在两帧之间来回切换，如下： GIF： [图片] 视频地址： http://v.youku.com/v_show/id_XMjkxMDc4NTg5Mg==.html?spm=a2h3j.8428770.3416059.1

[图片] 微信宣布小程序将可以在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组件使用心得

最近在搞微信小程序订阅消息，遇到不少的坑，这篇文章的初衷就是帮忙开发者少踩坑，业务能快速对接订阅消息。 也欢迎开发者私聊我，咱们一起维护这个列表。 下面有部分内容是从@拾忆和@Jianbo摘取的，如有侵权，联系我，我来删除。 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html 订阅消息体验踩坑@拾忆 https://developers.weixin.qq.com/community/develop/article/doc/000e22321b8ef0b9bc491ae9c53c13 小程序订阅消息开发指南@Jianbo https://developers.weixin.qq.com/community/develop/article/doc/00026407d58cf07bb96941b0e5b813 开发者需要关注的点 1.如果不勾选红色方框内的内容，用户每次触发订阅消息功能都会弹出授权窗口，如果用户勾选了则不会出现弹窗。 2.微信不会为开发者保存订阅次数，需要自己在后台记录用户触发的次数。超过次数调用接口下发订阅消息会返回失败。 3.发送模板格式和原来的模板消息格式不一致，特别是data内的内容，订阅消息的字段key是和数据类型有关，value的参数需要严格按照设置的类型提交，具体使用参考后台的模板详情。 4.长期订阅消息只针对特定行业开放，所以普通开发者并无法使用。 5.用户是否勾选总是保持以上选择，不再询问，这个对开发者透明 6.测试环境如果勾选总是保持以上选择，就不会在弹出来，如果进入设置页关闭，也不会弹出来。有一个骚操作，就是去后台将订阅消息模板删除，重新新建一个，就会生成一个新的模板id，就能进行测试了 7.允许和拒绝的回调返回errMsg是一样的 低版本说明 1.基础库2.8.2 版本才开始支持，用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面。 2.微信版本：一次调用最多可订阅3条消息（注意：iOS客户端7.0.6版本、Android客户端7.0.7版本之后的一次性订阅/长期订阅才支持多个模板消息，iOS客户端7.0.5版本、Android客户端7.0.6版本之前的一次订阅只支持一个模板消息）消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置 使用的两种方式 1.点击行为，不能嵌套在form组件 2.支付回调，可以wx.requestPayment回调里使用 可参考的产品 1.luckin微信小程序，在支付之前体验 2.青柠单车小程序，扫码就能体验 bug 错误码 1.43101用户拒绝接受消息，如果用户之前曾经订阅过，则表示用户取消了订阅关系 changeLog 1.2019-12-31 20:00：目前订阅消息不支持跳开发版，我们会尽快优化解决 2.2020-01-02 12:55：微信开放平台，向非api方式注册的小程序添加订阅消息，小程序类目不符合订阅消息类目，添加不了，需要手动到微信后台设置类目 3.2020-01-02 19:00 新版订阅消息IOS手机bug，直接返回之后就不会在弹窗了，微信7.0.9版本已解决https://developers.weixin.qq.com/community/develop/doc/00008a645500e88023b9341fc51c 4.2020-01-06 15:00 小程序订阅消息弹出样式是系统默认的，目前开发者不允许修改 5.2020-01-071510 小程序订阅消息的相关接口频次上限是多少(当前每个账号的模板消息的日调用上限为10万次，单个模板没有特殊限制。当账号粉丝数超过10W/100W/1000W时，模板消息的日调用上限会相应提升，以公众号MP后台开发者中心页面中标明的数字为准。https://developers.weixin.qq.com/community/develop/doc/00084455e7c068058ab9db8d656800 6.2020-01-08 11:30 微信支付成功从A页面进入B页面，微信版本 7.0.8，页面切换时，订阅消息弹窗不显示了。微信版本7.0.9没有这个问题；后续会修复

前言 距离1月10日模板消息下架只有2天了，在社区里经常能看到有帖子在问关于怎么记录订阅次数的问题，这里在这里介绍一下自己用的简单方案，仅供参考。 误区一 [图片] 上面这个图大家应该都比较熟悉了，很多人总是误以为勾选“总是保持以上选择，不再询问”，就可以无限发送订阅消息，这个是错误的想法，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口而已。 误区二 订阅消息不能通过bindsubmit的方式触发，必须通过bindtap的方式触发。 误区三 触发订阅窗口后，不管用户点击了允许还是取消，都会进入订阅消息的success回调中，所以通过这个来判断用户是否订阅是错误的。 订阅次数的维护 先看下官方的文档： [图片] 那么我们该如何使用呢？ 我们通过 wx.requestSubscribeMessage 接口发送的时候是知道需要让用户订阅哪几个模板的，就是 tmplIds 这个参数填的数组。那么根据官方文档的回调内容，我们就可以直接在success内去获取对应的key所返回的状态。把获取到的状态分别存入自己的数据库里。发送的时候去数据库里查询需要发送的模板并且状态为accept的去发送，如果发送成功则删除一条记录（因为没有过期一说，所以随便删除哪一条记录都不影响）。 参考代码 [图片] 查询模板订阅状态 需要基础库大等于2.10.0才支持。 wx.getSetting({ withSubscriptions: true, success (res) { console.log(res) } }) 官方文档 补充 如果用户选择了不再接收消息会清空之前的订阅次数，但是这个不会主动告诉开发者，所以发送订阅消息失败后，需要根据返回内容自行清空记录，重新计算。 相关文章 「笔记」订阅消息-订阅次数维护（2020年3月更新改动） 「笔记」订阅消息体验踩坑