微信小程序的发展历史回顾
微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣布其正式上线。小程序英文名是Mini Program，
是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的，用户通过扫一扫或者搜一下就可以打开应用
在小程序开发文档中，介绍小程序的技术发展史的时候开头有这么一句话：小程序并非凭空冒出来的一个概念。
当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。
也就是说其实小程序的这种赋能在技术上一直都是可以实现
小程序诞生的背景
-
原生APP
用户体验是最好的，并且可以实现的功能是最多的。但是这种方式需要从app store或者其他应用市场下载，在wifi没有覆盖的情况下让用户下载一个软件是不能接受的。另外，一般的app都会比较的大，随着使用的时间线变长，会占据系统很大的空间，例如微信，占用几个G的空间是很正常的， 而且如果不被经常用，被用户删掉的可能性是非常大的。原生app的开发是一件工程化非常高的事情，再开发的时候需要一个比较大的团队去维护，比如app的开发需要开发IOS端和安卓端两端的人员，还需要服务端的人员和运维端的人员，这部分的成本就会很庞大，如果开发的app的功能逻辑复杂，那么需要的投入就会更多
-
H5
就是手机端的网页，只要有浏览器的环境就可以运行，当然我们也可以把 网页的url地址生成一个二维码，让用户通过扫码进入项目中，再使用和传播上的成本是比较低的，而且在人员的配置上很省钱，不用养两个团队去开发维护一套产品缺点就是 用户体验是相对于原生的app来说比较差的，包括他的页面跳转都需要重新请求服务器，这也导致不能在H5上做更多的事情，因此也是没有成为主导地位的一个绝对性的原因
-
小程序
小程序因为是微信采用了特殊的技术，特别是一些控件用的都是一些系统原生的组件，所以操作起来就跟操作原生app很接近。另外你一旦打开了小程序，也就意味着他的代码是已经存储到手机上了，所以做页面跳转的时候不需要请求服务器资源了，因此用户体验是非常棒的，几乎可以接近原生app的用户体验，他能做的事情也就非常非常多了，基本上你可以看到一个小程序可以囊括原生app的绝大部分功能。另外因为底层机制的原因，他的代码体积是非常小的（控制在2M以内），所以下载一个微信小程序是非常快的。这也是用户能够接受的一个非常重要的原因 -
小总节
小程序是一个相对来说对用户的体验来说会比较好一些，并且省钱，开发效率高，可以使用开源社区的一些解决方案来实现一套代码，适配跨端多端的app
小程序与普通网页开发的区别
-
前端上手很快
小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程才可完成。
web 开发中，在用户打开一个页面的时候，我们通常会通过一个 http 地址来加载并访问一张远程页面，而在小程序中，通过协议（如：sslocal://microapp）调起小程序后，小程序会以包的形式下发到打开小程序的当前 App 上，并且装载本地 js/xml/css 文件打开小程序。所以，小程序本身没有域名（并非指 request 请求等访问能力没有域名），所以无法像 web 开发一样，使用 location 等方式进行页面跳转，也不存在“跨域”。
由于小程序的 js 是运行在 jscore 中的，而非 webview 中，所以没有 DOM/BOM，进而无法使用 window 等浏览器提供的全局变量，所以很多在浏览器中可以运行的 NPM，在小程序中也无法直接使用。
-
代码开发
在代码层面上我们只是需要去熟悉小程序的 api，而且很多的api为了适配前端同学的开发，在api的设计上是比较符合前端同学的开发思维的，在学习成本上来说其实相对较小，原生的小程序开发的结构和vue的写法有一些相似，如果我们使用过vue，那么上手其实是很快的
| 运行环境 | js逻辑层 | 视图渲染层 |
|---|---|---|
| IOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | 自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的 |
| 小程序开发者工具 | NW.js | Chromium Webview |
| PC | Chrome 内核 | Chrome 内核 |
| Mac | JavaScriptCore | WKWebView |
- JavaScript 支持情况 和 运行限制
- 不支持使用 eval 执行 JS 代码
- 不支持使用 new Function 创建函数
- 小程序的运行机制
- 前台/后台状态
- 小程序启动
- 冷启动
- 热启动
- 更新机制
- 未启动时更新
- 启动时更新
- 小程序的调试
- 一般是使用微信开发者工具进行开发，因为我们的视图的渲染只能在微信开发者工具 中进行调试
- 由于 微信开发者工具有时候会有点卡，所以一般会在vscode中去编码，然后在微信开发者工具中去调试视图层
小程序中的一些限制
| 支持域名数 | 每个域名绑定小程序数量 | 修改域名次数 | 使用web-view | 添加的业务域名 |
|---|---|---|---|---|
| 每个小程序帐号仅支持配置最多20个域名； | 最多20个小程序 | 最多修改域名50次 | 公众平台后台域名配置成功后 | 必须是HTTPS加密的，也就是申请过SSL证书的 |
不能下载依赖包
微信小程序的开发(以原生的小程序和vue开发对比)
- 微信小程序和Vue写法的区别
- 循环遍历：小程序是 wx:for="list"， vue是v-for="inforin list"
- 调用data：小程序是 this.data.initData，vue是 this.initData
- 赋值：小程序是 this.setData({ info:1 })，vue是直 接this.info=1
- 小程序的双向绑定和vue哪里不一样
- 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({ init: xxx })
- 小程序的生命周期函数
- onLoad——页面加载，调一次
- onShow——页面显示，每次打开页面都调用
- onReady——初次渲染完成，调一次
- onHide——页面隐藏，当navigateTo或底部tab切换时调用
- onUnload——页面卸载，当redirectTo或navigateBack时调用
- 小程序内的页面跳转
- wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
- wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
- wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
- wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层 -wx.reLaunch——关闭所有页面，打开到应用内的某个页面
taro 和
小程序的开发和小程序多端框架
- 原生开发
使用官方的文档api进行开发
但是 由于不同的头部公司在制定小程序标准的时候，并没有统一。 - 多端框架 一套代码，可以打包成适用于多端的小程序代码
多端支持度如何（2020年04月）
| 平台 | 微信原生小程序 | taro | uni-app | mpvue | wepy | chameleon |
|---|---|---|---|---|---|---|
| 微信小程序 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 支付宝小程序 | ==不支持== | 支持 | 支持 | 支持 | ==不支持== | 支持 |
| 百度小程序 | ==不支持== | 支持 | 支持 | 支持 | ==不支持== | 支持 |
| 字节跳动小程序 | ==不支持== | 支持 | 支持 | 支持 | ==不支持== | 支持 |
| 京东小程序 | ==不支持== | 支持 | ==不支持== | 支持 | ||
| H5端 | ==不支持== | 支持 | 支持 | 支持 | ==不支持== | 支持 |
| QQ小程序 | ==不支持== | 支持 | 支持 | 支持 | ||
| 钉钉小程序 | ==不支持== | 支持 | ||||
| 淘宝小程序 | ==不支持== | 支持 | ||||
| ReactNative | ==不支持== | 支持 | ||||
| 快应用 | ==不支持== | 支持 | 支持 | 支持 | ||
| 跨端支持度：uni-app > taro > chameleon > mpvue >wepy、原生微信小程序 |
开发上的体验
| 维度 | 微信原生 | taro | uni-app | mpvue | wepy | chameleon |
|---|---|---|---|---|---|---|
| DSL | 微信小程序写法（类vue） | 支持使用 React/Vue/Nerv 等框架来开发,最新版本是 3.x | uni-app 是一个使用 Vue.js 开发所有前端应用的框架 | vue | 类vue | 类vue |
| 总体的学习成本还好，尤其是使用过vue框架和react框架的 | ||||||
| DSL：指的是针对特定应用领域而设计使用的计算机语 |
github流行度 数据来自于 2021-04-05
| 维度 | 微信原生小程序 | taro | uni-app | mpvue | wepy | chameleon |
|---|---|---|---|---|---|---|
| star | 28.6k | 30.5k | 20.2k | 21.2 | 12.5k | |
| 贡献者数量 | ||||||
| 案例 | 丰富 | 非常丰富 | 丰富 | 丰富 | 丰富 | 较少 |
| 自建开发者社区 | 无 | 有 | 无 | 无 | 无 | 无 |
| 流行度：暂时从 GitHub 的 star 来看 |
开发工具
| 维度 | 微信原生 | taro | uni-app | mpvue | wepy | chameleon | |
|---|---|---|---|---|---|---|---|
| DSL | 类vue | react | vue | vue | 类vue | 类vue | |
| IDE/图形化开发工具 | 微信开发者工具 | 有 | 无 | 无 | 无 | 无 | 无 |
| typescript | 无 | 有 | 有 | 有 | 有 | 无 | |
| 样式支持 | sass、less、stylus | sass、less、stylus、css Modules | sass、less、stylus | sass、less、stylus | sass、less、stylus |
学习门槛
主流跨端框架基本都遵循React、Vue（类Vue）语法
复用工程师的现有技术栈，降低学习成本，而这也成为一个跨端框架是否可以被快速的使用的一个因素，如果语法差异大，其实对我们来说其实就会增加很大的学习成本
多端适配小程序框架
多端适配小程序框架，我们先讲一下我们的react的虚拟dom 首先虚拟dom呢是一段js对象，虚拟DOM 是描述页面中dom的嵌套关系的， 因为DOM节点在安卓ios端无法识别，只能在浏览器识别，但是虚拟DOM可以被识别， 生成原生的应用组件，可以在原生应用上显示，所以虚拟dom是可以增加我们的跨端能力的
在我们的react中，会先把我的jsx 通过 babel 转义成我们的 虚拟dom，然后呢再去调用react里面提供的render方法， 去遍历循环这个虚拟dom的对象去生成对应的html
小程序的优点
- 快速的加载
- 更强大的能力（可以依托原生的app，提供很多基于原生开放的能力或者api，比如预览，获取手机本地图库等）
- 接近原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
- 可以倚靠微信的社交流量
- 轻量化 即用即走
- 开放的入口比较多 扫码 发送朋友，搜索，附近的小程序，公众号关联，群发文章嵌入，公众号菜单链接
小程序的缺点或者限制
- 留存问题：不能主动的接收到用户交互的信息，类似app的推送，只能通过短信或者公众号的推送，触达到用户
- 受控于微信：会受到很多来自微信的限制和监管，如果被封了，会大面积的影响业务
- 大小限制不能超过2M，不能打开超过5个层级的页面
- 依托微信，不能开发后台管理功能
- 部署需要审核，晚上审核的时间较长
小程序的前景和未来
- 业绩：2020年小程序日活用户超过3亿人，总成交金额达到8000亿元
- 现有小程序的数量市场巨大的，无论是现在的生态还是社区的建设都是越来越完善了
本次分享的总结
- 认识微信小程序的开发和对比我们网页开发的区别
- 小程序的现状
- 跨端小程序的解决方案以及各自的特点，为我们后续的技术选型作为参考
- 各端小程序的生态
- 小程序的前景
参考文献：
Chameleon 变色龙
Chameleon-git-url
WePy
WePy-git-url
mpvue
mpvue-git-url
taro
taro-git-url
小程序发展史
小程序简介及小程序技术发展史
滴滴跨端框架Chameleon1.0正式发布
Taro原理总结
