实现微信内置浏览器分享功能（前期准备+VUE前端部分代码+调试+坑记录）-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现微信内置浏览器分享功能（前期准备+VUE前端部分代码+调试+坑记录）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、基础准备

1、登录微信公众号(需已认证)，找到[【设置与开发】>[【公众号设置】>【功能设置】>【js接口安全域名]，在下面填写你的域名。

实现微信内置浏览器分享功能（前期准备+VUE前端部分代码+调试+坑记录）,前端,微信,vue.js

2、在【设置与开发】>【基本配置】中拿到 appid&开发者密码 appSecret ，给后端用生成签名时用到。

二、前端代码部分

1、下载微信sdk

npm i weixin-js-sdk

2、在需要用的地方引入sdk

import wx from 'weixin-js-sdk'

3、获取微信公众号配置，提供appid和密钥给后端开发

4、获取当前页面的地址传给后端生成配置信息

  let shareUrl = sessionStorage.getItem('firstHref') ? sessionStorage.getItem('firstHref')
    : location.href.split('#')[0]

地址必须是当前页面的完整地址，如果用的是hash模式需要去除‘#’部分之后的信息，只保留前面的部分。

这里划重点：针对ios需要存储首次进入页面的时的地址作为参数传给后端（否则后续IOS端分享将会失效），安卓则不需要特殊处理，可以在每个页面都调用一下location.href.split(‘#’)[0]。主要原因如下：

IOS：每次切换路由，SPA的url是不会改变，发起签名请求的url参数必须是当前页面的url(就是第一次进入页面时的url)

Android：每次切换路由，SPA的url是会变，发起签名请求的url参数必须是当前页面的url(所以安卓端无需处理)

5、调用后端接口后将配置信息传给微信，wx的api需要写在wx.ready里面

getWxConfig({ shareUrl }).then((res) => {
    wx.config({
      debug: true, // 开启调试模式
      appId: res.appId, // 必填，公众号的唯一标识
      timestamp: res.timestamp, // 必填，生成签名的时间戳，由开发者生成的当前时间戳
      nonceStr: res.nonceStr, // 必填，生成签名的随机串，由开发者随机生成
      signature: res.signature, // 必填，签名
      // 必填，需要使用的JS接口列表
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
    })
    wx.ready(function () {
       // 微信分享的数据
        var shareData = {
          imgUrl: 分享图片,
          link: 分享url,
          desc: 分享副标题,
          title:分享标题,
          success: function () {},
        }
      // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
      wx.updateTimelineShareData(shareData)
      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      wx.updateAppMessageShareData(shareData)
    })
  })
}