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

小程序 专栏收录该内容
2 篇文章 0 订阅

随着小程序越来越火爆,使一个产品如果只有公众号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
个人空间:https://www.hxkj.vip

喜欢的话,可以关注下我的微信公众号

微信公众号

  • 6
    点赞
  • 1
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

四六级在大学bai各类考试中占有相当du重要的地位。在大四在校签订单位的时候,绝大多zhi数公司都有英语要求:通dao过四级。真正进入社会以,随着现在英语的普及,很多地方,很多事情,都会用到英语,具有一定的英语水平,能够让你在工作中出色不少。 大学英语四六级对毕业求职的重要性: 关系到能不能拿到毕业证 我不敢说全国,最起码在广东,重本的211和985的名牌大学,大部分四六级证书是和毕业证挂钩的。可能还没到就业,万一你的全国英语四级考试达不到425分,你就拿不到你的毕业证书。所以四六级你说重不重要? 是一半企业的敲门砖 (1)随着大学生毕业人数的增长,社会面临的就业压力越来越大,企业为了挑选人才,国企和外企一般都会把四六级证书作为一个最低的门槛。 (2)虽然说全国英语四六级证书只是一张纸,并不能证明一个人的英语水平,但是四级的合格线设在425分对于国内大学生英语要求还是比较低的。所以如果你没有通过英语四级的证书,很多企业在筛选简历时就会把你直接out了。 (3)可以说如果你没有通过大学英语四六级的考试,你的前途就暗淡了一半,很多企业都不会为你敞开大门。当然,如果你有关系的话什么证书都是扯淡。 海外合作是大势所趋 (1)现在这个社会,海外人员越来越多,海外合作的公司也越来越多,走在街上,说不定一天能遇到好几个问路的外国人。所以如果你没有能证明你英语能力的一纸证书,你很难向公司证明你的外语水平和能力。 (2)在北上广深,就连现在的计程车司机也有一定的英语基础,否则生意就很难做下去。所以说在日常生活中,我们也有很多机会和外国人打交道,在这个海外合作是大势所趋的年代,英语能力更为重要。
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值