小程序是什么
- 将文章分享到微信朋友圈
- 将文章直接发送给微信好友
- 关注指定用户
- 获取微信用户的头像和昵称
小程序的优势
页面渲染方式有三种
Web 渲染。
Native 原生渲染。
Web 与 Native 两者掺杂,也即我们常说的 Hybrid 渲染。
小程序最终的呈现形式,是 WebView + 原生组件,Hybrid 方式。我们结合之前对小程序的期望来看:
开发门槛:Web 门槛低,不过 Native 也有像 RN 这样的框架支持
体验:Native 体验比 Web 不要好太多,Hybrid 在一定程度上比 Web 接近原生体验
版本更新:Web 支持在线更新,Native 则需要打包到微信一起审核发布
管控和安全:Web 可跳转或是改变页面内容,存在一些不可控因素和安全风险
总地看来,小程序选择了 Hybrid 的渲染方式,可以用一种近似 Web 的方式来开发,并且还可以实现在线更新代码。同时,引入原生组件有以下好处:
扩展 Web 的能力。比如像输入框组件(input, textarea)有更好地控制键盘的能力
体验更好,同时也减轻 WebView 的渲染工作
绕过 setData、数据通信和重渲染流程,使渲染性能更好
小程序与普通网页开发的区别
- 语言
- DOM/BOM操作
- 环境、平台兼容
我们可以使用客户端系统的 JavaScript 引擎,iOS 下的 JavaScriptCore 框架,安卓下腾讯 x5 内核提供的 JsCore 环境。通过提供一个沙箱环境来运行开发者的 JavaScript 代码来解决。这个沙箱环境只提供纯 JavaScript 的解释执行环境,没有任何浏览器相关接口。
身份识别
页面组成
json配置
WXML和HTML的区别
- 标签名
- 特殊属性,避免操作dom
WXSS和CSS区别
- 新增了尺寸单位rpx
- 提供了全局的样式和局部样式
- 仅支持部分 CSS 选择器
小程序宿主环境
逻辑层和渲染层的通信会由 Native (微信客户端)做中转,逻辑层发送网络请求也经由 Native 转发。
Exparser 框架
Exparser
是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。小程序内的所有组件,包括内置组件和自定义组件,都由 Exparser
组织管理。Exparser
特点包括:
基于
Shadow DOM
模型:模型上与WebComponents
的ShadowDOM
高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他 API 以支持小程序组件编程。可在纯 JS 环境中运行:这意味着逻辑层也具有一定的组件树组织能力。
高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小。
其他小程序框架及其对比
- mpvue
mpvue
继承自 Vue.js
,其技术规范和语法特点与 Vue.js
保持一致。支持 微信小程序
、百度智能小程序
,头条小程序
和 支付宝小程序
。 框架基于 Vue.js
,修改了的运行时框架 runtime 和代码编译器 compiler 实现,使其可运行在小程序环境中,从而为小程序开发引入了 Vue.js
开发体验。
快速上手教程 :mpvue.com/mpvue/quick…
能力:
- 彻底的组件化开发能力:提高代码复用性
- 完整的
Vue.js
开发体验 - 方便的
Vuex
数据管理方案:方便构建复杂应用 - 快捷的
webpack
构建机制:自定义构建策略、开发阶段 hotReload - 支持使用 npm 外部依赖
- 使用
Vue.js
命令行工具 vue-cli 快速初始化项目 - 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 的设计思想
非侵入式设计 WePY 2 运行于小程序之上,是对小程序原有能力的封装和优化,并不会对原有小程序框架有任何改动或者影响。
兼容原生代码 能够兼容原生代码,即部分页面为原生,部分页面为 WePY。同时做到无需任何改动即可引用现有原生开发的小程序组件。
基于小程序原生组件实现组件化开发 小程序原生组件在性能上相较之前有了很大的提升。因此 WePY 2 完全基于小程序原生组件实现,不支持小程序基础库 < 1.6.3 的版本。
基于 Vue Observer 实现数据绑定 数据绑定基于 Vue Observer 实现,同时为其定制小程序特有的优化。
更优的可扩展性 对于 core 库提供 mixin、hooks、use 等方式进行开发扩展,对于 cli 编译工具提供更强大的插件机制方便开发者可以侵入到编译的任何一个阶段进行个性化定制的编译。