vue h5页面在微信浏览器中分享页面只能分享首页的问题解决方案

以前写过一篇文章，用来在微信浏览器中个性化分享页面

https://blog.csdn.net/youyudexiaowangzi/article/details/81983974

现在有如下问题：

vue项目在微信浏览器中点击分享，只会分享进入到第一个页面的url，比较笨的办法是在mount函数里面加如下处理代码

var pageState = this.$route.query.pageState
if (1 != pageState) {
if (pageState) {
delete this.$route.query.pageState
}

window.location.href = window.location.href + '&pageState=1'
return
}

通过url标识，执行一次跳转，这样分享的就是当前页面了，但是返回的时候会再次经历一遍，体验不好，如果只有一个分享页面也还好。

接下来是我的处理方法，修改vue的router配置

router/index.js

默认导出函数是

export defaultnew Router({}）

修改为

const router = new Router({})

router.beforeEach(function (to, from, next) {
  const agent = navigator.userAgent
  const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
  //console.log(to.path + ' == ' + location.pathname)
  if (isiOS && ('/reseller' + to.path !== location.pathname) && location.pathname.length < 50) {
    location.assign('/reseller' + to.fullPath)
  } else {
    next()
  }
})

export default router;

if代码块中的判断location.pathname.length < 50可以去掉，调试用的，调试不加/reseller导致页面循环跳转，'/reseller'是我的项目目录， http://localhost:8080/reseller/login

出现这个问题的原因：

1.当初做微信支付的时候，跳转链接不能带有#，所以修改了histroy模式，详见：

https://blog.csdn.net/youyudexiaowangzi/article/details/81777939

这里设置base页面<meta base="/distribute/">

distribute和reseller是两个项目，有相通的地方

2.vue项目在微信浏览器中无论怎么跳转，push、replace。微信的开发单页应用(SPA)的url不会变，虽然href会变。所以要通过如上代码做路由管理，assign会重新加载页面，但是不会在导航记录中新加一页。

顺便一提，禁用右上角分享功能

wx.hideMenuItems({
  menuList: ["menuItem:share:timeline", 
    "menuItem:copyUrl", 
    "menuItem:share:appMessage", 
    "menuItem:share:qq", 
    "menuItem:share:weiboApp", 
    "menuItem:favorite", 
    "menuItem:share:facebook", 
    "menuItem:share:QZone", 
    "menuItem:editTag", 
    "menuItem:delete", 
    "menuItem:copyUrl", 
    "menuItem:originPage", 
    "menuItem:readMode", 
    "menuItem:openWithQQBrowser", 
    "menuItem:openWithSafari", 
    "menuItem:share:email", 
    "menuItem:share:brand"], 
  success:function(){
    console.log('hiden success')
  }, 
  cancel:function(){
    console.log('hiden failed')
  }
})

配置wx使其支持hideMenuItems接口
  var SDKConfig = {
    appId:res.appId, 
    timestamp:res.timestamp, 
    nonceStr:res.nonceStr, 
    signature:res.signature, 
  }

  console.log(imgUrl)

  SDKConfig.debug = false

  SDKConfig.jsApiList = [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareWeibo',
    'onMenuShareQQ',
    'hideMenuItems', //隐藏分享
    'showMenuItems', //显示分享
    //'scanQRCode', //放开注释，一进页面就扫二维码了
  ]

  wx.config(SDKConfig)

详见

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信JS-SDK说明文档->10.界面操作

vue h5页面在微信浏览器中分享页面只能分享首页的问题解决方案

猜你喜欢