uniapp怎么给所有的页面url拼上相同的参数？

  • Z时代
  • 2024-02-24
  • 分类：IT

需求： 项目是uniapp开发的vue2的H5项目，有一个需求是所有页面分享时需要带上同一个参数

问题：翻看了下文档，没有找到vue的beforEach这种全局导航守卫，所以该怎么给所有的页面url都拼上相同的参数呢？

补充：考虑到用户可能直接复制url的方式发给别人，所以想给所有页面跳转时加上参数，包括tabbar页面，而不是在微信jssdk的分享方法里封装这样。

大佬们，求教

回答：

这个分享的时候带同一个参数，如果是H5配置微信分享的话，你只需要封装一下分享方法里面的link默认携带这个参数就可以吧，如下：

 */
export const stringifyUrlArgs = (url, params) => {
  url += (/\?/).test(url) ? '&' : '?'
  url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
  return url
}
export const share = async (config, prod) => {
  await initSdk(prod) // 初始化sdk方法
  wx.ready(() => {
    // 兼容新老版本接口， 如不需要处理逻辑情况下， 调试好可以直接使用
    const message = Object.assign({
      title: document.title || '', // 分享标题
      desc: '', // 分享描述
      link: stringifyUrlArgs(window.location.href,{ param: '固定参数'}), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '' // 分享图标
    }, config)
    if (wx.onMenuShareAppMessage) {
      // 微信文档中提到这两个接口即将弃用，故判断
      wx.onMenuShareAppMessage(message) // 1.0 分享到朋友
      wx.onMenuShareTimeline(message) // 1.0 分享到朋友圈
    } else {
      wx.updateAppMessageShareData(message) // 1.4 分享到朋友
      wx.updateTimelineShareData(message) // 1.4 分享到朋友圈
    }
  })
}

回答：

如果你习惯使用vue的router，可以通过uni-simple-router这个库实现https://hhyang.cn/src/router/...

回答：

可以使用拦截器重写路由跳转的方法，下面是官网拦截器的示例，将request改为跳转的方法即可

uni.request({
    url: 'request/login', //仅为示例，并非真实接口地址。
    success: (res) => {
        console.log(res.data);
        // 打印： {code:1,...}
    }
});
uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后，修改code值为1
    args.data.code = 1
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

以上是 uniapp怎么给所有的页面url拼上相同的参数？ 的全部内容， 来源链接： utcz.com/p/932761.html

回到顶部