这篇分析，可能微信的同学来写会更合适。这里只是做了次体验，记录体验中遇到的问题以及一些想法。 简介 kbone 主要提供了编写 web 端代码，编译到小程序端的能力。 web 端采用的框架是 vue ，然后提供一个适配层在小程序端适配 web 端代码。详细介绍参考： https://github.com/wechat-miniprogram/kbone/blob/develop/README.md [https://github.com/wechat-miniprogram/kbone/blob/develop/README.md] 原理 BUILD阶段 kbone 提供了一个 webpack 插件，该插件在 vueLoaderPlugin 处理后继续处理 chunk ，添加小程序端特定方法的封装，以及 window 和 document 的注入，小程序端配置的注入。 RUNTIME阶段

在开发小程序展开全文组件时需要用到节点查询API - wx.createSelectorQuery() 来查询全文内容的高度。 * wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。 * SelectorQuery 有五个方法（ in ， select ， selectAll ， selectViewport ， exec ），第一个返回 SelectorQuery ，后四个返回 NodesRef 。 * NodesRef 有四个方法（ fields ， boundingClientRect ， scrollOffset ， context ），第一个返回 NodesRef ，后三个返回 SelectorQuery 。 对照官方提供的示例代码来看

由于小程序更新迭代速度很快，而且我们的技术栈是 react 全家桶，所以在对比 wepy 和 mpvue 之后，我们选择了直接使用原生小程序。对比图如下： 当然直接使用原生的有个显然的缺点：没有了构建。不过这没有关系，缺什么补上即可。 需要构建做什么 一般来说，我们需要构建主要是用来做这些工作：ES6/7 转 ES5、NPM 包管理、组件化、 CSS 预编译、图片压缩、打包合并等。 而这些能力除了CSS 预编译和图片压缩之外，其他的功能小程序默认已经提供了。所以一个小巧的小程序构建只需要支持CSS 预编译和图片压缩即可。 GULP 构建方案 既然只涉及到一些任务的处理，那么使用 gulp 是最合适不过的了。 对于 CSS 预编译，有 gulp 对应的 sass、less、postcss 插件可选；对于图片压缩，可以使用 gulp 的 imagemini 插件，再装上各种图片的格式对应的压缩库即可。

微信小程序为支付提供了一个 API，那就是 wx.requestPayment [https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html] 。打眼一看还是比较简单的，就是传入几个参数呗，但是实际要搞定这几个参数还是需要一些流程的。 参数说明 wx.requestPayment 的参数如下： 返回的。而该接口需要提供小程序appid、商户号，用户 openid 等。 然后 paySign 签名涉及到 签名算法

为了吸引更多的用户，设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的，下面分享下我们打卡小程序的一些经验。 分享海报的效果图如下： 制作要求： * 海报以弹窗形式展现，各种手机型号都可以正常显示 * 海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息 * 海报保存的图片大小为 iphone 6 的两倍图（750 * 1334） 由于看到的弹窗图片与保存的图片是两种大小，所以一开始看了些网上的其他教程，建议是搞两个 canvas 一个大的一个小的。实际过程中，采用了一个大的 canvas ，让其偏离视窗显示区域（不可见）并生成临时文件，弹窗的图片再使用 img 组件，引入临时文件，设置其高度；而保存的时候则直接下载临时文件。 虽然是实现了，但是后来在优化的过程中，这个方案也重新设计了。下面具体介绍下优化过的方案：