微信公众号 自定义分享

注意：微信自定义分享需要在配置号的域名下测试，本地测试传入的url会导致signature计算错误。

开发步骤 添加微信js-sdk 依赖
在js引入需要用到的js

//vue引入微信sdk
**import** wx **from 'weixin-js-sdk'**;
//vue引入支持axios 进行ajax请求
**import** axios **from 'axios'**;

**var** appid;
**var** timestamp;
**var** nonceStr;
**var** signature;
**var** url;
**var** introduce;
**var** venueName;
**var** pictureUrl;
mounted() {

*//获取微信配置参数
share*();
      **function** *share*() {
        **var** url = **location**.**href**.replace(/#/g, **"%23"**);
        **var** _this = **this**;
//调用后台接口返回signature等相关数据，传入的url应该是#之前的url
//比如http://www.baidu.com/#/AAAAAA  
//url应该是http://www.baidu.com/而不是加上#之后的全部值
//本项目因为业务需要将#转码了
        axios.get(**'/api/wechat/jsapi/signature?redirectURI='** + url).then(**function** (v) {
          **if** (v.**code** == 200) {
            **console**.log(v.**result**);
            **var** result = v.**result**;
            **var** params = result.wxJsapiSignature;
            appid = params.**appId**;
            timestamp = params.**timestamp**;
            nonceStr = params.**nonceStr**;
            signature = params.**signature**;
            url = params.**url**;
//业务相关数据 可以省略
            **if** (result.artVenueTpl) {
              **var** artVenueTpl = result.artVenueTpl;
              venueName = artVenueTpl.**name**;
              pictureUrl = artVenueTpl.pictureUrl;
              introduce = artVenueTpl.**introduce**;
            }
            *initWXShare*();
          }
        });
      }
      **function** *initWXShare*() {
        wx.config({
//设置debug为ture可以在访问时打印信息
          **debug**: **false**,
          **appId**: appid, *// 和获取Ticke的必须一样------必填，公众号的唯一标识
          ***timestamp**: timestamp, *// 必填，生成签名的时间戳
          ***nonceStr**: nonceStr, *// 必填，生成签名的随机串
          ***signature**: signature,*// 必填，签名，见附录1
          //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
          ***jsApiList**: [
            **'onMenuShareAppMessage'**, **'onMenuShareTimeline'**,
            **'onMenuShareQQ'**, **'onMenuShareQZone'
          **]
        });
        *//处理验证失败的信息
        *wx.error(**function** (res) {
          logUtil.printLog(**'验证失败返回的信息:'**, res);
        });
      }
      *//处理验证成功的信息
      *wx.ready(**function** () {
        *//       alert(window.location.href.split('#')[0]);
        //分享到朋友圈
        *wx.onMenuShareTimeline({
          **title**: venueName, *// 分享标题
          ***desc**: introduce, *// 分享描述
          ***link**: url, *// 分享链接
          ***imgUrl**: pictureUrl, *// 分享图标
          *trigger: **function** (res) {
            *// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          *},
          fail: **function** (res) {
            alert(***JSON***.stringify(res));
          }
        });
        *//分享给朋友
        *wx.onMenuShareAppMessage({
          **title**: venueName, *// 分享标题
          ***desc**: introduce, *// 分享描述
          ***link**: url, *// 分享链接
          ***imgUrl**: pictureUrl, *// 分享图标
          *trigger: **function** (res) {
            *// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          *},
          fail: **function** (res) {
            alert(***JSON***.stringify(res));
          }
        });
        *//分享到QQ
        *wx.onMenuShareQQ({
          **title**: venueName, *// 分享标题
          ***desc**: introduce, *// 分享描述
          ***link**: url, *// 分享链接
          ***imgUrl**: pictureUrl, *// 分享图标
          *trigger: **function** (res) {
            *// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          *},
          fail: **function** (res) {
            alert(***JSON***.stringify(res));
          }
        });
        *//分享到QQ空间
        *wx.onMenuShareQZone({
          **title**: venueName, *// 分享标题
          ***desc**: introduce, *// 分享描述
          ***link**: url, *// 分享链接
          ***imgUrl**: pictureUrl, *// 分享图标
          *trigger: **function** (res) {
            *// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          *},
          fail: **function** (res) {
*//            mui.toast(JSON.stringify(res));
          *}
        });
      });
    },
 },

主要错误，有一下两个：

1.config:invalid signature
这个错误主要是传入url不正确导致的
解决办法 看代码中注释 请求signature的
2.** config:invalid url domain**

image.png

是因为微信公众号js安全域名没有配置或配置错误，需要将用到的主域名入 如>baidu.com
配置在微信公众平台，详见如下图

image.png

域名配置出现下面错误

image.png

需要将Mp文件下载到本地上传到域名直接访问的根目录下，然后就能配置成功。