了解一下小程序及开发模式

为什么要讲这个主题？

实际上是本人1年来多来对小程序技术栈的学习分享（基础之一）。

小程序及其开发模式的持续热度。

作为一个前端或技术人员对新技术的关注。

了解一下开发模式，可以类比到我们公司现在及未来的项目。

一、首先你要知道什么是小程序

2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。简单来说，小程序就是一个不需要下载和安装的应用。只要在“小程序”入口中搜索自己需要的小程序，或者通过扫描小程序码就能使用它。几乎任何人和企业、组织都可以拥有属于自己的小程序。

小程序瞄准的是“轻量级服务”，所以小程序能做到的是“满足用户大部分的基础需求”，因此很多服务类的大企业基本都有属于自己的小程序，如肯德基、星巴克、农业银行、摩拜单车等。

小程序主要的优点：

不需要下载（不占手机内存）

没有广告、没有游戏，用户可直接体验等同于APP的功能

使用起来比较流畅，不会出现卡顿

为很多中小型公司或者节省了开发APP的成本

可以捆绑在公众号上，让关注公众号的粉丝体验。

朋友圈的这张图，诠释了小程序的优点

参考数据：

https://mp.weixin.qq.com/s/t-odsKSbfLkUvANj6AueAA
https://mp.weixin.qq.com/s/hTMzlcjFaEVX_km0sxDrYg

小程序主要的缺点：

小程序在微信没有集中入口。

微信不会推出小程序商店，也不会向用户推荐小程序。

小程序没有订阅关系，没有粉丝，只有访问量。

小程序不能推送消息。

小程序不能做游戏。

用户均为微信用户，可以说这些小程序是没有自己的用户的。

目前只有安卓系统的手机可以添加图标到桌面

二、HelloWorld

一个完整的小程序页面包含了以下不同类型的文件:

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

官方文档: https://developers.weixin.qq.com/miniprogram/dev/

资料集合: https://mp.weixin.qq.com/s/t-odsKSbfLkUvANj6AueAA

三、开发模式拆解

找一个视角去拆解，即 MVC（Model-View-Controller）。

1. 数据如何获取

通过 HTTPS 请求去服务端获取数据。

支持 HTTPS 是最基本的，小程序对 HTTPS 有限制，除了要求通信协议是 HTTPS，出现的域名必须提前预设之外，还将应用层协议限定到了 JSON 格式下。这一点，可能比任何一个已有客户端平台都更为严苛。

可以在本地文件系统上存取数据。

小程序提供了丰富的 API 供开发者在手机系统上存取文件。可用本地文件来做缓存、状态记忆等，为开发提供了便利。

可以读写设备中的一部分信息。

小程序开放了一些 API，帮助开发者获得设备上的基本信息，比如手机型号、屏幕尺寸、网络状态等。较为有价值的是可以选择获取手机上的图片等多媒体文件，这给做图像应用提供了可能；并且，它还提供了罗盘、重力感应器、地理位置等信息，对开发者理解用户所处的环境大有裨益。

官方文档: https://developers.weixin.qq.com/miniprogram/dev/api/

举个例子

// 先调用登录接口，获得请求码
wx.login({
    success: function (res) {
        // 获取到请求码，继续请求用户的基本信息
        var code = res.code
        wx.getUserInfo({
            success: function (res) {                
                // 获取到了加密的用户信息，去服务端解密并存储
                var userData = res.encryptedData                
                var iv = res.iv
                wx.request({
                    url: 'https://my_account/...',
                    data: {
                        code: code,
                        user_data: userData,
                        iv: iv
                    },
                    success: function(res) {                        
                        // 在服务器上，解析并生成自己的账号验证信息
                        var user = res.data.user                        
                        var token = res.data.token                        
                        // 并且还可以存在本地存储上，供下次打开使用
                      wx.setStorage({
                            key: 'my_token',
                            data: token
                      })
                    }
                })
            }
        })
    }
});

2. 界面如何呈现

在小程序中，和 HTML 对应的是 WXML，保留下来的只有 HTML 的概念，而传统的

、标签都完全被抛弃了。和 Facebook 的 React 类似，小程序引入了自己的 HTML 标签，它和这样的语义标签不同，小程序中的标签更像是传统客户端开发中的组件（或者叫控件），每个组件都有自己背后的职能和使用方式。

ReactNative Api: https://reactnative.cn/docs/button/

和 HTML 相比，小程序的 WXSS 算是比较完整地保留了 CSS 的特征。WXSS 在语义上最大的不同，一是在于它支持了相对尺寸单位 rpx（responsive pixel），每 750rpx 等价于当前设备的屏幕宽度，它的引入，把那种繁复的屏幕尺寸适配变得简单了不少。

小程序中虽然支持 ES6 标准的 JavaScript，但窗口级的 JavaScript 却完全被废弃掉了，开发者无法用 JavaScript 去调用 window、document 对象来修改界面元素完成逻辑。

小程序中的 JavaScript 其实直接对应 Node.js 的用法，用来完成后台业务逻辑，而不是直接控制交互。小程序的这个设计，使其可以用到 Virtual Dom 的方式来渲染界面，让界面数据更新时的性能优化成为可能，但付出的代价就是少了窗口级 JavaScript 的那层胶水黏合，使得很多功能的开发变得极其呆板和繁复。

官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/

3. 交互如何传导

举个实际的例子，假设开发者需要做一个滑动切换页面的效果，在小程序中该如何实现？首先，是将变量数据引入渲染页面：

可以看到，distance 是一个模版参数，它初始值为 0，表示移动的距离。通过 bindtouchstart 等函数绑定上 JavaScript 的方法，将事件回传。

movePage: function(event) {
    var status = {
        needUpdate: false,
        distance: 0
    }    
    // 处理各种事件，计算是否需要刷新，和移动方向
    if ("touchstart" === event.type) {
       // 开始计算移动
        ...
    } else if ("touchend" === event.type) {        
       // 判定移动的距离是否足够.
        ...
    } else if ("touchcancel" === event.type) {        
       // 被打断就算了.
        ...
    } else if ("touchmove" === event.type) {        
       // 计算移动距离
        ...
    }    
    // 根据移动的距离，来更新界面
    if (status.needUpdate) {
        this.setData({
            distance: status.distance
        })
    }
}

而在 JavaScript 一端，则捕获事件、计算偏移量，然后将新的偏移量送到前端界面。

类似Vue: https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class

小结

整体来看，小程序是借了 HTML5 的技术栈，行了传统客户端开发的模式，这一点和 React 等平台会比较相近，可以视为 HTML5 的一个新分支。

从设计思路看，小程序做了大量的“限制”，最大的限制是开发者其实无法通过 JavaScript 这样的编程语言直接对界面进行控制，而是通过数据驱动来间接实现。这对于缺少开发经验的人而言，是有益的事情，因为降低了理解的门槛，但对于复杂的应用来说，这个模式开发起来比较呆板，往往是一个变化多处修改，增加了理解代码的成本。

四、介绍两款小程序组件化开发框架

Wepy: https://tencent.github.io/wepy/index.html

Mpvue: http://mpvue.com

为什么要选择框架？

痛点太多

频繁调用 setData及 setData过程中页面跳闪

组件化支持能力太弱(几乎没有)

不能使用 less、jade 等

无法使用 NPM 包及 ES 高级语法

request 并发次数限制

一个页面对应4个文件，看的眼花缭乱
......

wepy项目示意图

对比

三种开发模式对比

五、延伸阅读

WeUI
https://weui.io/

Min小程序UI组件库
https://github.com/meili/min-cli

在微信小程序里实现图片预加载组件
https://aotu.io/notes/2017/01/06/wxapp-img-loader/

Weex
http://weex.apache.org/cn/

支付宝小程序的开放能力
https://docs.alipay.com/mini/introduce/auth

百度新发布的智能小程序是什么
https://mp.weixin.qq.com/s/RxBnfplK1kVQ6tcAK7Ablg