微信自定义分享消息和遇到的一个问题

一、前言

　　微信自定义分享是一个很常见的功能，主要是利用微信JS-SDK实现自定义的分享效果。

　　通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。

　　官方文档写的很详细。这里主要总结一下自定义分享的过程。

二、前期准备

1、微信服务号一个，最好通过实名认证的，不然没有权限去调用一些接口；

2、一个域名，当然最好是备案的。

3、微信开发者工具，方便本地调试。

三、详细步骤

1、查看AppId,AppSecret以及绑定域名 (查看官方文档)

2、引入js文件

<script src="//res.wx.qq.com/open/js/jweixin-1.3.0.js" type="text/javascript"></script>

3、通过AppId和AppSecret请求accessToken,然后通过accessToken获取jsapi_ticket，生成config接口所需参数。我们这里是后台写好的jssdk接口来获取所需参数。

4、在wx.config接口注入权限配置

在第3步的回调中注入参数：

wx.config({
     debug: o.debug === 'true',//可以通过在接口加上这个参数来开启调试模式
     appId, // 必填，公众号的唯一标识
     timestamp: parseInt(timestamp, 10), // 必填，生成签名的时间戳
     signature, // 必填，签名，见附录1
     jsApiList: o.jsApiList,
      fail(res) {
             if (o.debug === 'true') {
                    window.alert('fail:jssdk授权配置错误')
                }
             },
       success(res) {
             if (o.debug === 'true') {
                  alert(`OK:${JSON.stringify(res)}`)
              }
        }
})

5、通过ready接口处理成功验证

weixinShare(options, callback) {
      let defaults, o

      defaults = {
        title: '****', // 分享标题
        link: location.href, // 分享链接
        imgUrl: `${location.protocol}${require('@/assets/logo.png')}`, // 分享图标
        desc: '*************',
        success() {
          // 用户确认分享后执行的回调函数
        },
        cancel() {
          // 用户取消分享后执行的回调函数
        }
      }
      o = Object.assign(JSON.parse(JSON.stringify(defaults)), options || {})

      wx.onMenuShareTimeline(o) // 分享到朋友圈
      wx.onMenuShareAppMessage(o) // 分享给朋友
      wx.onMenuShareQQ(o) // 分享到QQ
      wx.onMenuShareWeibo(o) // 分享到腾讯微博
      wx.onMenuShareQZone(o) // 分享到QQ空间
    },

四、遇到一个问题

项目中期把http迁移到https的时候发现，微信报错，‘“invalid url domain”，开始很是奇怪，因为前期公众号绑定的是域名，没有带协议头，按道理应该自动识别协议头才对。不过事实上不是这样的，迁移到https的时候应该在后台重新备案，绑定需要一段时间才能通过。

五、总结　　

1、都是很传统的做法

2、注意结合debug模式去调试，如果有问题，可以看到微信的报错信息了。

六、参考

http://www.cnblogs.com/joshua317/p/4761948.html