vue 微信分享

1. 安装sdk
2. 通过config接口注入权限验证配置
3. 通过ready接口处理成功验证
4. 通过error接口处理失败验证

1.安装sdk

  npm install weixin-js-sdk --save

创建wxShare.js

import wx from "weixin-js-sdk"

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wexinShare = (data, shareData) => {
    // var wx = require('weixin-js-sdk') || window['wx'];
    let appId = data.appId;
    let timestamp = data.timestamp;
    let nonceStr = data.nonceStr;
    let signature = data.signature;
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.checkJsApi({
        jsApiList: ['chooseImage', 'updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            //("checkJsApi:"+JSON.stringify(res))
        }
    });
    wx.ready(function() {
        // //分享到朋友圈”及“分享到QQ空间”
        wx.updateTimelineShareData({
            title: shareData.title, // 分享标题
            link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                // 设置成功
                //alert("分享到朋友圈:"+JSON.stringify(res));
            }
        })

        //“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
            title: shareData.title, // 分享标题
            desc: shareData.desc, // 分享描述
            link: shareData.link , // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                //alert("分享给朋友"+JSON.stringify(res));;
            }
        })

    });
    wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        //alert('验证失败返回的信息:'+JSON.stringify(res));
    });
}

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { wexinShare } from '@/libs/wxShare.js';
import { wxTicket } from '@/api/api.js';
export default {
  name: 'App',
  methods: {
    weixin() {
      let url = encodeURIComponent(location.href.split('#')[0]);
      wxTicket({url}).then(res => {
        //微信加签
        var obj = {
            appId: res.data.appid,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            timestamp: res.data.timestamp,
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
        };
        //分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
        let shareData = {
            title: '2022年度分享标题', // 分享标题
            desc:"2022年度分享描述",//分享描述
            // link: window.location.href
            link: 'http://wxsa.test.com/api/wx/connect',//地址
            imgUrl: "图片地址" // 分享图标
        };
        //引用
        wexinShare(obj, shareData);
      });
  },

  },
  watch:{
    $route(to,from){
    //路由切换时url改变，需要重新调用wxTicket接口
      this.weixin();
    }
  },
  created () {
  },
  mounted () {
    
  },
}
</script>

http://events.jianshu.io/p/0e2b6935602f