JSSDK 微信分享

2019-09-27 本文已影响0人阿畅_

记录一下我前段时间做微信分享遇到的麻烦和坑。
先说一下使用方式，最后写我遇到的坑

引入 JS 文件

我用的是 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
当然也可以用微信开发者文档上推荐的 1.4 的版本

初始化 config

首先调用后端的获取获取 jsapi_ticket ，需要传递当前页面的 URL 给后端，后端根据签名算法获取 ticket
上代码

  async initWxConfig() {
    let shareUrl = location.href.split('#')[0]

    const { data } = await request.post('url', {
      shareUrl,
      ...
    })

    wx.config({
      debug: true, // 是否开启 debug 模式，true 时会把每部的结果为 弹框的形式展现，开发模式建议开启,
      appId: xxx, // 微信公众号 AppId
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: [
        'showMenuItems',
        'hideMenuItems',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
      ]
    })

    // 隐藏不需要做分享的功能
    this.wxHideMenuItems()
    this.wxShowMenuItems()

    wxHideMenuItems() {
      wx.ready(() => {
        wx.hideMenuItems({
          menuList: [
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:share:weiboApp',
            'menuItem:share:timeline',
            'menuItem:share:facebook',
            'menuItem:share:appMessage'
          ]
        })
      })
    },
  }
  

  wxShowMenuItems() {
    wx.ready(() => {
      wx.showMenuItems({
        menuList: [
          'menuItem:share:timeline',
          'menuItem:share:appMessage'
        ]
      })
    })
  },

在页面中调用微信分享
代码如下:

  async wxShare() {
    await this.initWxConfig()
    wx.ready(() => {
      let configData = {
        title: 'xxx', // 分享出去 title
        desc: xxx, // 分享的描述
        link: xxx, // 分享的链接
        imgUrl: xxx, // 分享窗口的小图片 限制 300*300 大小
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success:function() {
          // 分享成功之后的回调
        }
      }
    })
    wx.onMenuShareTimeline(configData)
    wx.onMenuShareAppMessage(configData)
  }

注意: 因为微信的分享机制改了，如果用户点击了分享，没有选择分享给朋友或者朋友圈，返回页面之后，微信默认提示还是会提示分享成功

说一说遇到的问题吧

invalid url domain 当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，其实也不用写端口号
invalid signature签名错误小问题就不说了，按照微信的文档的步骤，一步一步排除，主要说一说关于 URL 的问题，这个问题我排除了很久，网上说的方法基本上我都试了，可以说我把百度和Google都给搜遍了😂，最后还是靠自己解决了。

我用的 vue 单页面应用，因为微信 IOS 和 Android 的URL 机制不同，安卓版的 URL 是随着页面 URL 的改变而改变的，但 IOS 不会，它只会记录页面第一次进来的路径(就是调用微信授权回调后的那个页面)，所有就会遇到
···安卓版的分享是没有问题的，一但到IOS中会报 invalid signature签名错误···
解决方式，判断是否为 IOS 版微信，在授权回调之后，记录下当前页面的 URL，

  if (isIOS) { //判断是否为 IOS 
    let shareUrl = location.href.split('#')[0]
    // 结果你可以存在 window 全局变量中，也可以存在 vuex 状态管理上
  }

然后回去签名的时候，IOS 和 Android 分开传给后端获取 ticket

之后会提醒签名成功之类的，但别太开心，试着分享出去，会遇到偶尔可以分享成功偶尔不可以(成功的意思是，自定义的title那些也会出来)，我是遇到这个问题了，不知道你会不会，这个问题网上没有找到解决办法，在微信开发者社区好像有人提过，我看的时候并没有人回答...

因为我突然想到我第一版活动并没有做 IOS 和 Android 的区分，就直接获取截取'#' 之前的 URL 就都可以实现分享，但对比代码也没有找到原因，然后突然想到我的 vue-router 版本不一样，因为我之前做了代码优化，router 用 cdn 引入的，用的版本太高了，我最的最新版 3.1.1 版本的，我把 router 的版本回到当初创建项目时的版本 2.6 发现这个问题解决了... 也不用TM区分环境了，直接获取 # 之前的 URL 就可以了

遇到 IOS 分享成功后，图片不显示安卓可以

这个原因是 IOS 分享小图片的URL 必须要是白名单的 URL 地址。

JSSDK 微信分享

说一说遇到的问题吧

猜你喜欢

热点阅读