博客

效果图：（默认分享出来的样式是第一个，自定义完分享内容是第二个）

贴个微信官方JS-SDK文档链接：

点我直接跳转

步骤一：绑定域名

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2.将微信公众平台的txt文件给运维，让其添加到服务器所在的根目录下。

（备注：填写的域名须通过ICP备案的验证。）

步骤二：引入JS文件

在项目的html文件中引入JS文件，（支持https 和 http）：

<script src='https://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>

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

调用后端接口请求必传的三个参数（timestamp | nonceStr | signature）

请求接口的参数 encodeURIComponent(location.href.split(’#’)[0])

步骤四：通过ready接口处理成功验证

项目实例代码：

//引入封装好的接口，获取timestamp | nonceStr | signature三个参数
import { getWxParams } from "@/provider/http/api.js";
export default {
 data() {
   return {
     appId: 'wxa05747abe666b', //微信公众号唯一标识，在微信公众号后台获取
     title: 门急诊医疗险',  //分享内容的标题
     desc: '报销在线购药和门急诊费，最高2万元，最快1日内赔付', // 分享内容的简短描述
     link: location.href.split("?")[0],
     imgUrl: `${location.origin}/tkpage/static/wxshare.jpg` //必须是绝对路径
   };
 },
 created() {
   // 初始化调接口
   this.getKeyParams();
 },
 methods: {
   // 调接口，拿到timestamp nonceStr signature 三个参数
   async getKeyParams() {
     let keyParams = {
       requestId: new Date().getTime(),
       requestTime: new Date().getTime(),
       requestData: {
         url: encodeURIComponent(location.href.split('#')[0])
       }
     }
     let result = await getWxParams({
       data: keyParams,
       method: 'post'
     });
     let t = result.timestamp
     let n = result.noncestr
     let s = result.signature
//拿到三个参数之后，调用wxConfig方法进行权限验证
     this.wxConfig(t, n, s)
     console.log('@@@@@', t, n, s);
   },
   wxConfig(t, n, s) {
     wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: this.appId, // 必填，公众号的唯一标识
       timestamp: t, // 必填，生成签名的时间戳
       nonceStr: n, // 必填，生成签名的随机串
       signature: s,// 必填，签名
       jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
     });
     //然后 调用wxShare方法
     this.wxShare();

   },
   wxShare() {
     //通过ready接口处理成功验证 ,通过error接口处理失败验证
     wx.ready(() => {
       wx.updateAppMessageShareData({ //需在用户可能点击分享按钮前就先调用
         title: this.title, // 分享标题
         desc: this.desc, // 分享描述
         link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.imgUrl, // 分享图标
         success: function () {
           // 设置成功
           console.log("分享好友设置成功");
         }
       })
       //分享朋友圈
       wx.updateTimelineShareData({  //需在用户可能点击分享按钮前就先调用
         title: this.title, // 分享标题
         link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.imgUrl, // 分享图标
         success: function () {
           console.log('分享朋友圈设置成功');
           // 设置成功
         }
       })
     })
     wx.error(function (res) {
       console.log('生成微信签名失败了');
       // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
     })
   }
 }
};

备注：所有在wx.ready使用的微信api接口，都必须在wx.config的jsApiList数组中进行注册

在项目的入口页面导入封装好的微信分享方法：

import _wx from "@/provider/common/util/wxShare.js";  //写自己的路径

//实例中通过mixins导入
  mixins: [_wx],

踩过的坑：

图片地址不能是相对路径。所以我把图片资源放在public文件夹下面了。

wx.config没有成功success回调函数