Toolbar组件

// components/toolbar/index.js 文件 // 仅提供默认值，不需要和page中的数据保持同步 let defaultData = { isPraised: false, praiseCount: 0, showPraiseIcon: false, }; // 切换点赞状态 function togglePraise() { // 本质上是修改Page.data中的toolbarData } // 返回上一级 function navigateToBack(wx) { wx.navigateBack({ delta: 1 }); } module.exports = { defaultData, togglePraise, navigateToBack } // pages/articles/show.js 文件 import Toolbar from '../../components/toolbar/index.js'; let pageConfig = { data: { // 其他数据 id: 0, // Toolbar数据，单独的一份数据，便于维护 toolbarData: Toolbar.defaultData }, // 点赞或者取消赞 togglePraise: function() { let me = this; Toolbar.togglePraise.call(me); } } // 这儿的组件化并不是真正的组件化 // 而是将组件相关的逻辑和函数抽离到单独的文件中，保证Page代码清晰。 // 同时也为这部分组件逻辑复用提供了可能。 // 本质上来说，抽离出的组件都是“操作Page.data的工具函数”，他们也是纯函数，和“操作state的reducer”类似。

这种Redux的组件化解决方案既简单又好用，保持一定的代码规范即可。这样设计当然是为了复用，同时也让Page的逻辑保持极度精简。

开发中遇到了哪些难点 && 微信小程序有多少坑？

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

富文本解析

微信小程序并不支持HTML标签，所以对于富文本解析来说，难度较大，而且有些功能还没有办法实现，比如：iframe视频、连接跳转等

这块功能建议由后台统一转换，如果非得前端转换，建议参考下面的思路。

非常感谢 wxParse 这款组件，替我省了不少时间。推荐大家使用，期间遇到一些问题，也分享给大家。

wxParse 默认层级只支持10层html嵌套，如果想要支持更深的层级，在wxParse.xml复制几份template即可。

wxParse 提供了图片加载成功的回调 wxParseImgLoad ，很好用。但如果富文本中的图片已经预设宽高比，那么可以不用依赖该回调，在html2jons.js中根据屏幕宽度直接计算出图片高度，先占位，可以避免页面频繁抖动的问题。

如果你的富文本中有自定义模块，对wxParse.xml中的template进行改造即可。

自定义模块样式

数据扁平化

具体如何扁平化，请移步上一篇博客 State设计，Redux 开发第一步 。

这儿只简单介绍下扁平化应用场景：

好奇心日报的研究所是三级表结构： 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，简单猜测一下，最后分析出来它的实现方式。