使用web-view内嵌h5页面分享后,点击分享如何打开分享前的h5网页
发布于 5 年前 作者 yanjiang 857 次浏览 来自 问答

问题是:使用web-view内嵌h5页面分享后,点击分享打开的不是分享时的h5网页

我的实现过程是:

一、分享时(已经没有问题)

我是在web-view中内嵌了h5网页,用户在h5网页中已经多次跳转了,分享时,我设置的链接地址是

onShareAppMessage: function (res) {
    return {
      ///res.webViewUrl这就是web-view中的网址
      title: 'XX小程序',
      desc: 'XX小程序',
      path: "/pages/index/index?url=" + res.webViewUrl
    }
  }

经过验证分享的地址是正确的,没有什么问题,关键是用户打开分享的小程序时,总是显示的是首页,不是当时分享的那个页面。

二、用户点击打开分享时(有问题)

用户打开分享页后,我的实现如下

data: {
    MY_HOME: "https://xxx.gov.cn/index.html",
  },

  onLoad: function (res) {

   //例如分享的地址是/pages/index/index?url=https://xxx.gov.cn/2.html

   //这里的res.url就是获取的是url的入口参数即https://xxx.gov.cn/2.html

   //经过验证获取的地址没有任何问题

    if (typeof (res.url) != "undefined") {

   //把https://xxx.gov.cn/2.html赋值给MY_HOME,并更新视图

    this.setData({MY_HOME: res.url});
    }
  },

视图的代码是

<!--index.wxml-->
<view class="container">
   <web-view src="{{MY_HOME}}"></web-view>
</view>

按说,用户点击分享的小程序/pages/index/index?url=https://xxx.gov.cn/2.html后,小程序在加载时获取到https://xxx.gov.cn/2.html地址,并把此地址改变到MY_HOME中,同时视图中的<web-view src="{{MY_HOME}}"></web-view>中的地址也立即改变,不就是实现了打开分享前的页面吗?

可实际是不是那么回事,总是打开的首页,仿佛this.setData({MY_HOME: res.url});没有起作用,视图根本没有改变,为什么?请大师们帮助我。谢谢。

5 回复

webViewUrl加个enableURIComponent试,onLoad那decode一下

你好 解决了嘛?我也遇到同样的问题

先在web端

wx.miniProgram.postMessage({ webUrl: window.location.href })

然后在分享就可以拿到了

onShareAppMessage: function (res) {
    return {
      ///res.webViewUrl这就是web-view中的网址
      title: 'XX小程序',
      desc: 'XX小程序',
      path: "/pages/index/index?url=" + res.webViewUrl
    }
  }

因为经过多次跳转,你的webViewUrl里面可能会带有很多query参数,相应的就会带有很多"="号,然后再onload解析url的时候,这些等号就被划分成一个新的options里的参数,就是说你的webViewUrl不能完整地保留下来,而是被当成了几个参数的组合传给了onload函数

不行,按你说的试了不行,反复验证,就是this.setData({MY_HOME: res.url});这一句虽然把新网址设置进去了,但是前台<web-view src="{{MY_HOME}}"></web-view>此时并不是打开新网址,还是打开的

data: {
    MY_HOME: "https://xxx.gov.cn/index.html",
  },

中的那个网址,怎么办,谁帮帮我,问题在哪儿??

回到顶部