目录
1.授权登录
重复跳转的解决方法：重新写一个专门授权的跳转页面
参考链接：网页授权 | 微信开放文档
2.添加公共路由前缀
main.js
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app',true,"/mujuan")
// /mujuan为公共路由名称vue.config.js
module.exports = defineConfig({
publicPath:'/mujuan',
transpileDependencies: true,
lintOnSave:false
})
// 添加publicPath3.改变单独某一页面css无效的情况
beforeCreate () {
document.querySelector('body').setAttribute('style', 'background-color:#ff3c00;')
},
beforeDestroy () {
document.querySelector('body').removeAttribute('style')
},
// 为了避免页面样式穿透 销毁
4.禁止浏览器缩放
在打包之后的index.html中更改
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标题</title>
<script>
//禁止双指放大
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
// 禁止双击放大
let lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, { passive: false });
</script>5.微信关怀模式下字体变大样式错乱的问题
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize); }
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
<style type = 'text/css'>
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
<style>6.微信公众号支付及支付成功后的回调问题
支付成功之后要跳转页面，开始一直不跳，最后才发现是this指向改变了
// yarn add weixin-jsapi --save 下包
import wx from "weixin-jsapi";
paynummoney(order) {
var that = this;
let is_niming = "";
if (that.radioValue == true) {
is_niming = 1;
} else {
is_niming = 0;
}
request
.post("/api/v2/Juanzeng/pay_two", {
order: order,
cs_project_id: that.cs_project_id,
price: that.moneyNum,
is_niming: is_niming,
})
.then((res) => {
wx.ready(() => {
wx.chooseWXPay({
timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: res.data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: res.data.paySign, // 支付签名
success: function (res) {
// res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示：
// res.errMsg将在用户支付成功后返回ok，但并不保证它绝对可靠， 切记。
// res.errMsg === 'chooseWXPay:cancel' 支付取消
if (res.errMsg === "chooseWXPay:ok") {
// 支付成功进入这个判断
// Toast.success("支付成功");
// Dialog.confirm({
// title: "支付成功",
// message: "点击确定按钮查看证书",
// })
// .then(() => {
// that.gozhengshu(order);
// })
// .catch(() => {
// that.moneyNum = "";
// that.showTitPopup = false;
// });
that.gozhengshu(order);
} else if (res.errMsg === "chooseWXPay:cancel") {
// 经过测试 用户取消支付不会进入这个判断，而是进入complate和cancel函数
Toast.success("支付取消");
}
},
// 不管支付成功与否，只要拉起支付之后进行任何操作之后，都会进入complate函数
complete: function (res) {
if (res.errMsg === "chooseWXPay:ok") {
// 成功 res.errMsg === 'chooseWXPay:ok' // 支付成功提示页面，点击完成按钮之后
Toast.success("支付成功");
// Dialog.confirm({
// title: "支付成功",
// message: "点击确定按钮查看证书",
// })
// .then(() => {
// that.gozhengshu(order);
// })
// .catch(() => {
// that.moneyNum = "";
// that.showpopup = false;
// });
that.gozhengshu(order);
// 或者关闭窗口// wx.closeWindow() 如果调用这个关闭接口，要在验签的时候配置jsapiList// WeixinJSBridge.call('closeWindow');
} else if (res.errMsg === "chooseWXPay:cancel") {
// 取消 res.errMsg === 'chooseWXPay:cancel'
Toast.success("支付取消");
}
// 对于下面这个说法：我经过实际测试：ios和Android支付成功后点击完成按钮都会进入success和complete函数，并且返回信息都是 res.errMsg === 'chooseWXPay:ok'
// 网友说法：对于安卓客户端支付成功后不进入chooseWXPay函数success的问题原因是：iOS和安卓返回的数据不同，实际如下：支付成功后：安卓客户端返回的是 {"errMsg":"getBrandWCPayRequest:ok"}，而iOS返回的是{"err_Info":"success","errMsg":"chooseWXPay:ok"}，安卓找不到success入口
},
// 用户取消支付--实际上进入cancel 和 complate 函数
cancel: function (res) {
Toast.success("支付取消");
},
// 支付失败
fail: function (res) {
Toast.success("支付失败");
},
});
});
});
},
wxjssdk() {
request.post("/api/v2/Juanzeng/get_thing").then((res) => {
wx.config({
debug: false,
appId: res.data.data.appId,
timestamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
signature: res.data.data.signature,
jsApiList: ["chooseWXPay"],
openTagList: ["wx-open-launch-weapp"],
});
});
},
created() {
this.wxjssdk();
},
7.根据数组的某一个数组进行数组排序
sort() {
// 从大到小排列
function sortUseAge(a, b) {
return b.shop_staff_congye - a.shop_staff_congye;
}
const newList = this.data.cyjglist.sort(sortUseAge);
console.log(newList);
this.setData({
cyjglist:newList
})
},8.小程序新版本自动更新
app.js ,
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 () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success: function (res) {
if (res.confirm) {
//3. 新的版本已经下载好，调用applyUpdate应用新版本并重启
updateManager.applyUpdate()
} else if (res.cancel) {
//不应用
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({ title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
})
})
}
})
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({ title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
},
onLaunch() {
this.autoUpdate()
}
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
