IT忍者神龟之开发中遇到了哪些难点 && 微信小程序有多少坑？

微信小程序目前的确算不上公测的版本，开发者工具不完善、真机表现和开发环境差异很大、部分组件性能较差、部分功能有缺陷，只有经历了这些大坑，才会真的知道你有多“爱”微信小程序。这儿总结了开发中的难点以及微信小程序中遇到的比较明显的坑。

富文本解析

微信小程序并不支持HTML标签，所以对于富文本解析来说，难度较大，而且有些功能还没有办法实现，比如：iframe视频、连接跳转等
这块功能建议由后台统一转换，如果非得前端转换，建议参考下面的思路。

非常感谢 wxParse 这款组件，替我省了不少时间。推荐大家使用，期间遇到一些问题，也分享给大家。
✦ wxParse 默认层级只支持10层html嵌套，如果想要支持更深的层级，在wxParse.xml复制几份template即可。
✦ wxParse 提供了图片加载成功的回调wxParseImgLoad，很好用。但如果富文本中的图片已经预设宽高比，那么可以不用依赖该回调，在html2jons.js中根据屏幕宽度直接计算出图片高度，先占位，可以避免页面频繁抖动的问题。
✦ 如果你的富文本中有自定义模块，对wxParse.xml中的template进行改造即可。

自定义模块样式

数据扁平化

具体如何扁平化，请百度。
这儿只简单介绍下扁平化应用场景：
好奇心日报的研究所是三级表结构：papers > questions > options，后台返回的数据是三级嵌套数据，如果想要修改option.selected字段，需要三级嵌套循环！如果想要获取所有选中的option，需要三级嵌套循环！

页面展现速度优化

数据复用，比如复用列表页的数据，可以让详情页的标题等字段第一时间呈现出来。
离线缓存，同样可以让列表页和详情页第一时间呈现出来，甚至有可能减少请求数量。

无论是数据复用还是离线缓存，配合数据扁平化，都非常好用。

小程序默认设置代理，会和Shadowsocks等VPN冲突（最新版已修复）

解决方法很简单，设置微信小程序不使用代理；或者临时关闭VPN即可。
最新版开发者工具已经解决该问题。

最新版微信小程序移除了对Promise的支持。

开发者自行引入兼容库即可，推荐es6-promise。使用的时候，直接引入Promise即可。

// 引入Promise
import Promise from '../vendors/es6-promise.js';

// 用Promise封装wx.request网络请求
function request(method = 'GET') { return function(url, data = {}) { return new Promise(function(resolve, reject) { wx.request({ url, data, method, header: { 'Content-Type': 'application/json' }, success: function(res) { let { statusCode, errMsg, data } = res; if (statusCode == 200 && data.meta && data.meta.status == 200) { resolve(data.response); } else { reject('网路请求错误，请稍后再试~'); } }, fail: function(err) { reject('网路请求不符合规范，请检查域名是否符合要求~'); } }); }) } } export const GET = request('GET'); export const POST = request('POST'); export const PUT = request('PUT'); export const DELETE = request('DELETE'); // 用Promise封装小程序的其他API export const promisify = (api) => { return (options, ...params) => { return new Promise((resolve, reject) => { api(Object.assign({}, options, { success: resolve, fail: reject }), ...params); }); } } // 使用 const getLocation = promisify(wx.getLocation);

不清楚微信为何会临时移除Promise，统一内置不也挺好？

小程序不能实现完美的fullpage效果，会出现上下拉扯的感觉（最新版预计已修复，待实际验证）。

小程序一旦滚动顶部或者底部，继续滑动的时候，就会出现拉扯现象。而这个拉扯现象还无法禁止。
最新版可以对页面配置disableScroll，预计可以修复这个问题，待实际验证。

fullpage效果

swiper组件不支持轮播，性能差，文档模糊（部分最新版已修复）

✦ swiper组件之前并不支持轮播，最新版已修复
✦ swiper组件之前是通过设置left属性来实现动画，在小米5、华为V8等高端等安卓机上能够感受到明显的卡顿，当然原因是X5内核引起的。最新版已修复，换成了transform，性能有一定的提升。

swiper性能提升

✦ 文档并未标记可以垂直轮播，但其实是可以的。

// 简单设置vertical即可，但由于官方文档并未备注，尽量不要使用。可以自己开发一个swiper组件。
<swiper vertical="true"></swiper>

✦ swiper组件的小圆点其实是可以定制化的，但是官方文档并未说明，而且开发者工具也看不出来，只有鼠标hover到元素上的时候可以看到相关的class，简单猜测一下，最后分析出来它的实现方式。

swiper圆点的实现原理

// 圆点的父元素，用来控制圆点间的间距
.wx-swiper-dot {
    width: 30rpx;
    // 圆点，可以通过font-size修改圆点的大小，color修改圆点的颜色
    &:before {
        width: 100%;
        display: inline-block;
        font-size: 56rpx; content: '圆点编码'; } // active状态的圆点 &.wx-swiper-dot-active { &:before { color: #ffc81f; } } }

小程序WXSS的font-face的url不接受路径作为参数

可以将字体文件转换为base64，然后引用。

font-face接受base64，不接受url

同样，如果想要使用iconfont，也可以使用类似的方案，将iconfont字体文件base64之后再引入。

小程序的margin表现有问题（最新版已经修复）

之前发生margin折叠的时候，会取小的那个值。会导致底部留白等设置失效。

canvas问题

canvas并没有深入研究，目前的发现的问题主要是两个，如下图标记：
✦ 层级问题，canvas总是会盖在其他元素上面。
✦ 支持度不好，在小米5、iPhone5s画图会出现畸形。

canvas绘制饼图有Bug

最后通过CSS3的方式绘制饼图

<template name="pie">
    <view class="com-pie"> <!-- 小于50% --> <view class="percent-1" style="transform: rotate(0.4turn);"></view> <view class="percent-2"></view> <!-- 大于50% --> <view class="percent-1" style="transform: rotate(0.5turn);"></view> <view class="percent-2" style="opacity:1; transform: rotate(0.3turn);"></view> </view> </template> .com-pie { position: relative; z-index: 0; display: inline-block; width: 100rpx; height: 100rpx; line-height: 100rpx; border-radius: 50%; color: #000; background-color: #ebebeb; background-image: linear-gradient(to right, transparent 50%, #cccccc 0); overflow: hidden; .percent-1, .percent-2 { position: absolute; top: 0; width: 60%; height: 100%; left: 50%; transform-origin: center left; } .percent-1 { background-color: inherit; z-index: -2; } .percent-2 { height: 110%; opacity: 0; z-index: -1; background-color: #cccccc; } &.selected { background-color: #ffe9a5; background-image: linear-gradient(to right, transparent 50%, #ffc81f 0); .percent-2 { background-color: #ffc81f; } } }

微信小程序的rpx会出现精度问题

设置margin-left/margin-right负值，可能导致页面能够左右晃动。猜测 是rpx导致的精度问题。
rpx本质上会转换为px，在不同宽度的设备上，实际的rpx值会转换为带小数的px值，四舍五入可能出现问题，之前使用rem布局的时候在QQ浏览器遇到过类似的问题。

rpx精度问题

wx.request表现不合理，并且携带特殊字符会报错

✦ 请求返回404错误，也会触发success回调。
不要想当然的认为会触发fail回调，判断一个请求成功或失败，请使用wx.request返回的状态来判断。只有不符合规范的请求，才会触发fail。

wx.request回调

✦ 请求的数据中，如果有特殊字符（比如\u2820），会报错。
只会在真机上出现，开发者工具没毛病。估计会有更多的特殊字符会导致这个问题。

特殊字符导致wx.request挂掉

开发者工具，切换页面的时候，有时候wxml不会同步切换

希望微信什么时候能解决一下。

微信小程序给wxml模板赋值的时候，解构放到前面可能会报错

最新版会遇到这个问题，老版本虽然不会报错，但是在部分真机上会出现问题。
原因未知，遇到这个问题的朋友可以考虑绕过去。

解构赋值导致报错

微信小程序的scroll-view暴露的bindscroll函数并不能实时监听

依赖实时获取滚动位置的功能不能实现。比如滚动时toolbar的动态隐藏和显示。

最新版开发工具不能关掉自动刷新

微信小程序的会默认监听文件变化，然后自动刷新。
但不足的是每次都是全量刷新，而不是模块的热替换，反而会影响开发速度，尤其对于喜欢频繁Command + S的开发者，你会发现你的小程序在不断的刷新。建议关闭。

建议关闭监听文件变化

但最新版开发者工具，不勾选也会自动刷新。

微信小程序不支持requestAnimationFrame

微信小程序不支持requestAnimationFrame，所以部分性能优化做不了。不支持的原因未知。

Page.onload函数可以接受参数

该参数是有URL决定的，也就是URL携带的参数。
官方文档这块写的有点混淆，特意拿出来说一下。举个例子：url中传递的时候id=1，那么option.id=1，而不是什么option.query。

Page.onload参数文档描述混淆

不要给Page.data传入太多无用数据，会影响渲染效率，在iOS上表现特别明显

尽量传入精简的数据，保持Page.data和view间简单的绑定关系即可。

真机上有概率卡死，目前不确定是代码问题还是小程序的问题。

有遇到类似问题的朋友欢迎指出。