微信小程序-入门-开发文档学习笔记

小程序简介

查看更多学习笔记：GitHub：LoveEmiliaForever
微信小程序开发指南
微信小程序开发文档

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

小程序技术发展史

1. 2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。
2. 微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，这就是小程序的由来。

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

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性，但是二者还是有些许区别的。

Web网页	小程序
单线程	逻辑层和渲染层线程不同
有完整的浏览器对象	缺少BOM、DOM的API
V8	JSCore

同时运行环境也有很多不同

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

小程序代码构成

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

JSON配置

在小程序中，JSON扮演的静态配置的角色

小程序配置 app.json

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

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

• pages字段 —— 用于描述当前小程序所有页面路径
• window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等

工具配置 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件
当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就会自动恢复到当时你开发项目时的个性化配置

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置（是一系列jsoon文件）
可能小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此提供了 page.json，让开发者可以独立定义每个页面的一些属性（app.json是全局设置）

WXML 模板

WXML 充当的是类似 HTML 的角色，和 HTML 非常相似，WXML 由标签、属性等等构成，但也有不同

• 标签有所不同
  • view, button, text 等等这些标签，是小程序给开发者包装好的基本能力，微信还提供了地图、视频、音频等等组件能力
• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
  • MVVM 的开发模式，把渲染和逻辑分离，和Vue一样

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改

• 新增了尺寸单位：rpx，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差
• 提供了全局的样式和局部样式。可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效

JS 逻辑交互

在小程序里边，通过编写 JS 脚本文件来处理用户的操作
还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等

小程序宿主环境

微信客户端给小程序所提供的环境为宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能

渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染，逻辑层采用JsCore线程运行JS脚本
一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（Native）做中转，逻辑层发送网络请求也经由Native转发

程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径
而写在 pages 字段的第一个页面就是这个小程序的首页

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行

页面是怎么写的：

1. 微信客户端会先根据 eg.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好
2. 紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式
3. 最后客户端会装载 eg.js

Page({ // Page 是一个页面构造器
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

组件

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序
就和Vue的组件差不多

API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用
多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题

小程序协同工作和发布

在中大型的公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目
为此，小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作

协同工作

小程序的版本

一般来说，每个开发者拥有自己对应的一个开发版本
为了让测试和产品经理有一个完整稳定的版本可以体验测试，小程序平台允许把其中一个开发版本设置成体验版

发布上线

预览

点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码
使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现

上传代码

上传代码是用于提交体验或者审核使用的
上传成功之后，登录小程序管理后台 - 版本管理 - 开发版本 就可以找到刚提交上传的版本了

提交审核

小程序的发布是需要经过审核的
请开发者严格测试了版本之后，再提交审核，过多的审核不通过，可能会影响后续的时间

发布

小程序提供了两种发布模式：全量发布和分阶段发布

• 全量发布：是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本
• 分阶段发布：是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也称为灰度发布

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

app

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

page

一个小程序页面由四个文件组成

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

允许上传的文件

以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）
除此之外，只有后缀名在白名单内的文件可以被上传