10分钟了解微信小程序

1,885 阅读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 相当于小程序平台的一个身份证


页面组成


一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
一个小程序页面由四个文件组成,分别是:



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 模型:模型上与 WebComponentsShadowDOM 高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他 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 编译工具提供更强大的插件机制方便开发者可以侵入到编译的任何一个阶段进行个性化定制的编译。