⼩程序跳转H5页⾯没有返回按钮解决⽅案
公司做了⼀个⼩程序，使⽤webview搭建；页⾯全部开发完毕后，领导说这个我们得嵌⼊某某H5活动页。⼀想，这不很简单。直接把h5页⾯地址给我不就好了吗。然⽽问题来了，发现下图的问题了吗缺少返回按钮
想要返回⾸页，只能叉掉。重新进⼊。。。
后来想到的办法是这样的，在h5页⾯增加判断，如果是⼩程序跳转过来，都要增加⼀个返回按钮。完美解决~开⼼。然后页⾯变成了这样
这。。。⽆⼒吐槽了。接着解决办法吧。
后来⼀想，我可以在h5端判断是否是⼩程序环境，如果是在⼩程序环境下，就调⽤⼩程序的接⼝跳转到⼩程序⼆级页⾯通过webview显⽰h5页⾯，否则还是⾛vue-router的跳转，使⽤wx.miniProgram.navigateTot跳转到⼩程序。传输⼀个weburl的参数，？号之前的是跳转⼩程序页⾯地址，之后是⼩程序需要跳转到H5的地址
    isWeixin() {
var ua = window.LowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
},
isMiniProgram(callback) { //是否为⼩程序环境
//是否在环境
if (!this.isWeixin()) {
callback(false);
} else {
/
/API获取当前运⾏环境
Env((res) => {
if (res.miniprogram) { //⼩程序环境
callback(true);
} else {
callback(false);
}
})
}
},
//点击跳转
openOrder(){
this.isMiniProgram((res) => { //判断是否是⼩程序页⾯的回调函数
if (res) { //⼩程序页⾯
wx.miniProgram.navigateTo({
url: `../page/login/login?weburl=${this.$_ber}&type=1&source=a`
});
} else {
window.location.href = `${this.$_ber}?type=1&source=a`
}
})
},
在⼩程序端接收这个地址
// index.js
// 获取应⽤实例
const app = getApp()
Page({
data: {
arrurl:['www.baidu'],
url:'',
arr:[]
},
onLoad(options){
if(options.weburl){
for(var index in options){
if(index == 'weburl'){
this.setData({
arrurl:[...this.data.arrurl,`${options[index]}?`]
})
}else{
this.setData({
arr:[...this.data.arr,`${index}=${options[index]}&`]
})
}
react router 跳转
}
var strurl = ''
var str = ''
for(var i=0;i<this.data.arrurl.length;i++){
strurl += this.data.arrurl[i]
}
for(var i=0;i<this.data.arr.length;i++){
str += this.data.arr[i]
}
this.setData({
at(str)
})
}
},
/**
* ⽤户点击右上⾓分享【配置分享链接⼀定要给⾸页链接，要不然别⼈点进来没有返回按钮】
*/
onShareAppMessage: function () {
  return {path: '/pages/index/index'}
}
})
在跳转⼩程序的页⾯中设置../pages/login/login
<web-view src="{{url}}"></web-view>
⼩程序项⽬结构
好了，⼩程序跳转H5页⾯没有返回按钮的问题解决完了（这个⽅法还解决了⼀个跳转的时候有空⽩页的问题）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。