微信小程序 - miniprogram（学习记录总结）

微信公众平台：https://mp.weixin.qq.com

自己开发流程：

• 注册（在微信公众平台注册小程序）
• 小程序信息完善（填写小程序基本信息，包括名称、头像、介绍及服务范围等）
• 开发小程序
• 提交审核和发布

1.开发前的准备

下载NodeJs并且配置环境，再下载微信开发者工具

• NodeJs
• 微信开发者工具

---

2.小程序开发配置

2.1全局配置

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

名称	描述
app.js
app.json
app.wxss

2.2页面配置

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

名称	描述
page.js	写业务逻辑的
page.json	json配置
page.wxml	写HTML
page.wxss	写css样式

页面路由

在小程序中所有页面的路由全部由框架进行管理

navigateTo, redirectTo 只能打开非 tabBar 页面
switchTab 只能打开 tabBar 页面
reLaunch 可以打开任意页面
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar
调用页面路由带的参数可以在目标页面的onLoad中获取

---

属性双向绑定

<input model:value="{{value}}" />

this.setData({
	value:'valuename'
})

---

获取界面上的节点信息

获取节点属性、样式、在界面上的位置等信息

官方文档案例

const query = wx.createSelectorQuery()
query.select('#id').boundingClientRect(function(res){
	res.top // #id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

---

API

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等

事件监听API

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等
这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

同步API

以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明
同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果

参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）
其他	Any	-	接口定义的其他参数

回调函数的参数
success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：

• errMsg 错误信息，如果调用成功返回 ${apiName}:ok
• errCode 错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。

---

全局配置

在app.json文件以JSON对象进行全局配置

entryPagePath

小程序默认启动首页

"entryPagePath":"pages/index/index"

functionalPages

是否启用插件功能页，默认关闭

"functionalPages":true

permission

小程序接口权限相关设置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }

---

调用微信扫一扫功能

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

---

存储

每个微信小程序都可以有自己的本地缓存，可以通过一下api对本地缓存进行读写和清理

wx.setStorage/wx.setStorageSync
wx.getStorage/wx.getStorageSync
wx.clearStorage/wx.clearStorageSync
wx.removeStorage/wx.removeStorageSync

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。