美文网首页微信开发运营微信小程序微信小程序开发
小程序webview跳转页面后没有返回按钮完美解决方案

小程序webview跳转页面后没有返回按钮完美解决方案

作者: HashTang | 来源:发表于2018-09-22 00:17 被阅读3次

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很。在此驱动下,我所在公司也决定赶紧上车。

    但是,如果要按照小程序的套路重新写一份的话,又感觉付出的时间成本太大了,非常的不划算。于是乎,脑子灵光一闪,想起了小程序貌似有个小弟叫webviewwebview是啥,按字面意思就是网页视图(来自百度翻译)。官方是这么定义的:

    web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

    简单的讲就是我们可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。也就是说,已经写好的微信公众号H5页面可以直接挪到小程序了。一行代码就完成公众号到小程序的转移,一行代码就让我们多了一个流量入口,一行代码就解决了重新开发一套小程序代码的难题。想到这真的是激动死了。

    当我兴致冲冲的把链接放进webview中,就像这样:(真实项目链接地址,用自己的域名代替了^_^)

    <!--微信小程序index.wxml-->
    <web-view src="https://www.hxkj.vip/"></web-view>
    

    但是点击跳转页面的时候。唉哟,我去,我当时就真的楞了一下,页面左上角没有!!返回按钮!!导致回不去了,只能不停的往下点,没有回头路,这不是搞笑的吗。。。

    当时想了一种方案,就是在每个H5页面都加上一个带返回按钮的导航栏,但是想了一下,这种方案不可取,因为小程序的头部已经有个导航栏了,再加一个的话就显得非常的不协调,可以用一个字来形容——【丑到爆】。果断弃用!

    看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮的。那我们可以想到,如果在第二个页面也放个webview组件,用来显示跳转之后的链接,不就完美解决了吗?那么问题来了,怎么把主页点击的链接传到第二个页面呢?

    我们可以在H5页面使用jssdkH5页面跳转到小程序页面的方法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

    相关文章

      网友评论

      • 9d62a74676e7:请问楼主,如果要从web-view返回到小程序,要怎么弄。打开web-view之后,之前的页面栈就没了,变成以web-view为首页为栈底的。
      • 木溪bo:膜拜了,虽不明但觉厉
        HashTang:@欣然小波 😂
      • markRao:看不懂,大佬大佬
        HashTang:@android_尋道 😂

      本文标题:小程序webview跳转页面后没有返回按钮完美解决方案

      本文链接:https://www.haomeiwen.com/subject/jrgznftx.html