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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

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

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

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

二. 配置 JS 接口安全域名

登录微信公众平台，配置安全域名

安全域名

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

三.后端获取微信签名

这个步骤需要后端服务器和微信服务器进行交互，获得「网页授权access_token」，根据 access_token 把关键的几个参数算出来，传给前端。这几个参数分别是：
appId , timestamp , nonceStr , signature

（因为本文主要针对前端开发者，后端的内容就不展开了）

后端要算出这几个参数不仅仅需要 access_token，还需要一个 URL 参数。这个 URL 是前端带有分享功能页面的当前 URL。

比如 www.abc.com/123 这个页面需要微信分享功能，那么就把这个 URL 传给后端，后端算出来参数后再返回给前端。

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

URL 配置

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

四. 前端编写分享代码

打开微信分享官方文档

步骤大概是这样的

  1. 引入微信 JS sdk

  2. 通过config接口注入权限验证配置

  3. 步骤三：通过config接口注入权限验证配置

  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自定义分享接口的策略调整

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、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

以上是 React / Vue 前后端分离项目实现微信分享教程 的全部内容， 来源链接： utcz.com/z/381504.html

回到顶部