小程序webview跳转页面后没有返回按钮完美解决方案
2019-09-03 22:19
357 查看
随着小程序越来越火爆,使一个产品如果只有
公众号H5页面和
APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很。在此驱动下,我所在公司也决定赶紧上车。
但是,如果要按照小程序的套路重新写一份的话,又感觉付出的时间成本太大了,非常的不划算。于是乎,脑子灵光一闪,想起了小程序貌似有个小弟叫
webview,
webview是啥,按字面意思就是网页视图(来自百度翻译)。官方是这么定义的:
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
简单的讲就是我们可以在小程序内放置一个
<web-view>组件来链接我们的
HTML页面了。也就是说,已经写好的微信公众号
H5页面可以直接挪到小程序了。一行代码就完成公众号到小程序的转移,一行代码就让我们多了一个流量入口,一行代码就解决了重新开发一套小程序代码的难题。想到这真的是激动死了。
当我兴致冲冲的把链接放进
webview中,就像这样:(真实项目链接地址,用自己的域名代替了^_^)
<!--微信小程序index.wxml--> <web-view src="https://www.hxkj.vip/"></web-view>
但是点击跳转页面的时候。唉哟,我去,我当时就真的楞了一下,页面左上角没有!!返回按钮!!导致回不去了,只能不停的往下点,没有回头路,这不是搞笑的吗。。。
当时想了一种方案,就是在每个
H5页面都加上一个带返回按钮的导航栏,但是想了一下,这种方案不可取,因为小程序的头部已经有个导航栏了,再加一个的话就显得非常的不协调,可以用一个字来形容——【丑到爆】。果断弃用!
看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮的。那我们可以想到,如果在第二个页面也放个
webview组件,用来显示跳转之后的链接,不就完美解决了吗?那么问题来了,怎么把主页点击的链接传到第二个页面呢?
我们可以在
H5页面使用
jssdk中
H5页面跳转到小程序页面的方法
wx.miniProgram.navigateTo,然后再携带一个
weburl参数:
//H5页面js navigate(modelName) { //控制页面跳转---小程序、公众号、非微信跳转方式 【modelName---vue路由名字】 this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数 if (res) {//小程序页面 wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName}); } else { this.$router.push({name: modelName});//非小程序页面使用vue路由跳转 } }) }, isMiniProgram(callback) { //是否为小程序环境 //是否在微信环境 if (!isWeixin()) { callback(false); } else { //微信API获取当前运行环境 wx.miniProgram.getEnv((res) => { if (res.miniprogram) {//小程序环境 callback(true); } else { callback(false); } }) } }
接着在小程序第二个页面
webview.js中接收
weburl参数,注意配置分享的页面链接:
// pages/webview/webview.js Page({ /** * 页面的初始数据 */ data: { url:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ url: options.weburl //获取H5页面传递过来的weburl }); }, /** * 用户点击右上角分享***【特别注意这里,配置分享链接一定要给首页链接,要不然别人点进来又是没有返回按钮的哦】*** */ onShareAppMessage: function () { return { path: '/pages/index/index' } } })
并赋值给
webview.wxml中的
src属性
<!--pages/webview/webview.wxml--> <web-view src="{{ url }}"></web-view>好了,这样的话,就完美解决了小程序
webview跳转页面后没有返回按钮的问题。
转载请注明出处:https://www.jianshu.com/p/a7bb1a826548
作者:TSY
个人空间:https://www.hxkj.vip
喜欢的话,可以关注下我的微信公众号
相关文章推荐
- 小程序中跳到webview页面没有返回按钮?已解决
- webview中html页面里的跳转-----返回键处理
- web-view跳转到小程序页面
- 如何获得web view上的关闭按钮返回指定页面
- 从h5网站页面跳转到微信小程序——微信web-view高级用法9
- Android之WebView后退按钮为返回上一个页面
- webview跳转页面的返回操作不成功,死循环问题
- iOS模态跳转的页面WebView中加载html调用本机相册会dismiss返回上一个页面解决办法
- web 开发,个人中心每个请求,判断用户是否登录,若没有登录,则跳转到登录页面,登录成功后返回之前页面
- 使用WebView控件时,H5页面跳转后返回键处理
- 小程序嵌入web-view网页后,点击网页中的按钮跳转回小程序
- Springmmvc 返回modleAndView 视图没有按设置的页面跳转
- android:WebView在没有网络情况下,点击当前页面内链接不跳转并弹出提示框
- 在webview中浏览页面的时候,实现在点击退出按钮的时候,返回上一页而不是直接退出
- 详解解决小程序中webview页面多层history返回问题
- Android在web view下点击返回键直接退出程序完美解决
- 直击根源:vue项目微信小程序页面跳转web-view不刷新
- 详解如何探测小程序返回到webview页面
- WEB程序需要打印格式页面时解决方案汇总
- java web session过期 跳转页面没有跳出frame的问题