状态管理

一开始为了借鉴和复用课堂H5详情页的状态管理，引入 redux ，但由于 reducer 总是返回一个新的更新后的对象，这意味着每次 setData 时会传递全量的数据，而在小程序双线程界面渲染的数据通信模型下，传输数据量与性能正相关，因此对于数据量比较大的详情页来说，每次 action 操作都比较耗性能，体验不好。

于是改用腾讯开源的小程序状态管理方案 westore，它利用小程序 setData 函数支持以数据路径的形式传递数据的特点，通过 update 函数先进行 diff 得到最小更新的数据路径集合，然后再调用 setData 函数传递变化的数据以达到更优的性能。

可是 westore 是基于页面路径来同步数据的，如果同时存在两个相同路径的页面，则只有最新的页面会更新；例如当前页面 A （pages/course?cid=A）打开相同路径的页面 B （pages/course?cid=B）时，由于 store 数据是共享的，这时页面 B 持有页面 A 的数据，同时页面 A、B 路径（pages/course）相同，此时 westore 已经丢掉页面 A 的引用，当 westore 更新数据时只会影响到页面 B ，页面 B 返回页面 A 后，已经无法再更新页面 A 了。

对于这个问题，只要增加一个栈来记录页面路径实例，新开页面时，重置 westore 数据，页面返回时，将旧页面实例的数据同步到 westore 即可。

除此之外，H5详情页中很多复合的状态逻辑都放在嵌套较深的自定义组件中，可在小程序环境下就有点力不从心了，所以必须要将这部分常变状态和遍历逻辑提前计算，以便 westore diff 局部更新。

富文本

课堂详情页中需要展示由富文本编辑器 CKEditor 生成的课程详情，里面可能包含视频，但小程序提供的 rich-text 组件无法支持 video 标签，因此用到 wxParse 来将 HTML 文本解析成 JSON 树，然后通过 view + css 来模拟 HTML 元素进行渲染。

可是 wxParse 已经很久没有更新了，在使用过程中发现它有很多问题和局限性，以下是踩坑改造优化经验：

__缺少解码、解析和渲染完成等钩子__：由于后台 CGI 返回的 HTML 文本存在二次编码的情况，只经过 wxParse 的一次解码后仍有部分字串没有被正确解析，同时针对某些解析后的 HTML 标签需要扩展其属性等等。  
因此只能修改源码增加 beforeDiscode、afterDiscode、parsedStartTag、parsedEndTag、parsed 和 complete 等钩子来提高其灵活性。

__含有较多复杂属性的 HTML 标签无法解析出来__：主要是 wxParse 中 startTag 的正则表达式不够全面导致的。  
![](https://image.wxopen.club/content_c81f033e-2ec1-11ea-bb76-a0999b08aadb.png)  
上图无法解析出第一个 p 标签。  
修改一下 startTag 的正则表达式即可。  
![](https://image.wxopen.club/content_c830e2a2-2ec1-11ea-bb76-a0999b08aadb.png)

__12个相同 template__：wxParse 定义了 wxParse0 到 wxParse11 共 12 个 template，这 12 个 template 除了子结构调用不同的 wxParseXX template 之外其余代码都是一样，究其原因是因为小程序 template 不能递归引用，当然这种变通的处理方式有个局限性，就是它处理不了超过 12 层的结构，超过以后就解析不了，再加上小程序的机制，这样是不会报错的，导致查 bug 很困难。要解决这个问题，除了官方支持 template 递归，可以将 wxParse 改为自定义组件（暂未尝试），或者尽可能的合并 HTML 结构。例如  
![](https://image.wxopen.club/content_c83ded08-2ec1-11ea-bb76-a0999b08aadb.png)  
wxParse 解析渲染后的结果  
![](https://image.wxopen.club/content_c84c637e-2ec1-11ea-bb76-a0999b08aadb.png)  
这里可以发现每个 wxParse-inline 元素的样式完全可以合并，同时形如 wxParse-s 等元素是通过 css 来模拟 HTML 元素的，因此对于这样嵌套的行内元素，可以进行合并  
![](https://image.wxopen.club/content_c8577d18-2ec1-11ea-bb76-a0999b08aadb.png)

__a 标签作为块元素__：由于 <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element" rel="noopener" target="_blank">a 标签允许包裹其中没有交互内容的块元素</a>，wxParse 把 a 标签视为块级元素，导致解析 a 时将其前一个行内元素提前闭合了，造成显示错误。解决办法是将 a 标签从块级元素中剔除。

__不支持腾讯视频 vid__：小程序 video 仅支持视频地址和云文件 ID，但课程详情会包含腾讯视频，而腾讯视频播放路径需要通过腾讯视频 SDK 将视频 vid 转换出来，由于已经引入腾讯视频组件，VID 转换这一步可以省略交给腾讯视频组件，只需要将 wxParse template 中 video 标签改为 txv-video，同时在 wxParse 解析出 video 数据时计算出 authExt ，连同 vid 等必要字段一并提供给 txv-video 即可播放视频。考虑到课程详情中的视频播放频次不高，没必要详情展示时就生成腾讯视频组件，因此使用封面 + 播放按钮来替代，等待用户点击封面时才生成。

__wxParse 样式污染全局__：定义了 view 样式，但没有限定在 .wxParse 作用域下生效，导致影响了页面全局。

__标签内文本含有 &lt; 则解析结束标签有误__

__setData含有较多与界面渲染无关的数据__

__…__

WXML

WXML（WeiXin Markup Language）是小程序视图层的一套标签语言，它与 Vue 的模板语法很相似，但在实际开发过程中经常会遇到一些问题与限制。

数据绑定中的数据处理

在 WXML 中，数据绑定只支持简单的 js 表达式，不能调用方法。例如保留数据的小数点后两位

<view>{{num.toFixed(2)}}</view>

这种写法是不会生效的，为了弥补 WXML 中数据处理的短板，小程序提供了 WXS（WeiXin Script）脚本，可以这么做

<view>{{tools2.toFixed(num, 2)}}</view>
<wxs module="tools2">
  function toFixed(num, len) { return num.toFixed(len); }
  module.exports = { toFixed: toFixed }
</wxs>

但要注意的是

wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致，更不能使用 es6 语法。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
wxs 目前共有以下几种数据类型：number，string，boolean，object，function，array，date，regexp

template 的 data 传参

如果只看官方文档 template 说明，你可能不知道 template 的 data 传参有三种方式：

格式一：data="{{ …value1，…value2，… }}"，value 前面的 ... 是扩展运算符。
格式二：data="{{ value1，value2，… }}"。
格式三：data="{{ key1: value1，key2: value2，… }}"。

value 可以是 boolean、number、string、null、object、array。

例如 value = { a: 1, b: 2, c: 3}，那么在 template 中的使用如下：

<!-- 格式一 -->
<template name="example1">
  <view>{{a}}: {{b}}: {{c}}</view>
</template>
<template is="example1" data="{{...value}}" />

<!-- 格式二 -->
<template name="example2">
  <view>{{value.a}}: {{value.b}}: {{value.c}}</view>
</template>
<template is="example2" data="{{value}}" />

<!-- 格式三 -->
<template name="example3">
  <view>{{k.a}}: {{k.b}}: {{k.c}}</view>
</template>
<template is="example3" data="{{k:value}}" />

如果在列表渲染时，想要将列表的索引 index 在 template 中使用，可以这样做

<template name="example4">
  <view>{{index}}: {{msg}}: {{time}}</view>
</template>
<template is="example4" wx:for="{{items}}" data="{{index, ...item}}" />

除此之外还可以结合 wxs

<template name="example5">
  <view>{{msg}}: {{time}}</view>
</template>
<template is="example5" data="{{...tools.getLast(items)}}" />
<wxs module="tools">
  function getLast(items) { return items[items.length - 1]; }
  module.exports = { getLast: getLast };
</wxs>