官网链接：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/

一、小程序简介

  • 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
  • 当微信中的 WebView 逐渐流行时，微信就有相关的 JS API ，比如使用 WeixinJSBridge 预览图片
  • 2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别等很多 API
  • JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放

二、开始

  • 先去注册一个小程序账号，然后会得到一个 AppID，它就是小程序的平台的一个身份证
  • 然后下载开发者工具
  • 最后编译调试

三、小程序代码构成

小程序项目里有四种不同的文件类型

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

1. JSON 配置

app.json 是当前小程序的全局配置

  • 包括了小程序的所有页面路径、界面显示、网络超时事件、底部 tab 等。

project.config.json 是工具配置

  • 定义一些个性化配置，例如界面颜色、编译配置等

page.json 是页面配置

  • 独立定义每个页面的一些属性

JSON 语法只有 6 种数据类型（无法使用注释）

  • 数字，包含浮点数和整数
  • 字符串，需要包裹在双引号中
  • Bool值，true 或者 false
  • 数组，需要包裹在方括号中 []
  • 对象，需要包裹在大括号中 {}
  • Null

2. WXML 模板

WXML 和 HTML 的类似，是用来描述当前页面结构的，下面是 WXML 和 HTML 的区别

  1. 标签名字不一样
    • 这里面的标签是小程序开发者着包装好的基本能力
  2. 多了 wx:if 这样的属性以及{{}} 这样的表达式
    • 借鉴 Vue，把渲染和逻辑分离，通过模板语法描述状态和界面结构的关系

3. WXSS 样式

WXSS 具有 CSS 的大部分特性，并在上面做了一些扩充和修改

  1. 新增了尺寸单位 rpx
    • 免去了换算的烦恼，交给小程序底层换算，采用浮点数运算，所以可能会有些偏差
  2. 提供了全局的样式和局部样式
    • app.wxss 是全局样式，page.wxss 是局部页面样式
  3. 仅支持部分 CSS 选择器

4. JS 逻辑交互

逻辑交互指的是：响应用户的点击、获取用户的位置等等。小程序里面通过编写 JS 脚本文件处理用户操作

在 JS 中可以调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等

四、小程序宿主环境

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

1. 渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层

  • 其中 WXML 模板和 WXSS 样式工作在渲染层
  • JS 脚本工作在逻辑层

小程序的渲染层和逻辑层分别由2个线程管理

  • 渲染层的界面使用了 WebView 进行渲染
  • 逻辑层采用JsCore线程运行JS脚本

一个小程序存在多个界面，所以渲染层存在多个WebView线程

  • 这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转
  • 逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示

image.png

2. 程序和页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地

  • 紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径
  • 写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）
  • 微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页

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

    • 整个小程序只有一个 App 实例，是全部页面共享的
      1. {
      2. "pages":[
      3. "pages/index/index",
      4. "pages/logs/logs"
      5. ]
      6. }
      1. App({
      2. onLaunch: function () {
      3. // 小程序启动之后 触发
      4. }
      5. })
      可以看到 pages/logs/logs 下包括了4种文件

  • 微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好

  • 紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式
  • 最后客户端会装载 logs.js
  • Page 是一个页面构造器，这个构造器就生成了一个页面
  • 在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构
  • 在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑
    1. Page({
    2. data: { // 参与页面渲染的数据
    3.   logs: []
    4. },
    5. onLoad: function () {
    6.   // 页面渲染后 执行
    7. }
    8. })

3. 组件

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

  • 在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上
  • 还可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等
    1. <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

4. API

小程序提供了很多 API 给开发者去使用，例如获取用户信息、微信支付等等

  • 需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题 ```javascript wx.getLocation({ type: ‘wgs84’, success: (res) => { var latitude = res.latitude // 纬度 var longitude = res.longitude // 经度 } })

wx.scanCode({ success: (res) => { console.log(res) } }) ```

五、小程序协同工作和发布

小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作

  • 开发者完成开发之后，需要在开发者工具提交小程序的代码包
  • 然后在小程序后台发布小程序，用户可以通过搜索或者其它入口来进入该小程序

1. 协同工作

如果你只是一个人开发小程序，可以暂时先跳过这部分（好的，我跳过了）

2. 小程序的版本

  • 开发版本：使用开发者工具，可将代码上传到开发版本中
  • 体验版本：可以选择某个开发版本作为体验版，并且选取一份体验版
  • 审核中的版本：只能有一份代码处于审核中
  • 线上版本：线上所有用户使用的代码版本

3. 发布上线

一个小程序从开发完到上线一般要经过 预览-> 上传代码 -> 提交审核 -> 发布等步骤

六、小程序开发指南

这是一个链接：《小程序开发指南》

「@浪里淘沙的小法师」