微信小程序初识
1.常见的交互反馈设计
消息提示框 wx.showToast({title:"",icon:""})
模态对话框 wx.showModal({title:''",content:"",sunccess:()=>{}})
2.本地存储
(1.)同步 存 wx.setStorageSync("key","value") 取wx.getStorageSync('key');
(2.)异步 存 wx.setStorage({key:"",data:{}}),取 wx.getStorage({key:"".success:(res)=>{}})
3.小程序界面跳转传参
(1.)wx.navigateTo({url:""}),使用app.json里的路径前边要加/,跳转非tabBar页面,保留跳转前页面,可以传参。
(2.)wx.switchTab({url:""}),跳转到tabbar页面,但是不能传参。
(3.)wx.redirectTo({url:""}),跳转非tabbar页面,但会关闭或者卸载跳转前页面,可以传参。
(4.)wx.reLaunch({url:""}),跳转到任意界面,但是没有返回按钮,会卸载所有页面,可以传参。
(5.)在标签内书写<navigator url="" open-type=""></navigator>
(6.)wx.navigateBack({delta:1})返回
4.请求
小程序请求的封装
function request(options) {
// 请求拦截器
// ...
// 1. 加一些统一的参数,或者配置
if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
options.url = "https://showme2.myhope365.com" + options.url
}
// 默认的请求头
let header = {
"content-type": "application/x-www-form-urlencoded",
};
if (options.header) {
header = {
...header,
...options.header
}
}
return new Promise((reslove, reject) => {
// 调用接口
wx.request({
// 默认的配置
// 加载传入的配置
...options,
header,
success(res) {
// 响应拦截器,所有接口获取数据之前,都会先执行这里
// 1. 统一的错误处理
if (res.statusCode != 200) {
wx.showToast({
title: '服务器异常,请联系管理员',
})
}
reslove(res)
},
fail(err) {
reject(err)
}
})
})
}
export function get(url, options = {}) {
return request({
url,
...options
})
}
export function post(url, data, options = {}) {
return request({
url,
data,
method: "POST",
...options
})
}