微信自定義分享消息和遇到的一個問題

1、前言

　　微信自定義分享是一個很常見的功能，主要是利用微信JS-SDK實現自定義的分享效果。

　　經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

　　官方文檔寫的很詳細。這裏主要總結一下自定義分享的過程。

2、前期準備

一、微信服務號一個，最好經過實名認證的，否則沒有權限去調用一些接口；

二、一個域名，固然最好是備案的。

三、微信開發者工具，方便本地調試。

3、詳細步驟

一、查看AppId,AppSecret以及綁定域名 (查看官方文檔)

二、引入js文件

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

三、經過AppId和AppSecret請求accessToken,而後經過accessToken獲取jsapi_ticket，生成config接口所需參數。咱們這裏是後臺寫好的jssdk接口來獲取所需參數。

四、在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)}`)
              }
        }
})

五、經過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空間
    },

4、遇到一個問題

項目中期把http遷移到https的時候發現，微信報錯，‘「invalid url domain」，開始非常奇怪，由於前期公衆號綁定的是域名，沒有帶協議頭，按道理應該自動識別協議頭纔對。不過事實上不是這樣的，遷移到https的時候應該在後臺從新備案，綁定須要一段時間才能經過。

5、總結　　

一、都是很傳統的作法

二、注意結合debug模式去調試，若是有問題，能夠看到微信的報錯信息了。

6、參考

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