H5 集成微信自定义分享(兼容 ios & android)

最新推荐文章于 2024-07-02 10:26:29 发布

被打劫了

最新推荐文章于 2024-07-02 10:26:29 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/tzzdblog/article/details/109189604

版权

本文记录了H5集成微信自定义分享时遇到的困难，包括签名错误、版本问题、URL处理等，并分享了解决这些问题的步骤和经验，最终实现iOS和Android的兼容。

摘要由CSDN通过智能技术生成

最近做 H5 集成微信分享踩了很多坑，多少辛酸泪只有经历了才能体会，仅以此篇文章记录其中的酸甜苦辣。

分享出去的效果大概是这样子的：

接到这个需求之后，因为之前也没有做微信相关开发的经验，于是查阅了一些方案之后，最终决定采用 JS-SDK 来做。于是很愉快的打开微信官方开发文档，仔细阅读了需要用到的相关接口和注意事项。于是有了第一个版本的代码：

 async mounted() {
    const { data, ok } = await this.$ajax.post({
      url: ’这是请求的api地址‘,
      data: {
        url: window.location.href.split('#')[0],
      },
    })
    let wxConfig = {}
    if (ok) {
      wxConfig = data
    }
    const { signature, nonceStr, timestamp } = wxConfig
    const wx = await import('weixin-js-sdk')
    wx.config({
      appId: 'xxxxxxxx',
      signature,
      nonceStr,
      timestamp,
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
    })
    wx.