小程序

小程序开发基础

微信小程序的开发入门指南

1. 准备工作

• 下载并安装微信开发者工具 (opens new window)
• 注册一个微信开放平台 (opens new window)账号; 如无企业资质，可申请测试号 (opens new window)

2. 创建项目

• 打开微信开发者工具，选择「新建小程序」
• 输入项目名称、项目目录和 AppID，点击「确定」
• 微信开发者工具会自动生成一个示例项目

3. 项目结构

• app.js: 小程序的逻辑代码
• app.json: 小程序的全局配置文件
• app.wxss: 小程序的全局样式文件
• pages/: 存放小程序的页面文件
• utils/: 存放小程序的工具函数文件

4. 编写页面

• 在 pages 目录下创建一个新的页面文件，如 index/index.wxml
• 在 index 目录下创建对应的样式文件 index.wxss
• 在 index 目录下创建对应的逻辑文件 index.js
• 在 app.json 文件中注册该页面：

"pages": [
  "pages/index/index"
],

5. 页面布局

• 在 index.wxml 文件中编写页面的结构，可以使用各种标签和组件，如 view、text、button 等
• 可以使用 wxss 文件对页面进行样式定义

6. 页面逻辑

• 在 index.js 文件中编写页面的逻辑代码，如数据处理、事件处理等
• 可以通过 Page() 函数注册页面，并提供页面的生命周期函数和自定义方法

7. 数据绑定

• 可以通过 {{}} 语法实现数据的动态绑定，如 <text></text>
• 可以在页面的 data 属性中定义数据，并在逻辑代码中更新数据

8. 事件处理

• 可以在组件上绑定各种事件，如点击事件、输入事件等
• 可以在逻辑代码中编写相应的事件处理函数

9. 调试与预览

• 在微信开发者工具中点击「预览」按钮，可以在手机上预览小程序
• 可以在微信开发者工具中进行调试，查看日志和网络请求

10. 发布上线

• 在微信开放平台中创建一个小程序，并获取到 AppID

• 在微信开发者工具中点击「上传」按钮，将小程序上传到微信服务器

• 在微信开放平台中进行小程序的发布审核

• 这是一个简单的示例代码，实现了一个计数器功能：

index.wxml:

<view class="container">
  <view>当前计数：{{count}}</view>
  <button bindtap="increase">增加</button>
  <button bindtap="decrease">减少</button>
</view>

index.js:

Page({
  data: {
    count: 0
  },
  increase() {
    this.setData({
      count: this.data.count + 1
    });
  },
  decrease() {
    this.setData({
      count: this.data.count - 1
    });
  }
});

index.wxss:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

双线程模型

小程序和 Web 开发的区别

网页开发中渲染线程和 JavaScript 线程是互斥 的。即这两个线程不能够穿插执行，必须串行。

当其中一个线程执行时，另一个线程只能挂起等待。这也是 JavaScript线程占用主线程时间过长，可能会导致页面失去响应 的原因。

而在小程序中，二者是分开的，分别运行在不同的线程中，即渲染线程和逻辑线程。

关于其他的不同，请参考小程序与普通网页开发的区别 (opens new window)。

渲染线程和逻辑线程

小程序的双线程就是渲染线程和逻辑线程，分别承担 UI 的渲染和执行 JavaScript 代码的工作。

渲染层和逻辑层 (opens new window)

渲染线程使用 WebView 进行 UI 的渲染呈现，逻辑层是用 JavaScript 引擎运行逻辑代码。

小程序主要运行在两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具 上。而在不同的运行环境上，WebView 与 JavaScript 引擎也是有所不同的，具体见下表：

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

NWJS (opens new window)由node-webkit项目发展而来,跟 V8 比较类似~

通信方式

小程序的渲染层和逻辑层之间的通信并不是直接传递数据或事件，而是由 Native(微信客户端) 作为中间媒介进行转发。逻辑层发送网络请求也是经由 Native 转发。

以渲染层和逻辑层通信为例，整个过程如下：

• 渲染层通过与用户的交互触发特定的事件 event；
• 然后 event 被传递给逻辑层；
• 逻辑层通过一系列的逻辑处理、数据请求等操作，将处理好的 data 传递给渲染层；
• 最后渲染层将 data 渲染为可视化的 UI。

而渲染层和逻辑层通信的这个过程就是典型的事件驱动模式。

了解小程序的通信方式后，想必对关于 setData 的一些优化建议也知其所以然了。例如：

• 尽量减少 setData 的 调用次数和携带的数据大小
• 尽量减少 JavaScript 代码的复杂度

界面渲染

在渲染层，宿主环境会把 WXML 转换成对应的 JavaScript 对象。 在逻辑层发生数据变更时，通过 setData 方法把数据从逻辑层传递到渲染层，经过前后对比，将差异内容应用到原有的 DOM 树上，渲染出更新后的 UI 界面。

1. 描述界面：宿主环境把 WXML 转换成对应的 JavaScript 对象；
2. 逻辑层传递页面数据；
3. 对比应用差异重新渲染界面；

从宿主环境将 WXML 转换成 JavaScript 对象可以理解另外一个优化：在可以保证功能的前提下使用结构简单的UI。

小程序的生命周期

微信小程序的生命周期包括App、Page和Component三个部分。

App生命周期

• onLaunch：小程序初始化时触发，只会执行一次。
• onShow：小程序启动或从后台进入前台时触发。
• onHide：小程序从前台进入后台时触发。
• onError：小程序发生错误时触发。

// app.js

App({
  onLaunch: function () {
    console.log('小程序初始化');
  },
  onShow: function () {
    console.log('小程序显示');
  },
  onHide: function () {
    console.log('小程序隐藏');
  },
  onError: function (msg) {
    console.log('小程序错误', msg);
  }
})

Page生命周期

• onLoad：页面加载时触发。
• onShow：页面显示时触发。
• onReady：页面初次渲染完成时触发。
• onHide：页面隐藏时触发。
• onUnload：页面卸载时触发。

// page.js

Page({
  onLoad: function (options) {
    console.log('页面加载');
  },
  onShow: function () {
    console.log('页面显示');
  },
  onReady: function () {
    console.log('页面初次渲染完成');
  },
  onHide: function () {
    console.log('页面隐藏');
  },
  onUnload: function () {
    console.log('页面卸载');
  }
})

Component生命周期

• created：组件实例被创建时触发。
• attached：组件被插入到页面时触发。
• ready：组件布局完成时触发。
• detached：组件被移除出页面时触发。

// component.js

Component({
  created: function () {
    console.log('组件实例被创建');
  },
  attached: function () {
    console.log('组件被插入到页面');
  },
  ready: function () {
    console.log('组件布局完成');
  },
  detached: function () {
    console.log('组件被移除出页面');
  }
})

微信小程序的运行机制

主要包括以下几个步骤：

1. 下载：用户在微信客户端上搜索并点击进入小程序，微信会从服务器上下载小程序的代码包。

h5是按需加载，小程序是一次性把包全部下载下来~

2. 启动：当用户点击进入小程序时，微信会启动小程序的运行环境，并加载小程序的代码。

3. 渲染：小程序的界面由两个部分组成，即视图层和逻辑层。视图层由WXML（类似HTML）和WXSS（类似CSS）组成，逻辑层由JavaScript代码组成。微信客户端将WXML和WXSS解析成真实的UI界面，并且执行JavaScript代码进行数据处理和逻辑控制。

4. 交互：用户可以与小程序进行交互操作，比如点击按钮、滑动页面等。微信客户端会捕捉用户的交互事件，并将事件发送给小程序的逻辑层进行处理。

5. 数据通信：小程序可以通过网络请求获取远程数据或与服务器进行通信。微信客户端会将网络请求发送给微信服务器，然后将响应结果返回给小程序的逻辑层。

小程序开发框架解析

支付宝小程序与百度小程序

支付宝小程序开发工具

支付宝小程序的开发者工具类似于微信开发者工具，可以在支付宝小程序官方网站上下载安装。

安装完成后，打开开发者工具，点击新建项目，填写相应的信息，选择小程序类型为支付宝小程序。

然后，选择项目路径和项目名称，并设置 AppID。

接下来，点击创建项目即可。

支付宝-下载小程序开发者工具 (opens new window)

百度智能小程序开发工具

百度小程序的开发者工具是一款专门针对百度小程序开发的集成开发环境，可以在百度开放平台上下载安装。

安装完成后，打开开发者工具，点击新建小程序，填写相应的信息，选择小程序类型为百度小程序。

然后，选择项目路径和项目名称，并设置 AppID。

接下来，点击创建即可。

百度小程序-开发者工具 (opens new window)

API 实例

1. 微信小程序API：

微信小程序提供了丰富的API接口，涵盖了用户登录、支付、分享、地理位置等各方面的功能。以下是一些常用API的示例：

// 获取用户信息
wx.getUserInfo({
  success: function(res) {
    console.log(res.userInfo);
  }
});

// 支付接口
wx.requestPayment({
  timeStamp: 'xxxx',
  nonceStr: 'xxxx',
  package: 'xxxx',
  signType: 'xxxx',
  paySign: 'xxxx',
  success: function(res) {
    console.log('支付成功');
  },
  fail: function(res) {
    console.log('支付失败');
  }
});

// 获取地理位置
wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    console.log(res.latitude, res.longitude);
  }
});

2. 支付宝小程序API：

支付宝小程序也提供了类似的API接口，但与微信小程序有一些差异。以下是一些常用API的示例：

// 获取用户信息
my.getAuthUserInfo({
  success: function(res) {
    console.log(res.userInfo);
  }
});

// 支付接口
my.tradePay({
  orderStr: 'xxxx',
  success: function(res) {
    console.log('支付成功');
  },
  fail: function(res) {
    console.log('支付失败');
  }
});

// 获取地理位置
my.getLocation({
  success: function(res) {
    console.log(res.latitude, res.longitude);
  }
});

3. 百度小程序API区别：

百度小程序的API与微信小程序和支付宝小程序有一些不同。以下是一些常用API的示例：

// 获取用户信息
swan.getUserInfo({
  success: function(res) {
    console.log(res.userInfo);
  }
});

// 支付接口
swan.requestPolymerPayment({
  orderInfo: 'xxxx',
  success: function(res) {
    console.log('支付成功');
  },
  fail: function(res) {
    console.log('支付失败');
  }
});

// 获取地理位置
swan.getLocation({
  success: function(res) {
    console.log(res.latitude, res.longitude);
  }
});

taro /mpvue /remax 小程序开发框架对比

• Taro

Taro是一款多端统一开发的框架，可以同时开发小程序、H5、RN等多个平台。它通过编写一套代码，就可以在不同平台上运行，并且提供了一系列的组件化和工具库，方便开发者进行开发。Taro采用了React和Vue的语法风格，开发者可以根据自己的喜好选择使用React还是Vue进行开发。Taro在性能方面表现较好（特指Taro 1&2），支持组件级别的按需加载，可以有效减小小程序的体积，加快首次加载速度。

https://github.com/NervJS/taro (opens new window)

• mpvue

mpvue是一个基于Vue.js的小程序开发框架，它允许开发者使用Vue.js的语法和特性来开发小程序。mpvue可以将Vue项目转换成小程序项目，开发者可以享受到Vue的开发乐趣和生态系统。mpvue的特点是易学易用，对于已经熟悉Vue的开发者来说上手较快，而且无需学习额外的API。mpvue也支持原生小程序的开发，可以直接调用小程序的API进行开发。

• remax

remax是一款基于React的小程序开发框架，它可以将React组件转换成小程序的组件。remax的特点是性能优秀，它通过将React组件转换成真正的小程序组件，使得运行时的性能得到了提升。remax还提供了丰富的API和工具库，方便开发者进行开发。同时，remax也支持多端开发，可以将React组件转换成H5、RN等平台的组件。

Taro 1 & 2

React 与小程序之间最大的差异就是他们的模板了，在 React 中，是使用 JSX 来作为组件的模板的，而小程序则是使用字符串模板的。

• 模版转换

taro首先要实现的就是进行模版转换，把 JSX 语法转换成可以在小程序运行的字符串模板。 模版转换主要是通过静态编译实现的，分为解析、转换、生成，三个阶段。

• 解析过程

babel 的核心编译器 babylon 是支持对 JSX 语法解析的，taro框架利用这个编译器，将JSX通过词法、语法分析，生成抽象语法树。

• 转换过程

针对已经生成的AST（抽象语法树），taro框架会使用已经定义好的转换操作以及多端的组件库规则对它进行转换修改。

• 逻辑转换

除了模版转换，还需要进行逻辑代码的转换，由于各端api存在差异，如网络请求，数据缓存等，所以为了弥补不同端的差异，Taro定制了统一的 API 标准，同时还为不同的端编写了相应的运行时框架，这些API可以直接使用，不用关心当前平台是否支持，因为运行时框架会抹平这些API差异。

Taro 3

特点：

• Taro 3 则可以大致理解为运行时或解释型架构（相对于 Taro 1/2 而言）。
• 主要通过在小程序端模拟实现 DOM、BOM API 来让前端框架直接运行在小程序环境中，从而达到小程序和 H5 统一的目的。
• 而对于生命周期、组件库、API、路由等差异，我们依然可以通过定义统一标准，各端负责各自实现的方式来进行抹平。

mpvue

https://github.com/Meituan-Dianping/mpvue (opens new window)

已停止维护，不推荐使用

特点：

• 基于Vue.js，借助Vue的开发模式和生态系统，快速搭建小程序应用。
• 可以复用大部分Vue的代码和组件，减少学习成本。
• 提供了一些特定于小程序的API和组件，方便开发者使用。

remax

https://github.com/remaxjs/remax (opens new window)

已停止维护，不推荐使用

特点：

• 基于React语法，支持编译为微信小程序、支付宝小程序、字节跳动小程序和H5等多个平台。
• 可以直接使用React生态系统中的组件和库，无需额外学习成本。
• 支持React Hooks，提供了更好的开发体验。

Taro 开发指南

简介 (opens new window)

开发环境搭建 (opens new window)

降级：npm i -g @tarojs/cli@3.5.6

使用Hooks (opens new window)

使用网络请求 (opens new window)

备注

• 登录授权？

• 跨端框架比较：Taro 、 uniapp 、flutter ?

收藏

• 微信官方文档-小程序 (opens new window)

参考

• 微信小程序的开发入门指南 (opens new window)

• 小程序开发框架解析 (opens new window)

• 小程序项目实战 (opens new window)