博客

思路

微信分享web网页首先要根据想要分享的网址生成二维码，通过二维码打开网址，并在微信内置浏览器中点击分享按钮，才能自定义分享内容。

具体实施

1. 登录微信公众平台。添加相应权限和ip
   
   登录微信公众平台，在公众号设置–功能设置–JS接口安全域名中添加使用分享的域名，同时要将微信公众平台提供的txt文件放到项目的根目录下，
   
   一定要让其在 域名/xxx.txt路径下可访问
   
   
   在公众平台–基本配置中获取appid、appSecret并设置ip白名单。
2. 在vue项目中，引用weixin-js-sdk插件。
   
   在想要分享出去的页面上添加分享方法，也可以写公共的js文件，在想要分享的页面中引用此js文件。
   
   
   weixin.js文件
   
   
   其中/getWxConfig是后台接口，为前端提供分享所需参数。

import wx from 'weixin-js-sdk'			//微信sdk依赖

//要用到微信API
import api from "~api";
const setting = require('../../utils/settings');
import axios from 'axios'
//     var getMsg = res.data.data;
function getJSSDK(url, dataForWeixin) {
    // axios.get('').then(function(res) {
    api.get('/getWxConfig?url=' + url).then(res => {
        if (res.data.state ==='error') {
            console.log('接口没有数据返回');
            return;
        }
        wx.checkJsApi({
            jsApiList:['updateAppMessageShareData','updateTimelineShareData'],
            success:function(res){}
        })
        wx.config({

            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //下面这里不用管  让后台看一下  让他返给你 
            appId: setting.weixin_appid, // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名
            jsApiList: ['updateAppMessageShareData','updateTimelineShareData']// 必填，需要使用的JS接口列表
        })
       // console.log(res) //打印测试
        wx.ready(function () {
            //分享到盆友
            wx.updateAppMessageShareData({
                title: dataForWeixin.title, // 分享标题
                desc: dataForWeixin.desc, // 分享描述
                link: dataForWeixin.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: dataForWeixin.imgUrl, // 分享图标
                success: function (res) {
                    // 设置成功
                    console.log(res) 
                }
            });
            wx.updateTimelineShareData({
                title: dataForWeixin.title, // 分享标题
                link: dataForWeixin.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: dataForWeixin.imgUrl, // 分享图标
                success: function () {
                    // 设置成功
                }
            })
        })
        wx.error(function (res) {
            console.log(res) 
        });
    })
}
export default {
    // 获取JSSDK
    getJSSDK: getJSSDK
}

在需要使用分享的页面引用

let jssdk = require("@/utils/weixin.js");
      let dataForm={
        title: this.articleInfo.title, // 分享标题
        desc: this.articleInfo.summary, // 分享描述
        link: this.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:this.articleInfo.imgUrlList[0], // 分享图标
      }
      jssdk.default.getJSSDK(this.url,dataForm);

如果不做后台，那么前台到这里就完成了，后台接口给出正确参数即可自定义分享。

3. 后端
   
   在需要写后端的时候，后端主要需要构造前台所需参数，
   
   appId: setting.weixin_appid, // 必填，公众号的唯一标识
   
   timestamp: result.timestamp, // 必填，生成签名的时间戳
   
   nonceStr: result.nonceStr, // 必填，生成签名的随机串
   
   signature: result.signature, // 必填，签名
   
   其中appId为公众平台提供，timeStamp为时间戳，nonceStr随机串，signature为签名，其中signature需要多步计算，首先需根据appId和appSecret请求得到token，然后根据token请求得到ticket，然后根据ticket和想要分享出去的页面的url，时间戳、随机串生成签名。然后将生成签名的时间戳、随机串、签名一起返给前台。
   
   生成签名：

var createNonceStr = function () {
    return Math.random().toString(36).substr(2, 15);
  };
  
  var createTimestamp = function () {
    return parseInt(new Date().getTime() / 1000) + '';
  };
  
  var raw = function (args) {
    var keys = Object.keys(args);
    keys = keys.sort()
    var newArgs = {};
    keys.forEach(function (key) {
      newArgs[key.toLowerCase()] = args[key];
    });
  
    var string = '';
    for (var k in newArgs) {
      string += '&' + k + '=' + newArgs[k];
    }
    string = string.substr(1);
    return string;
  };
  var sign = function (jsapi_ticket, url) {
 
    var ret = {
      jsapi_ticket: jsapi_ticket,
      nonceStr: createNonceStr(),
      timestamp: createTimestamp(),
      url: url
    };
    var string = raw(ret);
        jsSHA = require('jssha');
        shaObj = new jsSHA(string, 'TEXT');
    ret.signature = shaObj.getHash('SHA-1', 'HEX');
  
    return ret;
  };
  
  module.exports = sign;

注意：


微信公众平台明确说明，token和ticket每两小时刷新，不要多频次的请求，所以，需要在后台缓存token和ticket。

所有都设置完后，分享即可自定义实现。