微信小程序学习笔记

小程序宿主环境

小程序宿主环境包含的内容

1. 通信模型

小程序中通信的主体是渲染层和逻辑层， 其中：

· WXML模板和WXSS样式工作在渲染层

· JS脚本工作在逻辑层

小程序的通信模型

渲染层和逻辑层之间的通行是由微信客户端进行转发

逻辑层和第三方服务之间的通行也是由微信客户端进行转发

2. 运行机制

小程序的启动过程：

• 把小程序的代码包下载到本地
• 解析app.json全局配置文件
• 执行app.js小程序入口文件，调用App()创建小程序实例
• 渲染小程序首页
• 小程序启动完成

页面的渲染过程：

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模板文件和.wxss样式
3. 执行页面.js文件， 调用Page()创建页面实例
4. 页面渲染完成

3. 组件

4. API

小程序官方把API分为如下3大类：

1. 事件监听API
   • 特点1：以on开头，用来监听某些事件的触发
   • 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
2. 同步API
   • 特点1：以Sync结尾的API都是同步API
   • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常
   • 举例：wx.setStorageSync(‘Key’, ‘Value’) 向本地存储中写入内容
3. 异步API
   • 特点：类似于JQuery中的 $.ajax(options) 函数，需要通过success、fail、complete等回调函数接收调用的结果
   • 举例：wx.request()发起网络数据请求，通过success回调函数接收数据

模板与配置

数据绑定

1. 数据绑定的基本原则

1. 在data中定义数据
2. 在WXML中使用数据

2. 在data中定义页面的数据

在页面对应的.js文件中， 把数据定义到data对象中即可：

3. Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量抱起来即可

<View>{{要绑定的数据名称}}</View>

4. Mustache语法的应用场景

Mustache语法主要应用场景如下：

• 绑定内容
• 绑定属性
• 运算（三目运算、算术运算等）

事件绑定

1. 什么是事件

​ 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理。

​

2. 小程序中常用的事件

3. 事件对象的属性列表

当事件回调出发时，会收到一个事件对象event，它的详细属性如下：

4. target和currentTarget的区别

​ target是触发事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下：

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

• e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
• e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

5. bindtap的语法格式

在小程序中，不存在HTML中的onClick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

1. 通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bindtap="btnTapHandler">按钮</button>

2. 在页面.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

   Page({
   	btnTapHandler(e) {
   		console.log(e)
   	}
   })
   

6. 在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

7. 事件传参

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

最终：

• info会被解析为参数名字
• 数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值

8. bindinput 的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

1. 通过bindinput，可以为文本框绑定输入事件：

   <input bindinput="inputHandler"></input>
   

2. 在页面的.js 文件中定义事件处理函数：

   inputHandler(e) {
     // e.detail.value 是变化过后，文本框最新的值
   	console.log(e.detail.value)
   }
   

条件渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

WXSS微信样式

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

全局配置

1. 全局配置文件及常用的配置项

小程序根目录下的app.json 文件是小程序的全局配置文件。常用的配置项如下：

1. pages
   • 记录当前小程序所有页面的存放路径
2. window
   • 全局设置小程序窗口的外观
3. tabBar
   • 设置小程序底部的 tabBar效果
4. style
   • 是否启用新版的组件样式

小程序窗口的组成部分

2. 了解window节点的常用配置项

3. 全局配置-tabBar

1. 什么是tabBar

   tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

   • 底部 tabBar
   • 顶部 tabBar

   注意：

   • tabBar中只能配置最少2个、最多5个tab页签
   • 当渲染顶部tabBar时，不显示icon，只显示文本

2. tabBar的6个组成部分

   

3. tabBar节点的配置项

   

4. 每个tab项的配置选项

页面配置

1. 页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2. 页面配置和全局配置文件的关系

在小程序中，app.json 中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3. 页面配置中常用的配置项

网络数据请求

1. 小程序中网络数据请求的限制

出于安全方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

1. 只能请求HTTPS类型的借口
2. 必须将借口的域名添加到**信任列表**中

2. 配置 request 合法域名

配置步骤：登录微信小程序管理后套-> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名

注意事项：

1. 域名只支持HTTPS协议
2. 域名不能使用IP地址或localhost
3. 域名必须经过ICP备案
4. 服务器域名一个月内最多可申请5次修改

3. 发起 Get 请求

调用微信小程序提供的 wx.request() 方法，可以发起Get数据请求，示例代码：

wx.request({
  url: 'https://www.example.cn/api/get', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: (res) => {
    console.log(res.data)
  }
})

4. 关于跨域和Ajax的说明

跨域问题只存在于给予浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序不存在跨域问题。

Ajax技术的核心是依赖于浏览器中XMLHTTPRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫发起Ajax请求，而是叫做 “发起网络数据请求”

视图与逻辑

1. 页面导航

1. 声明式导航

   • 在页面上声明一个导航组件
   • 通过点击组件实现页面跳转

   导航到tabBar页面上：

   在使用组件跳转到指定的tabBar页面时，需要指定url属性和open-type 属性，其中：

   • url表示要跳转的页面地址，必须以 / 开头

   • open-type表示跳转到方式，必须为switchTab

     <navigator url="/pages/message/message" open-type="swatchTab">导航到消息页面</navigator>
     

   导航到非tabBar页面上：

   open-type 属性必须为 navigator，此为默认值，可以不写

   后退导航：

   如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

   • open-type 的值必须是 navigatorBack，表示要进行后退导航

   • delta的值必须是数字，表示要后退的层级，默认值为1

     <navigator open-type="navigatorBack" delta="1">导航到消息页面</navigator>
     

2. 编程式导航

调用小程序的导航API，实现页面跳转

1. 导航到tabBar页面

   调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object 参数对象的属性类表如下：

   

2. 导航到非tabBar页面

   调用wx.navigateTo(Object object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：
   

3. 后退导航
   调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。其中Object参数对象的属性列表如下：

4. 导航传参

5. 声明式导航可以使用url属性在路径的后面携带参数：

• 参数与路径之间用?分隔
• 参数键与参数值用= 相连
• 不同参数间用 & 分隔

 <navigator url="/pages/info/info?name=zs&age=12">携参跳转</navigator>

2. 编程式导航也可以携带参数跳转

    <button bindtap="gotoInfo"></button>
    
    gotoInfo(){
    	wx.navigateTo({
    		url: '/pages/info/info?name=zs&age=21'
    	})
    }

3. 在onLoad 中接收导航传参

   通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onload事件中直接获取到，如下：

 /**
   * 生命周期函数 -- 监听页面加载
   */
   
   onload: function(options) {
     // options 就是导航传递过来的参数对象
     console.log(optons)
   }
       

2. 页面事件

• 下拉刷新事件

  在页面.js文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件

  停止下拉刷新，调用wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新

• 上拉触底事件

  在页面.js文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件

  注意：上拉触底事件在多次上拉时会造成多次发送网络请求，所以需要进行节流处理，可以通过添加节流阀的方式进行节流处理

3. 生命周期

小程序生命周期分为应用声明周期和页面声明周期两类

1. 应用生命周期

   • 特指小程序从启动 -> 运行 -> 销毁的过程

2. 页面生命周期

   • 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

   其中， 页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

   

生命周期函数： 是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。

小程序的应用生命周期函数需要在app.js中进行声明

// app.js 文件
App({
	//小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作。
	onLaunch: function(options){},
	
	//小程序启动，或从后台进入前台显示时触发。
	onShow: function(options) {},
	// 小程序从前台进入后台时触发
	onHide: function(options) {},
})

页面的生命周期函数

小程序的页面声明周期函数需要在页面的.js文件中Page函数中进行声明

自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

API Promise化

1. 基于回调函数的异步API的缺点

   默认情况下，小程序官方提供的异步API都是基于回调函数实现的，例如，网络请求的API需要按照如下的方式调用：

   wx.request({
     method: '',
     url: '',
     data: {},
     success: () => {},	// 请求成功的回调函数
     fail: () => {},			// 请求失败的回调函数
     complete: () => { } // 请求完成的回调函数
   })
   

   缺点：容易造成回调地狱的问题，代码的可读性差、维护性差！

2. API的 Promise化

   API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造成基于Promise化的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。

3. 实现API Promise化

   在小程序中，实现API Promise化主要依赖于miniprogram-api-promise 这个第三方的npm包。它的安装和使用步骤如下：

   Nmp install --save miniprogram-api-promise@version

   // 在小程序入口文件(app.js)，只需要调用一次 promisifyAll() 方法，
   // 即可实现异步API 的 Promise化
   import { promisifyAll } from 'miniprogram-api-promise'
   
   const wxp = wx.p = {}
   // promisify all wx's api
   promisifyAll(wx, wxp)
   

4. 调用 Promise化之后的异步API

   // 页面的 .wxml 结构
   <van-button type="danger" bindtap="getInfo">vant按钮</van-button>
   
   // 页面的.js 文件中，定义对应的tap事件处理函数
   async getInfo() {
   	const {data: res} = await wx.p.request({
   		method: 'Get',
   		url: 'https://www.example.cn/api/get',
   		data: { name: 'zs', age: 21}
   	})
   	
   	console.log(res)
   }
   

全局数据共享

1. 什么是全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX等。

2. 小程序中的全局数据共享方案

在小程序中，可以使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中：

• Mobx-miniprogram 用来创建Store 实例对象
• mobx-miniprogram-bindings 用来把Store中的共享数据或方法，绑定到组件或页面中使用

3. MobX 如何使用