4th 小程序技术选型

项目地址: https://github.com/mirrorhanyu/WeGit

扫码体验

mini-program-qrcode

微信在设计小程序时，采用了自己定义的文件类型，包含 .json 后缀的配置文件，.wxml 后缀的模版文件，.wxss 后缀的样式文件和 .js 的脚本逻辑文件。对于接触过前端编程的开发者来说，微信原生开发的上手难度不会很大。

但是我最终没有选择微信原生开发的原因，一是的确二者还是有所区别需要额外学习，并且相互切换可能会导致大型精分现场。二是，得益于微信开发社区提供的各种第三方开发框架，避免了重复造轮子和项目基础设施搭建的繁琐操作，可以更加注重在业务逻辑的编写上。

目前，使用比较多的微信开发框架有:

• wepy:
  
  腾讯的亲儿子，类 Vue 开发风格。基于小程序原生组件实现组件化开发，是对小程序原有能力的封装和优化。
  
  Github stars: 18496
  
• mpvue:
  
  美团的亲儿子，框架直接基于 Vue 核心，修改了 runtime 和 compiler 使程序可以在微信小程序环境中运行。
  
  Github stars: 18151
  
• taro:
  
  京东的亲儿子，类 React 开发风格，名字来自于实力最强的奥特曼。
  
  Github stars: 20620
  

GitHub 数据收集于 July, 31st, 2019

综合考虑每个框架更新维护的频率，社群的活跃程度。

本来还有点纠结的我，被 Taro 的清爽舒服的官方文档给吸引了。果然各行各业还是难逃看脸定律。

扯点野棉花:

mpvue 和 taro 都是多端统一开发框架，支持一套代码，生成微信，百度，头条，支付宝等小程序。

当时选择 taro 还有一点原因是之前用 react + redux 写过一个 Chrome 插件，比较熟悉。（不得不说，这个广告有点生硬）

mpvue 后来也尝试写过一个小 demo，简单体验了下双向绑定，过渡动画，用起来非常舒服方便。

对比了下，react 组件是函数，非常灵活，所以 react 说它拥有完全的 javaScript 能力。而 vue 组件则是高度封装的函数，高度封装下屏蔽了很多细节，按照框架的条条框框写上去就行，所以体验上会觉得上手比较简单。

至于如何选择，也就看个人了。

ui 库

taro 框架选定后，自然就关注到 taro-ui 这个组件库。不得不说，颜值也是在线的。

体验下来有几点感受:

1. 主题样式支持覆盖，可以自行定义主题。
2. TabBar 底部标签栏在使用时需要注意。项目中，我采用的方式是，根据底部 tab 选择情况，在同一个 page 里展示不同的 components，也就是小程序中的 Trending，Activity，Search 等。这样做有点难处理的地方就是，小程序的 pullDownRefresh 是在 page 上监听下拉 events，我需要根据当前展示的 component 去选择 refresh 对应的网络请求。个人觉得可以直接用微信原生的方式，在 app.json 里配置 tabBar，每个 tab 对应一个 page。
3. Tabs 标签页在上滑操作中，不是默认悬停在上方，用户在滑动过程中可能不记得当前 tab 的具体内容了。
4. List 列表无法自定义详细内容的长度，会默认使用省略号即使还有很大的空间没有利用起来。
   总体来说，组件库非常丰富，适用于快速开发迭代。如果有时间还是自己画组件会更加灵活。

语言

当时在选择 Javascript 和 Typescript 的时候，毅然决定选择没用过的 ts。边写边谷歌，后来发现代码中有相当多的不合理的使用。

It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

typescript 作为 javascript 的严格超集，提供了可选的静态类型的支持 (当然如果任性的将所有类型指定为 any 就另说了)。

直观好处就是 IDE 能智能提示了，有些低级的错误能在程序运行之前就发现，而且当代码量大起来的时候，有了类型，每个对象的属性，方法的参数，都一目了然。

这点在写第三方库提供接口，或者重构时相当有帮助。

markdown 渲染库

在展示 repo 的 readme时，需要解析和渲染 markdown。research 之后发现比较多的是:

• wxParse
  Github stars: 6488，但是最后维护时间是 2017 年，所以决定弃用了。
• towxml
  Github stars: 827
• wemark
  Github stars: 901

GitHub 数据收集于 July, 31st, 2019

在快速尝试后决定使用 wemark。

使用理由及体验:

1. 文档给出了在 mpvue 和 taro 的使用教程。同时也可以参考这个 commit 引入wemark
2. 有些使用方式没有在文档直接给出，可以阅读源码找到。比如在使用时记得给出 baseurl 否则会出现 404。
3. wemark.wxml 在测试过程中发现 wx:key 重复的问题，console 里会有 warning，后续可以关注下有没有修复。