网络请求
wx.request
网络请求域名配置
每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。小程序登录后台 – 开发管理 – 开发设置 – 服务器域名。
配置域名时需要注意
- 域名只支持 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。
- 不支持配置父域名，使用子域名。
对请求函数的封装
主要就是调用wx.request然后返回一个promise。
// 封装成函数
export function zhRequest(options) {
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
resolve(res.data)
},
fail: reject
})
})
}
// 封装成类
class ZhRequest {
// 初始化对象的时候传入请求根路径
constructor(baseURL) {
this.baseURL = baseURL
}
request(options) {
const { url } = options
return new Promise((resolve, reject) => {
wx.request({
...options,
url: this.baseURL + url,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
console.log("err:", err);
}
})
})
}
get(options) {
return this.request({ ...options, method: "get" })
}
post(options) {
return this.request({ ...options, method: "post" })
}
}
封装成类的好处
- 可以指定多个服务器接口请求数据
- 可以更具体的调用哪个请求方式。
弹窗
showToast、showModal、showLoading、showActionSheet
传入配置对象就可以设置对应的效果了。
- showToast： 显示时长是通过
duration属性控制的。 - showLoading：如果不调用
wx.hideLoading()他会一直显示。 - showModal: 确认弹框，默认底部会出现取消和确认按钮。可以传入success回调函数来监听用户点击的状态。
- showActionSheet：抽屉弹窗。success回调是监听选择项的点击，fail回调是监听取消按钮的点击。
分享
- 监听用户点击页面内转发按钮（button 组件 open-type=”share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。
- onShareAppMessage, 需要return一个对象来定制分享界面的展示。该函数是
Page函数的一个选项。
获取设备信息，位置信息
- 获取设备信息，wx.getSystemInfo(), 传入success回调，可以获取设备对应的信息。
- 获取位置信息，wx.getLocation(), 传入success回调，可以获取当前位置信息。
在获取位置信息的时候需要在app.json中定义一下内容。
"permission": {
"scope.userLocation": {
// 获取信息的文本提示。
"desc": "需要获取您的位置信息"
}
},
Storage存储
可以存储任何数据类型的内容，不会像浏览器storage只能存储字符串类型的数据。
同步存取数据的方法
- wx.setStorageSync(string key, any data)
- wx.getStorageSync(string key)
- wx.removeStorageSync(string key)
- wx.clearStorageSync()
异步存储数据的方法：
- wx.setStorage(Object object)
- wx.getStorage(Object object)
- wx.removeStorage(Object object)
- wx.clearStorage(Object object)
wx.setStorage({
key: "name",
data: "zh",
encrypt: true, // 加密之后获取的时候也需要把该属性设置为true。
success: (res) => {
wx.getStorage({
key: "name",
encrypt: true,
success: (res) => {
console.log(res);
}
})
}
})
界面跳转的方式
通过navigator组件
navigator组件主要就是用于界面的跳转的，也可以跳转到其他小程序中。
通过wx的API跳转
跳转功能主要是通过wx.navigateTo()来实现。但是不能跳到 tabbar 页面。
一般跳转页面的时候都会携带一些数据。携带的参数可以在onLoad生命周期中拿到。
// 页面导航操作
wx.navigateTo({
// 跳转的过程, 传递一些参数过去
url: `/pages2/detail/detail?name=${name}&age=${age}`,
events: {
backEvent(data) {
console.log("back:", data);
},
coderwhy(data) {
console.log("why:", data);
}
}
})
}
onLoad(options) {
console.log(options);
const name = options.name
const age = options.age
}
wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。通过传入的配置设置。
和上一个页面通信，我们可以这样做。
- 方式一，获取页面对象实例
// 点击按钮监听事件
onTap() {
// 返回上一级页面
wx.navigateBack()
// 获取到上一个页面的实例
const pages = getCurrentPages() // 可以获取当前页面栈中的所有页面，并且当前页面也会拿到，返回一个数组。
const prePage = pages[pages.length-2] // 拿到上一个页面实例对象
prePage.setData() // 修改上一个页面数据。
}
// 如果想要让只要返回页面就修改数据，我们可以将上面的操作放在onUnload中
onUnload() {
// 获取到上一个页面的实例
const pages = getCurrentPages() // 可以获取当前页面栈中的所有页面，并且当前页面也会拿到，返回一个数组。
const prePage = pages[pages.length-2] // 拿到上一个页面实例对象
prePage.setData() // 修改上一个页面数据。
}
- 方式二， 在小程序基础库 2.7.3 开始支持events参数，也可以用于数据的传递。跳转到的页面传递参数的方式就好像子组件像父组件传递事件一样。
// 页面导航操作
wx.navigateTo({
// 跳转的过程, 传递一些参数过去
url: `/pages2/detail/detail?name=${name}&age=${age}`,
events: {
// 跳转到的页面调用该函数，并传递参数。
backEvent(data) {
console.log("back:", data);
}
}
})
// 拿到eventChannel
const eventChannel = this.getOpenerEventChannel()
// 通过eventChannel回调函数
eventChannel.emit("backEvent", { name: "zh", age: 23 })
原文链接：https://juejin.cn/post/7314519123178029068 作者：Spirited_Away
