10分钟了解微信小程序

小程序包含一个描述总体程序的`app` + 描述各自页面的`page`。

小程序是什么

用户收到微信公众号推送的文章，是在微信内部直接打开的，用的是一个UIWebView，当微信中的WebView 逐渐成为移动web的入口，微信就有了相关的js api。

微信官方在里面加了一个默认的JS API -- WeixinJSBridge，经过它能够在页面上进行相关操做：

• 将文章分享到微信朋友圈
• 将文章直接发送给微信好友
• 关注指定用户
• 获取微信用户的头像和昵称

JS-SDK 是对 WeixinJSBridge 的包装，以及新能力的释放，将对内开放转为对外开放。解决了移动网页能力不足的问题，经过暴露微信接口使得web开发者溶有更多的能力。

浏览器显示以前会有一个白屏的过程，在移动端，受制于设备性能和网络速度。 微信离线资源存储 ，相似于`HTML5 的 Application Cache` 面向web开发者，提供基于微信内的web加速方案。经过离线存储，微信本地加载web资源不须要从昂服务端拉取，从而减小网页加载时间，提供更加优质的浏览体验。

而对于一些复杂的页面依旧会出现白屏问题，例如页面加载了大量的css或者js文件，除了白屏影响web体验的问题，还有操做反馈的缺陷，体如今：页面切换生硬和点击迟滞感。

小程序的优点

页面渲染方式有三种

1. Web 渲染。

2. Native 原生渲染。

3. Web 与 Native 二者掺杂，也即咱们常说的 Hybrid 渲染。

小程序最终的呈现形式，是 WebView + 原生组件，Hybrid 方式。咱们结合以前对小程序的指望来看：

• 开发门槛：Web 门槛低，不过 Native 也有像 RN 这样的框架支持

• 体验：Native 体验比 Web 不要好太多，Hybrid 在必定程度上比 Web 接近原生体验

• 版本更新：Web 支持在线更新，Native 则须要打包到微信一块儿审核发布

• 管控和安全：Web 可跳转或是改变页面内容，存在一些不可控因素和安全风险

总地看来，小程序选择了 Hybrid 的渲染方式，能够用一种近似 Web 的方式来开发，而且还能够实如今线更新代码。同时，引入原生组件有如下好处：

• 扩展 Web 的能力。好比像输入框组件（input, textarea）有更好地控制键盘的能力

• 体验更好，同时也减轻 WebView 的渲染工做

• 绕过 setData、数据通讯和重渲染流程，使渲染性能更好

小程序与普通网页开发的区别

区别主要体如今如下3方面：

• 语言
• DOM/BOM操做
• 环境、平台兼容

小程序主要开发语言是js，和普通网页具备很大类似性。对于前端开发者来讲，从网页开发迁移到小程序成本不高。

可是​网页开发渲染线程和脚本线程是互斥的，这也是为何长时间的脚本运行可能会致使页面失去响应，而 小程序将二者分开，运行在不一样线程中，逻辑层运行在JSCore中，并无完整的浏览器对象，所以缺乏DOM API和BOM API 。这一区别致使一些库jQuery/Zepto等，在小程序中无法运行。另外JSCode环境和NodeJS环境不一样，因此一些NPM包在小程序中没法运行。

咱们可使用客户端系统的 JavaScript 引擎，iOS 下的 JavaScriptCore 框架，安卓下腾讯 x5 内核提供的 JsCore 环境。经过提供一个沙箱环境来运行开发者的 JavaScript 代码来解决。这个沙箱环境只提供纯 JavaScript 的解释执行环境，没有任何浏览器相关接口。

网页开发须要面对各式各样的浏览器，PC须要面对IE/Chrome/QQ浏览器等，在移动端须要Safari/Chrome/以及iOS、Android系统中各式各样WebView。小程序开发过程当中须要面对的是两大操做系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

小程序运行环境：

身份识别

小程序的 AppID 至关于小程序平台的一个身份证

文件说明 developers.weixin.qq.com/miniprogram…

页面组成

一个小程序主体部分由三个文件组成，必须放在项目的根目录，以下：

一个小程序页面由四个文件组成，分别是：

json配置

json是一种数据格式，并非编程语言，在小程序中，json扮演的静态配置角色。

1） 小程序配置

app.json 是当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等

2）工具配置

每一个项目的根目录都会生成一个 project.config.json 用于进行个性化配置，例如界面颜色、编辑配置等，切换另一个电脑不须要从新配置。

3）页面配置

page.json 单独定义每一个页面的属性，好比顶部颜色、是否容许下拉刷新等

WXML模版

html是用来描述当前页面的结构，css描述样子，js处理页面和用户交互逻辑。

WXML和HTML的区别

• 标签名
• 特殊属性，避免操做dom

小程序对经常使用的组件进行包装，提升开发效率。另外，当项目愈来愈大的时候，你的代码会充斥着很是多的界面交互逻辑和程序的各类状态变量，显然这不是一个很好的开发模式，所以就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来讲就是不要再让 JS 直接操控 DOM， JS 只须要管理状态便可，而后再经过一种模板语法来描述状态和界面结构的关系便可。因而就多了一些`wx:if`这样的属性以及这样的表达式来响应用户行为

WXSS和CSS区别

• 新增了尺寸单位rpx
• 提供了全局的样式和局部样式
• 仅支持部分 CSS 选择器

开发者须要考虑到收集设备到屏幕会有不一样的宽度和设备像素比，采用一些技巧来换算。WXSS在底层支持新的尺寸单位rpx，免去换算烦恼。浮点运算，可能会存在误差

小程序宿主环境

微信客户端给小程序提供的环境叫宿主环境，小程序借助宿主环境分红渲染层和逻辑层，其中WXML和WXSS样式工做在渲染层，JS脚本工做在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理： 渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，因此渲染层存在多个WebView线程，这两个线程的 通讯会经由微信客户端（下文中也会采用Native来代指微信客户端）作中转，逻辑层发送网络请求也经由Native转发，小程序的通讯模型下图所示。

逻辑层和渲染层的通讯会由 Native （微信客户端）作中转，逻辑层发送网络请求也经由 Native 转发。

Exparser 框架

Exparser 是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各类组件提供基础的支持。小程序内的全部组件，包括内置组件和自定义组件，都由 Exparser 组织管理。Exparser 特色包括：

1. 基于 Shadow DOM 模型：模型上与 WebComponents 的 ShadowDOM 高度类似，但不依赖浏览器的原生支持，也没有其余依赖库；实现时，还针对性地增长了其余 API 以支持小程序组件编程。

2. 可在纯 JS 环境中运行：这意味着逻辑层也具备必定的组件树组织能力。

3. 高效轻量：性能表现好，在组件实例极多的环境下表现尤为优异，同时代码尺寸也较小。

其余小程序框架及其对比

• mpvue

mpvue 继承自 Vue.js，其技术规范和语法特色与 Vue.js 保持一致。支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。 框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。

快速上手教程 ：mpvue.com/mpvue/quick…

能力：

1. 完全的组件化开发能力：提升代码复用性
2. 完整的 Vue.js 开发体验
3. 方便的 Vuex 数据管理方案：方便构建复杂应用
4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. H5 代码转换编译成小程序目标代码的能力

• Taro

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现现在市面上端的形态多种多样，Web、React-Native、微信小程序等各类端大行其道，当业务要求同时在不一样的端都要求有所表现的时候，针对不一样的端去编写多套代码的成本显然很是高，这时候只编写一套代码就可以适配到多端的能力就显得极为须要。

•  支持使用 npm/yarn 安装管理第三方依赖。
•  支持使用 ES7/ES8 甚至更加新的 ES 规范，一切均可自行配置。
•  支持使用 CSS 预编译器，例如 Sass 等。
•  支持使用 Redux 进行状态管理。
•  支持使用 Mobx 进行状态管理。
•  小程序 API 优化，异步 API Promise 化等等。

Taro 相对来讲是个不错的选择，社区的活跃度以及反馈都是远远超过其余竞品的，另外也支持编译为多端小程序（其实还能编译成 React Native 和 H5）。惟一的问题应该是限制了你必须使用 React 技术栈。

• WePY 

是小程序上最先的一款类 Vue 语法的开发框架。WePY 2 是基于小程序原生组件实现组件化开发。所以 WePY 2 支持的最低版本小程序基础库为 1.6.3。

WePY 2 的设计思想

1. 非侵入式设计 WePY 2 运行于小程序之上，是对小程序原有能力的封装和优化，并不会对原有小程序框架有任何改动或者影响。

2. 兼容原生代码 可以兼容原生代码，即部分页面为原生，部分页面为 WePY。同时作到无需任何改动便可引用现有原生开发的小程序组件。

3. 基于小程序原生组件实现组件化开发 小程序原生组件在性能上相较以前有了很大的提高。所以 WePY 2 彻底基于小程序原生组件实现，不支持小程序基础库 < 1.6.3 的版本。

4. 基于 Vue Observer 实现数据绑定 数据绑定基于 Vue Observer 实现，同时为其定制小程序特有的优化。

5. 更优的可扩展性 对于 core 库提供 mixin、hooks、use 等方式进行开发扩展，对于 cli 编译工具提供更强大的插件机制方便开发者能够侵入到编译的任何一个阶段进行个性化定制的编译。