微信小程序开发学习

---恢复内容开始---

⼀、认识⼩程序

1.1 ⼩程序介绍

微信⼩程序是⼀种全新的连接⽤户与服务的⽅式，它可以在微信内被便捷地获取和传播，同时具有出⾊的使⽤体验。

1.2 ⼩程序与普通⽹页开发的区别

⼩程序的主要开发语⾔是 JavaScript ，⼩程序的开发同普通的⽹页开发相⽐有很⼤的相似性。对于前端开发者⽽⾔，从⽹页开发迁移到⼩程序的开发成本并不⾼，但是⼆者还是有些许区别的。

⽹页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运⾏可能会导致页⾯失去响应，⽽在⼩程序中，⼆者是分开的，分别运⾏在不同的线程中。⽹页开发者可以使⽤到各种浏览器暴露出来的 DOM API，进⾏ DOM 选中和操作。⽽如上⽂所述，⼩程序的逻辑层和渲染层是分开的，逻辑层运⾏在 JSCore 中，并没有⼀个完整浏览器对象，因⽽缺少相关的DOM API和BOM API。这⼀区别导致了前端开发⾮常熟悉的⼀些库，例如 jQuery、 Zepto 等，在⼩程序中是⽆法运⾏的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以⼀些 NPM 的包在⼩程序中也是⽆法运⾏的。

⽹页开发者需要⾯对的环境是各式各样的浏览器，PC 端需要⾯对 IE、Chrome、QQ浏览器等，在移动端需要⾯对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。⽽⼩程序开发过程中需要⾯对的是两⼤操作系统 iOS 和 Android 的微信客户端，以及⽤于辅助开发的⼩程序开发者⼯具，⼩程序中三⼤运⾏环境也是有所区别的，如表1-1所⽰。

表1-1 ⼩程序的运⾏环境

运⾏环境iOS安卓

V8

逻辑层

渲染层chromium定制内核Chrome WebView

JavaScriptCoreWKWebView

⼩程序开发者⼯具NWJS

⼆、环境搭建

2.1 开发⼯具下载

前往 ，根据⾃⼰的操作系统下载对应的安装包进⾏安装，有关开发者⼯具更详细的介绍可以查看 。按指⽰安装成功后导⼊或者新建如图所⽰

2.2 ⼩程序项⽬框架

2.2.1 .json 后缀的 JSON 配置⽂件

JSON 是⼀种数据格式，并不是编程语⾔，在⼩程序中，JSON扮演的静态配置的⾓⾊。 我们可以看到在项⽬的根⽬录有⼀个 app.json 和project.config.json，此外在 page/logs ⽬录下还有⼀个 logs.json，我们依次来说明⼀下它们的⽤途。2.2.2 .wxml 后缀的 WXML 模板⽂件

从事过⽹页编程的⼈知道，⽹页编程采⽤的是 HTML + CSS + JS 这样的组合，其中 HTML 是⽤来描述当前这个页⾯的结构，CSS ⽤来描述页⾯的样⼦，JS 通常是⽤来处理这个页⾯和⽤户的交互。同样道理，在⼩程序中也有同样的⾓⾊，其中 WXML 充当的就是类似 HTML 的⾓⾊。2.2.3 .wxss 后缀的 WXSS 样式⽂件

WXSS 具有 CSS ⼤部分的特性，⼩程序在 WXSS 也做了⼀些扩充和修改。

新增了尺⼨单位。在写 CSS 样式时，开发者需要考虑到⼿机设备的屏幕会有不同的宽度和设备像素⽐，采⽤⼀些技巧来换算⼀些像素单位。

WXSS 在底层⽀持新的尺⼨单位 rpx ，开发者可以免去换算的烦恼，只要交给⼩程序底层来换算即可，由于换算采⽤的浮点数运算，所以运算结果会和预期结果有⼀点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写⼀个 app.wxss 作为全局样式，会作⽤于当前⼩程序的所有页⾯，局部页⾯样式 page.wxss 仅对当前页⾯⽣效。此外 WXSS 仅⽀持部分 CSS 选择器2.2.4 .js 后缀的 JS 脚本逻辑⽂件

⼀个服务仅仅只有界⾯展⽰是不够的，还需要和⽤户做交互：响应⽤户的点击、获取⽤户的位置等等。在⼩程序⾥边，我们就通过编写 JS 脚本⽂件来处理⽤户的操作。

2.3 ⼩程序的运⾏环境

⼩程序的运⾏环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式⼯作在渲染层，JS 脚本⼯作在逻辑层。

⼩程序的渲染层和逻辑层分别由2个线程管理：渲染层的界⾯使⽤了WebView 进⾏渲染；逻辑层采⽤JsCore线程运⾏JS脚本。⼀个⼩程序存在多个界⾯，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下⽂中也会采⽤Native来代指微信客户端）做中转，逻辑层发送⽹络请求也经由Native转发，⼩程序的通信模型下图所⽰。