微信小程序开发学习

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

1、认识小程序

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	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

2、环境搭建

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转发，小程序的通讯模型下图所示。