一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情。
🍋欢迎关注 🍋[微信小程序开发从0到1] 🍋共同努力
一 、 前言
- 封装 微信的 request
- 封装 小程序更新
- 封装 小程序分享
二、 微信的request
因为后台开发没用token所以封装时没加上token。我这边就讲解一下 。
'content-type': 'application/json'
是默认值 但是有时后台需要是form表单
'content-type': 'application/x-www-form-urlencoded',
'Authorization': '这里可以添加token
/**
* 封装 微信的 request
*/
function request(url, data = {}, method = "GET") {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: method,
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept-Language': 'zh-cn,zh;q=0.5' // 'Authorization': 'Bearer ' + getDataByKey('token') 自己封装的方法
},
success: function (res) {
if (res.data.code == 200 || res.statusCode == 200) {
resolve(res);
} else {
reject(res);
}
},
});
});
}
/**
* get post 请求
*/
function get(url, data, isLogin) {
return request(url, data, "GET", isLogin);
}
function post(url, data = {}) {
return request(url, data, "POST");
}
module.exports = {
get,
post,
request,
};
三、 小程序更新
在app.js onLaunch(){ this.autoUpdate()} 小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取. wx.canIUse(string schema)
判断小程序的API,回调,参数,组件等是否在当前版本可用. wx.getUpdateManager()
获取全局唯一的版本更新管理器,用于管理小程序更新。关于小程序的更新机制,可以查看运行机制文档
autoUpdate: function () {
var self = this;
// 获取小程序更新机制兼容
if (wx.canIUse("getUpdateManager")) {
const updateManager = wx.getUpdateManager();
//1. 检查小程序是否有新版本发布
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
//2. 小程序有新版本,则静默下载新版本,做好更新准备
updateManager.onUpdateReady(function () {
console.log(new Date());
wx.showModal({
title: "更新提示",
content: "新版本已经准备好,是否重启应用?",
success: function (res) {
if (res.confirm) {
//3. 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
} else if (res.cancel) {
//如果需要强制更新,则给出二次弹窗,如果不需要,则这里的代码都可以删掉了
wx.showModal({
title: "温馨提示~",
content: "本次版本更新涉及到新的功能添加,旧版本无法正常访问的哦~",
success: function (res) {
self.autoUpdate();
return;
},
});
}
},
});
});
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: "已经有新版本了哟~",
content: "新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~",
});
});
}
});
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
wx.showModal({
title: "提示",
content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。",
});
}
},
四、小程序分享
根据自家产品需求所有页面都需要分享。这里就直接封装到app.js文件里面。
这里重点说一下 getCurrentPages()
后面会大量用到这个api 获取页面栈 返回之间的页面
let pages = getCurrentPages(), //获取当前页面pages里的所有信息。
const view = pages[pages.length - 2], //view 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。
这里的view 就是上个页面的 this A页面跳转到B页面 B页面做出改变导致A页面的数据发生改变 就可以view.setData({'去改变A页面的值'})或者去调用A页面的方法去更新那个值。
overShare: function () {
let that = this
//监听路由切换
//间接实现全局设置分享内容
wx.onAppRoute(function (res) {
//获取加载的页面
let pages = getCurrentPages(),
//获取当前页面的对象
const view = pages[pages.length - 1],
const data = null
let isShare = ['subpkg/auction-detail/auction-detail']
if (view.route.includes(isShare)) return
if (view) {
data = view.data;
console.log("是否重写分享方法", data.isOverShare);
if (!data.isOverShare) {
data.isOverShare = true;
view.onShareAppMessage = function () {
//你的分享配置
return {
title: '快来和我一起加入群票吧!',
path: "/pages/auction-items/auction-items?phone=" + that.globalData.userInfo.utel,
imageUrl: "/static/images/geren.png"
};
};
}
}
});
},
五、总结
这篇文章主要就是一些封装,后面根据这篇文章在进行引用,说一下页面栈的东西。