我正在参加「掘金·启航计划」

上篇跨端那些事之Flutter主要介绍了一些Flutter的一些原理和优缺点，小程序实现跨端主要是基于宿主App，本文主要介绍一下小程序的原理，主要以微信小程序为主。

什么是小程序

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

我们在服务号中使用的微信JSSDK本来是微信针对内部开放的一整套微信的JSBridge，后来在别人发现后用的越来越多，微信在2015年开放了一套完整的微信JSSDK供开发者使用。后为了解决服务号存在的一些问题，后续推出应用号，并在2017年7月正式上线小程序。

两者区别

• 微信公众号的开发还是普通的混合开发模式，通过微信提供的JSSDK(JSBridge)跟微信通信，可以调用微信提供的原生能力。
• 小程序改变了原来的开发方式和实现方式。虽然还是通过WebVIew的方式，但是小程序采用了全新的双线程设计，提供了完整的开发工具、发布流程、版本切换、安全处理等功能。

小程序架构设计

根据上面的架构图我们可以发现，小程序是双线程设计，渲染层和逻辑层是分开控制的。这样就可以避免混合开发中可以直接操作DOM带来的安全隐患。 两个线程之间由Native 层之间统一处理，无论是线程之间的通信，还是数据的传递，网络请求都是由Native层做转发

• 渲染层只负责页面和数据的渲染
• 逻辑层控制数据的处理变更
• 渲染层和逻辑层的数据交互是由Native层去统一处理的。逻辑层通过SetData可以改变数据驱动渲染层更新。

我们常见的‘Hello World’可以这样实现

<view>{{ msg }}</view>

// index.js
Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

小程序为什么会有更加贴近原生的体验

• HyBird采用WebVIew的方式实现，只有一个WebVIew去承载H5页面，路由管理还是由H5去控制。
• 小程序采用的是多WebVIew的方式去渲染页面，就是采用Native的渲染方式，当有新的页面打开就用新的WebVIew去覆盖到原本的WebVIew上。从而实现更加接近原生的效果。

小程序的WebVIew的开启数量是有限制的，不能超过十个，防止出现嵌套层级过深的情况。

小程序跨端

目前小程序的现状

除了我们上面主要介绍的微信小程序外，目前还存在支付宝、百度、滴滴、虎牙、QQ、字节、360等厂商的小程序。小程序可以很好的做商业闭环，将流量留在App内，所以出现了小程序百花齐放的场面。

小程序如何跨端的

这里的小程序跨端跟之前文章介绍的不太一样，之前跨端指的就是Android、IOS等不同设备的客户端，小程序因为不同厂商都推出自己的小程序，所以小程序跨端不止指跨设备还指的是跨App。 小程序跨端主要是两个方面实现的：

• 一个是小程序基于客户的宿主环境实现了设备的跨端
• 基于一些第三方工具的的编译能力实现跨App开发

第三方工具

通过上面我们了解到小程序的好处导致各大厂商的小程序百花齐放，所以我们也遇到了小程序跨App开发的问题，如果每个App的小程序都去重新开发，会导致大量的人力物力浪费，另外小程序也不支持如webpack、less等工具化的工具使用，所以出现了许多第三方工具去解决小程序跨App开发的问题。常见的第三方工具如Tour、Mpvue、uni-app等工具。

小结

小程序的优点：

• 双线程，渲染层和逻辑层并行不阻塞
• 多个webview，页面切换更流畅
• webview 预加载
• 安装包缓存
• 以及微信做了大量的优化和看不见的操作

小程序的缺点：

• 不能跳转外链网址，所以间接影响了小程序的开放性。也可能是想限制其他支付方式或功能接入。
• 不能直接分享到朋友圈，少了一个重要的推广方式。
• 需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些，但同时也保障了其安全性。

本篇小程序的一些基本原理就介绍到这里，如果感兴趣想深入了解可以自行深入探索。
跨端那些事系列到此已完结。