微信JS-SDK開發入門指南

時間 2019-12-13

原文原文鏈接

前言

本身要作一個微信分享，通常來講，接第三方平臺就能夠了。可是如今的需求是能夠更改在分享的時候, 須要修改分享的時候顯示的標題和圖片。這個時候就涉及到須要調微信提供的接口了。在作的過程當中，以爲這個過程比較繁瑣，所以記錄下來，供人蔘考。
在看本文以前請務必已經將微信公衆平臺中的微信網頁開發下的微信JS-SDK說明文檔第一部分瀏覽一次。這樣，更容易明白我在說什麼。前端

本文僅針對微信網頁開發，簡單的說明一下整個過程:算法

前端將當前頁面的url傳遞給後端，固然也能夠是後端直接獲取前端的url。
後臺根據前端頁面的url和相關的算法，生成一個簽名(signature), 並將生成簽名的其餘數據傳遞給前端，具體查看微信公衆平臺。
當前端接受到後端傳回的數據後，就能夠經過config接口注入權限驗證配置了，一旦成功後, 微信端會彈出: errMsg: {config is ok}。
調用微信的各類接口。

提供一個微信分享第三方平臺, 請搜索如何接入。vim

各類後臺生成signature的方法，微信公衆平臺已經提供了幾種語言的，若是你使用的是不一樣的語言，能夠根據提供的方法進行相應的修改。後端

提示: 報錯能夠查看微信公衆平臺上的解決方案。api

1. 過程

1.1 代碼

前端使用SDK的步驟:瀏覽器

componentDidMount() {
  const that = this;
  const url = encodeComponentURI(location.href);

  // 向後臺發送請求
  // url做爲參數傳遞到後臺去
  // () => {}, 當後臺返回數據後，調用回調函數
  this.props.actions.getSignaturePack(url, (obj) => {
    const {  signPackage } = obj;
    const { appId, timestamp, nonceStr, signature } = signPackage;

    // 參考微信公衆平臺: https://mp.weixin.qq.com/wiki
    // JSSDK使用步驟
    // 第一步: 填寫JS接口安全域名，請查看 2.1申請測試賬號
    // 第二步: 引入JS文件
    // 第三步: 經過config接口注入權限驗證配置
    wx.config({
      debug: true, // 調試模式, 請設置爲true
      appId,
      timestamp,
      nonceStr,
      signature,
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
    });

    // 第四步: 經過ready接口處理成功驗證
    wx.ready(() => {

      // 第五步: 判斷客戶端是否支持要使用的接口
      wx.checkJsApi({
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
        success: () => {
        },
      });

      // 第六步: 接口調用, 如分享給朋友
      const { displayLink, title, abstract } = this.props.state.detail;
      wx.onMenuShareAppMessage({
        title,
        desc: abstract,
        link: location.href,
        imgUrl: displayLink,
        type: '',
        dataUrl: '',
        success: () => {},
        cancel: () => {},
      });
    });
  });
}

1.2 代理

當你的代碼都完成的差很少的時候，你須要開始掃描微信二維碼進行測試，你卻發現掃出來的結果是網絡錯誤或者是其餘錯誤。這是因爲你在本地起的服務，而你用的第三方的平臺生成的二維碼，你的URL固然是localhost:8000之類的，因此你確定是掃不出來東西的。安全

所以你須要一個這樣的工具，在你起的本地服務，能夠映射到公網上去。固然，你也能夠本身搭建一個公網服務器，而後將你的項目放到服務器上，可是若是這麼作，你的測試就麻煩不少了。你每次的修改代碼都要上傳到服務器上去，固然，你也能夠直接在服務器上進行操做。說了這麼多，其實就是想推薦一個叫ngrok的代理工具給你,十分方便。它能夠將你本地起的一個服務映射到公網上去。服務器