微信分享

微信分享,咋一看好像很複雜,實則非常簡單。只需要調用微信官方出的微信jssdk,加上些許配置,就可以實現h5頁面在微信上的分享,官方文檔戳這裏

1. 獲取基本信息

找到已有公衆號的appid,根據這個appid和url向後端發起請求,拿到配置所需要的參數:timestamp、noncestr和signature。

2. 實現

2.1 頁面引入JS-SDK文件

通過script標籤,引入微信官網的JS-SDK文件,或者npm、yarn安裝,詳情可以查看官方文檔,戳上面。

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

2.2 基本配置

wx.config({
  debug: false, // 是否開啓調試模式
  appId: appid, //appid
  timestamp: timestamp, // 時間戳
  nonceStr: noncestr, // 隨機字符串
  signature: signature, // 簽名
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
    'onMenuShareQZone'
  ] // 需要使用的JS接口列表
})

2.3 使用

wx.ready(function(){
  // 分享給好友
  wx.onMenuShareAppMessage({
    title: title, // 分享標題
    desc: desc, // 分享描述
    link: link, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    success: function () {
      doShareDone()
    },
    cancel: function () {
      doShareCancel()
    }
  })

 // 分享到朋友圈
  wx.onMenuShareTimeline({
    title: title, // 分享標題
    link: link, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    success: function () {
      doShareDone()
    },
    cancel: function () {
      doShareCancel()
    }
  })
})

3. 調試

wx.config裏的debug字段設置爲true時,就可以進行調試。
調試要用到微信開發者工具,選擇公衆號網頁項目,輸入頁面地址就可以了。

4. 遇到的問題及解決方案

微信JS-SDK說明文檔的附錄5裏有大部分問題的解決方案,在這裏我列出我遇到的幾個上面沒有給出解決方案的。

  1. Uncaught TypeError: Cannot read property 'config' of undefined
    解決:html頁面單獨引入了sdk,並且組件統一也引入了一遍sdk,導致問題,刪除其中之一。
  2. Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined
    解決:同問題1。
  3. invalid signature

解決:如果文檔裏的方法都沒有解決這個問題,還有一種方法,先設置一種最基礎的配置,使其config ok,然後再設置一遍自己需要的有各種參數的分享文案,這樣能繞過配置,成功分享。說的可能有點拗口,簡單點理解就是,頁面只要有一個config成功的配置,就可以再繼續配置其它分享,哪怕這個分享配置的signature無效。

關注公衆號【grain先森】,回覆關鍵詞 【18福利】,獲取爲你準備的年終福利,更多關鍵詞玩法期待你的探索~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章