七、学习小程序系统常用的API调用

Lyk 2022/9/13 微信小程序网络请求APIwx.request展示弹窗APIwx.showToast等转发功能onShareAppMessage获取设备信息获取位置信息Storage存储页面跳转wx.navigateTo小程序用户登录流程

# 1、网络请求API和封装 wx.request

# 1.1.网络请求 – API参数

wx.request (opens new window)

微信提供了专属的API接口,用于网络请求: wx.request(Object object)
比较关键的几个属性解析:
- ➢ url: 必传, 不然请求什么.
- ➢ data: 请求参数
- ➢ method: 请求的方式
- ➢ success: 成功时的回调
- ➢ fail: 失败时的回调

# 1.2.网络请求 – API使用

直接使用wx.request(Object object)发送请求：

# 1.3.网络请求 – API封装

# 1.4.网络请求域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。
- 小程序登录后台 – 开发管理 – 开发设置 – 服务器域名；
服务器域名请在「小程序后台 - 开发 - 开发设置 - 服务器域名」中进行配置，配置时需要注意：
- 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
- 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
- 可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
- 如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443请求则会失败。
- 域名必须经过 ICP 备案；
- 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关 API 也不能在小程序内调用。开发者应将 AppSecret保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
- 不支持配置父域名，使用子域名

# 2、展示弹窗和页面转发

# 2.1.展示弹窗API wx.showToast

小程序中展示弹窗有四种方式: showToast、showModal、showLoading、showActionSheet
- 显示消息提示框：wx.showToast(Object object) (opens new window)
- 显示模态对话框：wx.showModal(Object object) (opens new window)
- 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框：wx.showLoading(Object object) (opens new window)
- 显示操作菜单：wx.showActionSheet(Object object) (opens new window)

代码演示

# 2.2.页面转发API(转发功能)onShareAppMessage

分享是小程序扩散的一种重要方式，小程序中有两种分享方式：
- 方式一：点击右上角的菜单按钮，之后点击转发
- 方式二：点击某一个按钮，直接转发
当我们转发给好友一个小程序时，通常小程序中会显示一些信息：
- 如何决定这些信息的展示呢？通过 onShareAppMessage【是page页面的事件处理函数】
- onShareAppMessage(Object object)：监听用户点击页面内转发按钮（button 组件 open-type="share"）或 右上角菜单“转发”按钮的行为，并自定义转发内容。
- 此事件处理函数需要 return 一个 Object，用于自定义转发内容；
- 注意：只有在定义了此事件处理函数，右上角菜单才会显示“转发”按钮

# 3、设备信息和位置信息

# 3.1.获取设备信息wx.getSystemInfo

在开发中，我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作。
- 小程序提供了相关个API：wx.getSystemInfo(Object object)

# 3.2.获取位置信息wx.getLocation

开发中我们需要经常获取用户的位置信息，以方便给用户提供相关的服务：
- 我们可以通过API获取：wx.getLocation(Object object)
对于用户的关键信息，需要获取用户的授权后才能获得：
- 位置相关权限声明：permission (opens new window)

# 4、小程序Storage存储wx.setStorageSync

在开发中，某些常见我们需要将一部分数据存储在本地：比如token、用户信息等。
- 小程序提供了专门的Storage用于进行本地存储。
同步存取数据的方法：设置好数据后，下面可以立即get获取到设置的数据
- wx.setStorageSync(string key, any data)
- wx.getStorageSync(string key)
- wx.removeStorageSync(string key)
- wx.clearStorageSync()

//设置数据
wx.setStorageSync('age', 19)

//获取数据
const age = wx.getStorageSync('age')
console.log(age)//19

//移除某条数据
wx.clearStorageSync('age')

//清空数据
wx.clearStorageSync()

1
2
3
4
5
6
7
8
9
10
11
12

异步存储数据的方法：：设置好数据后，下面不一定可以立即get获取到设置的数据
- wx.setStorage(Object object)
- wx.getStorage(Object object)
- wx.removeStorage(Object object)
- wx.clearStorage(Object object)

//设置数据
wx.setStorage({
  key: 'age',
  data: 19,
  success: res => {
    console.log(res)
  }
})

//获取数据
wx.getStorage({
  key: 'age',
  success: res => {
    console.log(res) //{errMsg: "getStorage:ok", data: 19}
  }
})

//移除某条数据
wx.removeStorage({
  key: 'age',
  success: res => {
    console.log(res) //{errMsg: "removeStorage:ok"}
  }
})

//清空数据
wx.clearStorage()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 5、页面跳转和数据传递

# 5.1.界面跳转的方式

界面的跳转有两种方式：通过navigator组件和通过wx的API跳转
- navigator组件的跳转方式：<navigator url="/pages/shop/shop">跳转到shop页面</navigator>
  - navigator组件跳转页面的方式，不可跳转到tabbar页面
- 下面我们开始学习wx的API：

# 5.2.页面跳转 - wx.navigateTo

wx.navigateTo(Object object)
- 保留当前页面，跳转到应用内的某个页面；
- 但是不能跳到 tabbar 页面；【想要跳转到tabbar页面需要调用wx.switchTab API】

# 5.3.页面返回 - wx.navigateBack

wx.navigateBack(Object object)
- 关闭当前页面，返回上一页面或多级页面。

# 5.4.页面跳转之数据传递一 (getCurrentPages())

通过拿到跳转之前A页面的实例a，然后通过页面实例a的setData方法去改变A页面的data数据

如何在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？
- 首页 -> 详情页：使用URL中的query字段
- 详情页 -> 首页：在详情页内部拿到首页的页面对象，直接修改数据
  - getCurrentPages() (opens new window)：获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面

代码演练
- 图片错误提醒：下图的我是test页面写错成 title页面

# 5.5.页面跳转之数据传递二 (events + this.getOpenerEventChannel())

早期数据的传递方式只能通过上述的方式（数据传递一）来进行，在小程序基础库 2.7.3 开始支持events参数，也可以用于数据的传递。
如果一个页面由另一个页面通过 wx.navigateTo (opens new window) 打开，这两个页面间将建立一条数据通道：
- 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
- wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

#

# 5.6.界面跳转的方式(navigator组件)

navigator组件主要就是用于界面的跳转的，也可以跳转到其他小程序中：
- 注意：navigator组件不可跳转到tabbar页面
- <navigator url="/pages/shop/shop">跳转到shop页面</navigator>
- 当然navigator组件页面跳转也可以通过query传递数据至跳转后的页面：<navigator url="/pages/router/router?name=kobe&age=45">跳转到页面</navigator>
  - 可以在跳转后的页面的onLoad(options){}声明周期中，通过options拿到其他页面传递过来的数据

# 6、小程序登录流程

# 6.1.小程序登录解析

为什么需要用户登录？
- 增加用户的粘性和产品的停留时间；
如何识别同一个小程序用户身份？
- 获取code --> 通过code去跟微信的服务器拿到 openid
- openid和unionid
  - unionid是区别微信不同产品(如:小程序与公众号)之间识别同一个用户身份时用到的标识符
- 换取authToken
用户身份多平台共享（比如PC端和小程序，怎么保持在这两个平台用户的数据一致） => 一般进入微信小程序都是 静默登录
- 账号绑定（需要在微信小程序中进行账号绑定，让账号/用户名跟小程序的openid绑定在一起）即可实现用户身份及用户的相关数据多平台共享
- 手机号绑定（需要在微信小程序中进行手机号绑定，让手机号跟小程序的openid绑定在一起）即可实现用户身份及用户的相关数据多平台共享；推荐
- 第三方登录（微信登录）

# 6.2.小程序用户登录的流程

如下图的：自定义登录态其实指的就是 token令牌

六、小程序的组件化开发

Lyk-Blog

Choose mode

七、学习小程序系统常用的API调用

七、学习小程序系统常用的API调用

# 1、网络请求API和封装 wx.request

# 1.1.网络请求 – API参数

# 1.2.网络请求 – API使用

# 1.3.网络请求 – API封装

# 1.4.网络请求域名配置

# 2、展示弹窗和页面转发

# 2.1.展示弹窗API wx.showToast

# 2.2.页面转发API(转发功能)onShareAppMessage

# 3、设备信息和位置信息

# 3.1.获取设备信息wx.getSystemInfo

# 3.2.获取位置信息wx.getLocation

# 4、小程序Storage存储wx.setStorageSync

# 5、页面跳转和数据传递

# 5.1.界面跳转的方式

# 5.2.页面跳转 - wx.navigateTo

# 5.3.页面返回 - wx.navigateBack

# 5.4.页面跳转之数据传递一 (getCurrentPages())

# 5.5.页面跳转之数据传递二 (events + this.getOpenerEventChannel())

#

# 5.6.界面跳转的方式(navigator组件)

# 6、小程序登录流程

# 6.1.小程序登录解析

# 6.2.小程序用户登录的流程