一、小程序内嵌H5页面,安卓物理返回键bug处理
H5页面嵌入在小程序中,当页面需要登录才能观看,这时使用安卓手机的物理返回键会在在当前页面返回两次,这时会清除小程序页面传给H5页面的登录信息导致页面登录失效。暂时没有找小程序监听触发物理返回键后直接关闭小程序的方法,只能在H5中监听微信浏览器中触发物理返回键进行处理,跳转到小程序首页或者其他页面,从而避免联登信息失效。
效果图
小程序中登录信息拼接(uni-app)
因为每次点击该页面都需要传输一次所以用onShow。
onShow: function(options) {
let user = "?userId=" + uni.getStorageSync('userId') + "&tokenId=" + uni.getStorageSync('tokenId') + "&phone=" + uni.getStorageSync('userPhone');
if (getApp().globalData.isProduct) {
this.courseUrl = getApp().globalData.productUrl + statis.urlList.courseUrl + user
} else {
this.courseUrl = getApp().globalData.textUrl + statis.urlList.courseUrl + user
}
console.info("user:",user)
console.info(this.courseUrl)
},
H5监听微信浏览器中返回键处理
因为个人项目中需要进行联登,如果在进行跳转处理之后再回到页面之后会导致联登信息丢失,故在跳转后增加了刷新页面
/* 对微信浏览器中手机物理返回键进行处理(该方法仅在微信浏览器中生效) */
window.onpopstate = function (event) {
// 监听到已经按下返回键,获取URL
var url = "" + document.location + "";
// 判断当前页面URL是否符合条件(根据自己需要处理此部分逻辑)
if (url.indexOf("indexPage") > 0) {
WeixinJSBridge.invoke('closeWindow',{},function(res){}); //关闭当前页面
}else{
wx.miniProgram.switchTab({ //触发跳转需要的页面
url: '/pages/index/index'
})
location.reload();
}
};
window.history.pushState('forward', null);
window.history.forward(1);
H5跳转小程序页面需要链入微信的js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
以上是个人对H5页面嵌入到小程序中,当前页面物理返回键可以触发两次的bug处理办法。
二、uni-app组件easycom模式
uni-app编译成小程序时不支持该模式,要正常引用注册组件
import searchBox from "@/components/search-box/search-box.vue";
components: {
nodata,
searchBox
},
三、小程序接口获取appid报错
后台通过wx.request 里面的headers来获取里面的appid,但是接口请求头中出现!Provisional headers
are shown拦截信息,导致后台获取不到headers里面的Referer,然后报错;
正常示例:
因链接不是https没有ssl证书被拦截示例: