weixin-js-sdk

場景：在h5移動端，實現分享朋友，分享朋友圈。

插曲：一開始我認為是不能做到分享的，主要是我從微信小程序的角度出發的，想着微信小程序都做不到分享朋友圈功能，那h5就更不能實現了，導致出現了錯誤的判斷。那么我就來總結一下實現都步驟吧！

開發環境：vue-cli2,vux,axios

注意：一定要去看sdk都官方文檔：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

因為安裝都sdk版本不同（我安裝都版本是"weixin-js-sdk": "^1.4.0-test"），里面有些方法可能被棄用，這是本人踩過都坑。

 

封裝src/utils/wxshare.js

import axios from 'axios'
import wx from 'weixin-js-sdk'
//技術文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2
//要用到微信API
function getJSSDK(shareUrl, dataForWeixin) {
// 'http://www.hashclub.net/front/wechat/getconfig'
  axios.post(后台接口, {
    url:shareUrl
  }).then(res => {
    console.log(res.data);
    wx.config({
      debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
      appId: res.data.appid, // 必填，公眾號的唯一標識
      timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
      signature: res.data.signature, // 必填，簽名
      jsApiList: [
        'updateAppMessageShareData', 'updateTimelineShareData'
      ] // 必填，需要使用的JS接口列表
    })
    wx.ready(function () {
        // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）
        wx.updateAppMessageShareData({
            title: dataForWeixin.title,
            desc: dataForWeixin.des,
            link: dataForWeixin.linkurl,
            imgUrl: dataForWeixin.img,
            success: function success(res) {
                console.log(res) // errmsg:updateAppMessageShareData:OK
                console.log('已分享');
            },
            cancel: function cancel(res) {
            console.log('已取消');
            },
            fail: function fail(res) {
            alert(JSON.stringify(res));
            }
        });
        // 自定義“ 分享到朋友圈” 及“ 分享到QQ空間” 按鈕的分享內容（ 1.4 .0）
        wx.updateTimelineShareData({
            title: dataForWeixin.title,
            link: dataForWeixin.linkurl,
            imgUrl: dataForWeixin.img,
            success: function success(res) {
                console.log(res)
                alert('已分享');
            },
            cancel: function cancel(res) {
                alert('已取消');
            },
            fail: function fail(res) {
                alert(JSON.stringify(res));
            }
        });
    })
    wx.error(function (res) {
      alert("微信驗證失敗");
    });
  })
}
export default {
  // 獲取JSSDK
  getJSSDK
}

 

分享頁面調用src/views/activity/detail.vue

<x-button class="buy" @click.native.prevent="share" >分享</x-button>

methods: {
    share(){
      let obj={
          title: this.info.title,// 分享標題
          des: this.info.content,// 分享描述
          linkurl:`${process.env.BASE_API}vux/#/activity/detail?id=${this.$route.query.id}`,// 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
          img:this.info.img // 分享圖標
      }
      // let url = encodeURIComponent(window.location.href.split('#')[0]);
      let url = window.location.href.split('#')[0]
      sdk.getJSSDK(url, obj)
      // 顯示
      this.$vux.toast.show({
        text: '請點擊右上角瀏覽器分享功能'
      })
    }
}

 

總結：h5的分享，其實也就是瀏覽器功能的分享，只是我們自定義了分享的標題，描述，地址以及圖片，至於分享朋友（調出好友列表）/分享朋友圈（調出微信發布界面），這就不是前端實現的范疇了。人家微信也沒有開放調出好友列表和朋友圈的接口啊！

拓展：有沒有辦法點擊分享，直接打開瀏覽器右上角菜單，如圖：

 

 答案：無解，再說騰訊爸爸現在不讓這么干了。

解決方案，增加分享指示