React / Vue 前后端分离项目实现微信分享教程

柔情只为你懂 2022-04-03 03:53 370阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

网上非常多的微信分享例子和教程，但是都不全面，甚至不少错误。自己根据微信官方文档踩了好几个坑才撸成功。痛定思痛，写下这篇文章，详细的告诉您 React / Vue 前后端分离项目的如何实现微信分享。

--------------------

### 一. 申请微信订阅号/服务号 ###

这个是必要条件。需要注意的是个人的微信订阅号是没有微信分享权限的。

### 二. 配置 JS 接口安全域名 ###

![Image 1][]

安全域名

假设你的前端项目访问的主域名是 abc.com，那就填 abc.com。

### 三.后端获取微信签名 ###

这个步骤需要后端服务器和微信服务器进行交互，获得「网页授权access\_token」，根据 access\_token 把关键的几个参数算出来，传给前端。这几个参数分别是：  
`appId , timestamp , nonceStr , signature`  
（因为本文主要针对前端开发者，后端的内容就不展开了）

后端要算出这几个参数不仅仅需要 access\_token，还需要一个 URL 参数。这个 URL 是前端带有分享功能页面的当前 URL。  
比如 [www.abc.com/123][www.abc.com_123] 这个页面需要微信分享功能，那么就把这个 URL 传给后端，后端算出来参数后再返回给前端。

**注意，只要 URL 发生变化，都得需要重新获取微信分享参数。**除非个别页面不需要微信分享功能。

![Image 1][]

URL 配置

如果前端用的是react-router 或者 vue-router ，请尽量用 history 模式。如果你用的是 hash 模式，那么你给后端传递 URL 是有坑的，具体可以看这篇[文章][Link 2]。

### 四. 前端编写分享代码 ###

打开[微信分享官方文档][Link 3]  
步骤大概是这样的

1.  [引入微信 JS sdk][Link 3]
2.  [通过config接口注入权限验证配置][config]
3.  [步骤三：通过config接口注入权限验证配置][Link 3]
4.  微信分享接口调用

第一步我们可以直接使用 `weixin-js-sdk` 这个库

npm install weixin-js-sdk --save

下面是前端代码：

import wx from 'weixin-js-sdk'
    
    const ua = window.navigator.userAgent.toLowerCase()
    // 如果不在微信浏览器内，微信分享也没意义了对吧？这里判断一下
    if (ua.indexOf('micromessenger') < 0) return false
    
    // 最好在在 router 的全局钩子里调用这个方法，每次页面的 URL 发生变化时，都需要重新获取微信分享参数
    // 如果你的 router 使用的是 hash 形式，应该不用每次都重新获取微信分享参数
    const data = $ajax.post({
      url: '当前页面的 URL',
      // xxx
      // xxx
    })
    
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名，见附录1
      jsApiList: [
        'onMenuShareAppMessage',
        'onMenuShareTimeline'
      ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    })
    
    
    wx.ready(() => {
      //分享给朋友
      wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      })
    
      //分享到朋友圈
      wx.onMenuShareTimeline({
        title: '', // 分享标题
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      })
    })

代码亲测是没问题的，你可以下载一个微信开发者工具，打开对应的网页，测试没问题之后再用手机测试微信分享。

--------------------

### 五. 关于 link 的坑 ###

[JSSDK自定义分享接口的策略调整][JSSDK]

![Image 1][]

image.png

注意！！一定要按照规定填写 link 字段，不然微信开发者工具里测试成功，但是用手机测试还是会失败！！！

**link // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致**

### 六.路由选择 history 模式还是 hash模式？ ###

history 优点

*  URL 好看，没有 \#

history 缺点

*  如果你每一个页面都需要微信分享，那么每一个子路由都需要用当前的 URL 换取微信分享 config
 *  需要额外配置 nginx

hash 优点

*  无需配置 nginx
 *  只需要用域名请求一次微信分享 config ，全部的子页面都能微信分享

hash 缺点

*  URL 里面有个 \# ，不好看。但是如果你的网站是移动端的话就无所谓了。URL 不明显。

--------------------

hash 的坑：拿 URL 换取微信分享 config 时，最好这么写：

const url = window.location.href.split('#')[0]

或者直接写主域名。例如`http://wwww.baidu.com/`  
**最后一定要加斜杠，别问我为什么。。。**

--------------------

10-24 更新：  
开发的时候，一定要下载一个微信开发者工具，在那里面进行微信分享测试。代码开启 debug 模式后，如果签名错误，微信开发者工具会直接提醒你的。判断签名是否正确非常重要。  
  
作者：Yi罐可乐  
链接：https://www.jianshu.com/p/e13b639ace32

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://link.jianshu.com?t=https%3A%2F%2Fmp.weixin.qq.com
[Image 1]: 
[www.abc.com_123]: https://link.jianshu.com?t=http%3A%2F%2Fwww.abc.com%2F123
[Link 2]: https://link.jianshu.com?t=http%3A%2F%2Fwww.cnblogs.com%2Fmingxinice%2Fp%2Fmingxin.html
[Link 3]: https://link.jianshu.com?t=https%3A%2F%2Fmp.weixin.qq.com%2Fwiki%3Ft%3Dresource%2Fres_main%26id%3Dmp1421141115
[config]: https://link.jianshu.com?t=https%3A%2F%2Fmp.weixin.qq.com%2Fwiki%3Faction%3Ddoc%26id%3Dmp1421141115%26t%3D0.6458919053552938%23buzhou3
[JSSDK]: https://link.jianshu.com?t=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FhAdtKl2i4ilyo9HxT1kXyw
[2018121912254161]: /images/20220403/7abfc751a39640f3b510741e147a942f.png