从微信小程序正式发布到现在已经过去了几个月了，发布前所有人仿佛发现了金矿的入口，早早地做好能做的一切准备等待着入口的开启，当所有人争前恐后地进入矿洞以后，收获却是寥寥无几。目前，我用过的小程序一个是开发者所用的小程序示例，一个是提供免费来推广的摩拜单车。
在小程序整体推广情况不容乐观的情况下，现在更多的开发应该属于防御性质的，毕竟小程序开发成本还是有很大优势的。（为了推广小程序，微信又提供了附近的小程序、与公众号关联等形式，但是在我感觉还是有些鸡肋。）

这次环球网小程序的开发，页面包括两个tab页、两个新闻列表页和两种详情页，功能简单，熟悉小程序的组件和API很快就可以完成。关于小程序配置、组件、API的使用，可以在官网查看，这里主要拿手机web站（手机环球网）和小程序（环球网精选新闻）做个比较。

首先需要注意的是，小程序作为微信下面的功能，不仅仅是提供了开发使用的组件、API等，另外还有一套设计。这套设计不是强制要求的，但是可以使得整个小程序给人更规范好用的感觉，所以开发前推荐大家好好阅读下这份指南。

Web三剑客

WXML类似于HTML，可以称为一种模板引擎，包括数据绑定、循环、条件、复用等功能，标签数量减少，并提供了封装好的组件。标签数量的减少好处在于不需要记忆那么多标签，与HTML添加更多标签语义化相反，可能是因为小程序并不需要爬虫，并且可以保证能正常加载css吧（现在加载不到css的情况也确实很少发生）。
WXSS在CSS的功能上添加了一些适合微信（移动端）的尺寸，以及导入功能，选择器减少了一些，其他变化不大。
JS方面主要是不存在了DOM的操作等，这样就限制了很多功能的实现，使得小程序更加简洁、高性能。也就是几乎所有的JS里操作的都是数据，通过数据绑定再反应到页面上，这和现在流行的前端框架思路是一致的，只是小程序完全限制死了。

生命周期

也是和几乎所有的前端框架一样，小程序也提供有生命周期，生命周期功能主要是为我们提供对程序干预的时机。这个功能是很重要的，通过生命周期监听程序不同时期，不需要提前将所有数据获取，也给了我们对数据在不同时期执行不同操作的机会。

用到的组件

下拉刷新、无限加载功能的实现，小程序中配置一个回调函数即可完成，请求限流也不需要自己再去管理。轮播图使用了统一的样式，只需要一些数据和简单的配置项。
在手机环球网中的开发中，这些功能都是我重新造的轮子，好处在于我更清楚里面的实现，可以自己添加诸如延迟加载等功能，坏处是用了比较长的时间，性能方面也比较一般。
小程序中的组件就相当于别人造好的轮子，更加规范，也不需要花费时间去寻找，这样开发效率自然提升上去。问题是因为限制了JS对DOM的操作，只能使用小程序封装好的组件。

转义问题

在开发环球网的小程序时，碰到的最大问题就是新闻详情页。新闻详情页样式不那么固定，图片、段落、加粗等位置不同，所以一般都是直接存储HTML字符串的，但是微信小程序中没有提供转义标签字符串的功能。
想到的解决方案是自己解析HTML字符串，转换成一段段内容保存在数组，再通过循环在WXML中输出，这样能解析的是块级元素，如果是行内元素可能需要在数据中再嵌套数组。
在github上有开源项目wxParse，专门用来将HTML字符串转成小程序中的数据。
在wxParse中首先做得是将HTML字符串解析成类似于DOM树的对象,类似下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
 "node": "contents",
 "nodes": [
  {
   "node": "element",
   "tag": "p",
   "tagType": "block",
   "nodes": [
    {
     "node": "element",
     "tag": "img",
     "tagType": "inline",
     "attr": {
      "src": "http://a1.huanqiu.cn/images/221f8e78dbee0f7446b2093b0d7b9502.jpg"
     },
     "imgIndex": 0,
     "from": "contents"
    }
   ]
  },
  {
   "node": "element",
   "tag": "p",
   "tagType": "block",
   "nodes": [
    {
     "node": "text",
     "text": "从黄土高坡到雪域高原，从西北边陲到云贵高原，他风雪兼程，几乎走遍全国14个集中连片特困地区。他对贫困群众念兹在兹、心有牵挂。",
     "textArray": [
      {
       "node": "text",
       "text": "从黄土高坡到雪域高原，从西北边陲到云贵高原，他风雪兼程，几乎走遍全国14个集中连片特困地区。他对贫困群众念兹在兹、心有牵挂。"
      }
     ]
    }
   ]
  }
  ...
}

然后通过循环判断，使用WXML中的模板和设置一定的样式模拟不同的HTML标签。
ps：看小程序的开发Q&A，小程序应该是有计划添加对WXML中的合法标签的转义的。

总结

小程序对界面和功能上都有很多限制，大多数情况下的都是对配置、组件、API的使用，以及直接对数据的操作。最重要的概念理解可能就是数据绑定，通过数据的修改反应到界面上，这也是目前大多数前端框架所用的方式，方便状态的维护。
对前端来说，小程序开发是简单的，不需要考虑兼容性问题，也不能封装需要修改DOM的组件。