wxParse 微信小程序富文本解析 原因 由于原作者仓库 wxParse 不再维护，我们项目中商品信息展示又是以wxParse这个用做富文本解析的； 于是乎，决定采用 递归Component 的方式对其进行重构一番； 原项目使用的 [代码]template[代码] 模板的方式渲染节点，存在以下问题： 节点渲染支持到12层，超出会原样输出 [代码]html[代码] 代码； 每一层级的循环模板都重复了一遍所有的可解析标签，代码十分臃肿。 [代码]li[代码]标签不支持 [代码]ol[代码] 有序列表渲染（统一采用的是 [代码]ul[代码] 无序列表），[代码]a[代码]标签无法实现跳转，也无法获取点击事件回调等等； 节点渲染没有绑定 [代码]key[代码] 值，一是在开发工具看到一堆的 [代码]warning[代码]信息（看着十分难受），二是节点频繁删除添加，无法比较[代码]key值[代码]，造成 [代码]dom[代码] 节点频繁操作。 功能标签 目前该项目已经可以支持以下标签的渲染： audio标签（可自行更换组件样式，暂时采用微信公众号文章的[代码]audio[代码]音乐播放器的样式处理） ul标签 ol标签 li标签 a标签 img标签 video标签 br标签 button标签 h1, h2, h3, h4标签 文本节点 其余块级标签 其余行级标签 支持 npm包 引入 [代码]npm install --save wx-minicomponent [代码] 使用 原生组件使用方法 克隆 项目 代码，把 components目录 拷贝到你的小程序根目录下面; 在你的 page页面 对应的 [代码]json[代码] 文件引入 [代码]wxParse[代码] 组件 [代码]{ "usingComponents": { "wxParse": "/components/wxParse/wxParse" } } [代码] 组件调用 [代码]<wxParse nodes="{{ htmlText }}" /> [代码] npm组件使用方法 安装组件 [代码]npm install --save wx-minicomponent [代码] 小程序开发工具的 [代码]工具[代码] 栏找到 [代码]构建npm[代码]，点击构建； 在页面的 json 配置文件中添加 [代码]wxParse[代码] 自定义组件的配置 [代码]{ "usingComponents": { "wxParse": "/miniprogram_npm/wx-minicomponent/wxParse" } } [代码] [代码]wxml[代码] 文件中引用 wxParse [代码]<wxParse nodes="{{ htmlText }}" /> [代码] 提示：详细步骤可以参考小程序的npm使用文档 补充组件：代码高亮展示组件使用 在 [代码]page[代码]的 [代码]json[代码] 文件里面引入 [代码]highLight[代码] 组件 原生引入： [代码]{ "usingComponents": { "highLight": "/components/highLight/highLight" } } [代码] npm组件引入： [代码]{ "usingComponents": { "highLight": "/miniprogram_npm/wx-minicomponent/highLight" } } [代码] 组件调用 [代码]<highLight codeText="{{codeText}}" /> [代码] 参数文档 wxParse：富文本解析组件 参数 说明 类型 例子 nodes 富文本字符 String “<div>test</div>” language 语言 String 可选：“html” | “markdown” (“md”) 受信任的节点 节点 例子 audio <audio title=“我是标题” desc=“我是小标题” src=“https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1” /> a <a href=“www.baidu.com”>跳转到百度</a> p div span li ul ol img button h1 h2 h3 h4 … highLight：代码高亮解析组件 参数 说明 类型 例子 codeText 原始高亮代码字符 String “var num = 10;” language 代码语言类型 String 可选值：“javascript/typescript/css/xml/sql/markdown” 提示：如果是html语言，language的值为xml wxAudio：仿微信公众号文章音频播放组件 参数 说明 类型 例子 title 标题 String “test” desc 副标题 String “sub test” src 音频地址 String 示例展示 富文本解析 html文本解析实例 [图片] markdown文本解析实例 [图片] 代码高亮 [图片] 更新历史 2020-5-31 迁移utils目录到wxParse目录下； 富文本增加markdown文本解析支持； 2020-5-21: 富文本组件image标签添加loading过渡态，优化图片加载体验 2020-5-17: 完善组件参数文档，增加wxParse对audio标签标题，副标题的解析功能 2020-5-13: 增加css，html，ts，sql，markdown代码高亮提示支持 2020-5-6: 增加图片预览功能 项目地址 项目地址：https://github.com/csonchen/wxParse

测试驱动简介 关于测试驱动的快速入门，可以看之前的这篇文章《 换一种思路写代码，前端测试驱动开发模式(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 很简单，思路也简单易懂，可能连接的时候需要花一点时间。 实施好自动化测试可以提升程序本身的健壮性。 之后还要花一些时间来深入的使用。

kbone的基础安装及介绍，这里不再过多介绍，感兴趣的童鞋可以看看官方的 文章 及 gitbook(文档) 什么是Kbone？ Kbone 是由 微信小程序 官方团队推出的 H5 及 微信小程序 同构脚手架，可使同一套代码分别运行在 H5 及 微信小程序 平台，极大减少了开发者（前端）的工作量。 为什么是Kbone？ 相信一部分童鞋在之前已经了解过同类型的其他脚手架，如 uni-app 、mpvue、trao 等。既然市面上已经有这么多脚手架了，为什么 微信小程序 官方依然会推出 kbone 呢？难道是他们并不知道有其他的脚手架？ 答案是否定的，他们当然也知道其他脚手架，也尝试使用过。 编者之前也就一些问题咨询过相关的开发人员，也就一些问题进行过讨论。在之后也进行过一些尝试。得出结论：在 微信小程序 环境中，Kbone 所编译出来的代码，运行效率高于其他脚手架（不愧是你们，微信小程序的官方开发团队，居然还偷偷做了优化）。 不过目前，Kbone 仅支持编译成 H5 及 微信小程序，如果需要上其他平台，如 支付宝小程序、抖音小程序等等，估计还需要等一等（不过，猜测近段时间不会支持吧）。 这里推荐 祺爸💎 的文章《微信小程序转其他端小程序实战》，也是一个不错的解决方案。仅需要将 Kbone 预先编译成 微信小程序，然后再转成其他小程序即可。 当然，如果你说的是APP，那自己想办法吧。 Kbone起步的一些坑 一、 [图片] 这应该是一个残留bug，之前是需要在微信小程序中使用 npm构建 安装一些库的，但是目前来看已经不需要了，删除 miniprogram-element 文件夹即可 二、 [图片] 这也是一个老问题了，每次修改 Kbone 代码重新编译后，微信开发者工具 均会报这个错误。这是因为在 Kbone 中未配置 微信小程序 的 AppID，在 Kbone 项目中找到 build/miniprogram.config.js ，然后拉到最下面，填写 projectConfig: { appid: ‘’ } 的值即可（需退出编译模式，重新编译） 例： [代码]// 项目配置，会被合并到 project.config.json projectConfig: { projectname: 'kbone-template-vue', appid: 'wxd****7ff****8f4f', } [代码] Kbone的后续 当然，目前 Kbone 依然有很多不足，甚至可以说匪夷所思的地方，但是毕竟是一个新兴脚手架，在可以理解的范围内。Kbone 的团队也在持续优化、维护、升级，相信未来能更好～ 写在后面 至此，Kbone 的项目算是成功搭建，并且正常运行了，如果在使用过程中，有遇到其他问题，欢迎来此文章提出，编者会尽量回复。 最后，推荐一下 pohunchn/kbone-vue 的模版，此模版是基于官方kbone-vue模版所制作的 vue 模版，可使上手更为方便（不用再手动去修改 AppID 啦，也能直接去掉繁琐的 Eslint 啦！）。 [代码]vue init pohunchn/kbone-vue my-app [代码] 执行以上方法即可安装，是不是很简单！

背景 公司一直是在用原生来开发微信小程序，完成上线后产品又提出需要百度、头条小程序。技术这边初步考虑有两个方案： 1、直接微信小程序代码转成百度、头条小程序代码； 2、为了方便以后的功能升级，先把微信小程序代码转成uni-app、taro这种支持多端的第三方框架代码后，再编译到百度、头条 直接转换 由于众所周知的原因，不管是百度还是头条，他们的原生开发的组件、api等都和微信小程序及其类似，这也就使得直接转换变得十分方便。 百度后发现微信到头条有专门的工具，安装和使用都很方便 安装 [代码]npm i wx2tt -g [代码] 使用 [代码]wx2tt <微信小程序目录> <头条小程序目录> [代码] 不使用转换工具，手工转换的话也还算清晰，主要是以下4步： 1、将 wxml 文件中的 wx: 替换成 tt 2、将 js 文件中的 wx. 替换成 tt. 3、将 wxml 文件后缀改为 ttml 4、将 wxss 文件后缀改为 ttss 转换后导入头条开发工具可以顺利启动。 百度小程序就更简单了，百度开发者工具自带搬家功能，可以直接将微信小程序代码转成百度小程序代码并顺利启动。 当然这些转换工具仅仅是简单的代码层面的转换，实际要使用还是要进行一些调整。虽然百度、头条和微信的规范很类似，还是有一些差别，需要在转换之后详细的测试和调整。目前我们实际测试下来有这些不同和需要调整的地方： 1、列表渲染头条、百度不支持直接使用数字，类似[代码]wx:for="{{4}}"[代码]这种在微信小程序里是可用的，头条、百度里不可用 2、头条小程序不支持canvas的[代码]arcTo[代码]方法，虽然文档里是有这个方法的，但是实际使用时会报错：ctx.arcTo is not a function 可能还存在其他问题，需要更详细的测试。另外、涉及到登录、支付等功能也需要后端做相对应的开发。 第三方框架 为了方便以后的功能升级，我们也考虑了使用uni-app、taro这种支持多端的第三方框架。由于已经有了微信端的原生代码，所以使用思路上是像先把微信的原生代码转换成第三方框架的代码后，再编译到百度、头条。 不管是uni-app还是taro都提供了转换方法和工具 uni-app：https://ask.dcloud.net.cn/article/35786 taro：https://taro-docs.jd.com/taro/docs/taroize.html 实际转换也是成功完成了，但是转换之后的代码并不能直接使用，要在百度、头条开发者工具里使用的话，还需要再编译一次。编译也很成功，但是编译好之后放到开发者工具之后就报错了，由于编译之后的代码在可读性上变差了很多，基本上没办法定位错误并调整修改。不仅是百度、头条，编译成微信小程序也会报错。 进过实际的操作和对比后，最终决定放弃第三方框架。 结论 经过这次实战，我们这边对于小程序的多端开发，最终的结论就是：在不涉及app开发的前提下，优先微信原生开发后，再使用转换工具转换成其他端代码，不建议使用第三方框架。 不建议使用第三方框架的最主要原因就是第三方开发出来的代码并不能直接使用，需要再编译一次，编译之后的代码可读性变差，基本没有办法调试和修改错误。 后续 没有后续了，公司砍掉了整个项目，我被裁员了

小程序模板消息能力在帮助小程序实现服务闭环的同时，也存在一些问题，如： 1. 部分开发者在用户无预期或未进行服务的情况下发送与用户无关的消息，对用户产生了骚扰； 2. 模板消息需在用户访问小程序后的 7 天内下发，不能满足部分业务的时间要求。 为提升小程序模板消息能力的使用体验，我们对模板消息的下发条件进行了调整，由用户自主订阅所需消息。 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。 [图片] （一次性订阅示例） 长期性订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景，如航班延误，需根据航班实时动态来多次发送消息提醒。为便于服务，我们提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。 调整计划 小程序订阅消息接口上线后，原先的模板消息接口将停止使用，详情如下： 1. 开发者可登录小程序管理后台开启订阅消息功能，接口开发可参考文档：《小程序订阅消息》 2. 开发者使用订阅消息能力时，需遵循运营规范，不可用奖励或其它形式强制用户订阅，不可下发与用户预期不符或违反国家法律法规的内容。具体可参考文档：《小程序订阅消息接口运营规范》 3. 原有的小程序模板消息接口将于 2020 年 1 月 10 日下线，届时将无法使用此接口发送模板消息，请各位开发者注意及时调整接口。            微信团队 2019.10.12