微信開發-自定義分享卡片-node.js實現

時間 2019-11-08

標籤微信開發自定義分享卡片 node.js node 實現欄目 Node.js 简体版

原文原文鏈接

本篇主要講述，如何在微信中打開自家的頁面，在而後在用戶分享的時候，能由咱們自定義分享出去後，展現的頁面卡片中的頁面標題、頁面描述、頁面圖片和分享連接。html

此功能，具體的來講，是：前端

在微信打開自家的頁面
點擊右上角微信的功能按鈕，出現功能菜單
點擊分享給好友、朋友圈、QQ好友等
選擇對應的好友，發送
打開對應的好友聊天界面，能夠看到，被分享的頁面卡片，在展現上和默認的樣式有所不一樣。

以下如所示左側是我要分享的頁面，右側就是分享出去的頁面的卡片，分別是未自定義分享信息和自定義了分享信息：
node

僅在樣式上就已經有很所不一樣，此外最關鍵的，是分享的url也能夠自定義。web

默認分享的話，你當前頁面的url是什麼，那麼分享出去就是什麼，而自定義的狀況，則能夠本身定義url，有了極大的靈活性，固然也是還有一些限制，但至少，連接的參數是能夠徹底自定義的，這個後面文章繼續介紹。ajax

首先說一下，完成自定義分享信息的，從無到有的流程：

基礎硬件服務：json

須要一個公網能夠訪問的有效域名：api
1. 購買域名，並備案，我是在阿里雲購買的，備案須要十幾個工做日。
2. 購買ip，而後設置上面的域名，解析到該ip，這個時間能夠快到忽略。
擁有本身的服務器，來存放本身頁面項目：緩存

我仍是在阿里雲購買購買服務器，這個花費最大，幾百元一年的使用權。
並且這個服務器，本質就是一臺電腦，是電腦就有配置，我目前只是本身學習使用，配置幾乎是最低的，並且購買的套餐自帶公網ip，這麼一來我連上面購買ip的錢也省了。

綜上所述，最終我只購買了域名和一個套餐自帶公網ip的服務器，服務器用來放置前端項目和後臺項目。安全

阿里雲ECS：https://cn.aliyun.com/product/ecs服務器

微信公衆平臺，開發者認證

打開微信公衆平臺 https://mp.weixin.qq.com/，使用郵箱註冊，注意，一個郵箱只能註冊一個微信公衆平臺帳號，一個帳號只能選擇一種帳號分類且不能更改，這裏必定要慎重，這裏選擇訂閱號。
可選我的類型、企業類型等等，其中，我的類型是不沒有分享定製功能的，但企業類型我又不符合。。。最終我仍是選擇的我的類型，由於即便個人帳號沒有權限，但微信公衆號裏面，提供一個功能全開的測試帳號，使用測試帳號能夠進行學習和測試，仍是沒問題的。
填寫信息，綁定微信，註冊完成，登陸進去。
爲了進行開發，須要在這裏和你的後臺項目和前端項目進行對應的配置，讓微信確認後臺項目和前臺項目都是你的以後，纔會提供服務。
- 有關服務器端和後臺項目的配置：
  
  首先須要說明，因爲訂閱號的功能比較少，若是隻是進行學習，建議在 開發 => 開發者工具中選擇使用 公衆平臺測試賬號進行學習性開發，這樣可使用全功能的微信服務，配置也比較少。
  下面的配置步驟均是使用本身的帳號須要進行的配置
  1. 開發 => 基本配置 => 公衆號開發信息，在這裏記下開發者ID(AppID)，接着開通服務，記下開發者密碼(AppSecret)，開發中會須要輸入。
  2. 設置IP白名單，這裏寫的是本身的服務器IP地址，由於功能上線後，須要使用這臺服務器，經過開發者ID和密碼來向微信服務區獲取本身服務的access_token
  3. 進行下面的後臺項目，目的是讓微信肯定這個後臺項目是你的，檢驗方法是微信發起一個get請求，你返回正確的返回值，啓用此配置時調用：
    - url：接口地址，好比http://wx.my.com/forWx
    - Token：徹底自定義的一個字符串，至關於個暗號，你的返回值須要這個字符串參與拼裝。
    - EncodingAESKey：隨機生成便可
    - 消息加解密方式：自選，這裏我使用的是明文模式
- 有關前端項目的配置：
  1. 設置 => 公衆號設置 => 功能設置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網站的域名，好比wx.qq.com或者wx.qq.com/user，最多可寫三個，且須要驗證。

> 驗證的方式，就是將一個微信提供的txt文件，放在此域名對應的放置於服務器中的web項目的訪問根目錄中，須要和主文件（大部分默認爲```index.html```）放在同一級，當提交的時候，微信會進行訪問，來獲取文件，確認此域名是你的。

配置完成後，就能夠進行開發了。

下面進入代碼階段。

證實後臺項目和前端項目時我本身的

首先，上面證實服務是本身的部分，咱們須要實現一個接口，我用http://wx.my.com/forWx打的比方，那麼爲了啓用配置，我須要實現/forWx給微信調用，下面是代碼：

node的基礎環境搭建省略，這裏只寫接口內部方法了，關鍵是參數加密拼裝

const crypto = require('crypto')  // 引入加密模塊
const config = require('./config') // 引入配置文件
// 提供給微信調用
server.get('/forWx', function (req, res) {
  res.header('Access-Control-Allow-Origin', '*')
  // 1.獲取微信服務器Get請求的參數 signature、timestamp、nonce、echostr
  let signature = req.query.signature // 微信加密簽名
  let timestamp = req.query.timestamp // 時間戳
  let nonce = req.query.nonce // 隨機數
  let echostr = req.query.echost // 隨機字符串

  // 2.將token、timestamp、nonce三個參數進行字典序排序，其中token就是設置在微信頁面中的那個自定義字符串
  let array = [config.token, timestamp, nonce]
  array.sort()

  // 3.將三個參數字符串拼接成一個字符串進行sha1加密
  let tempStr = array.join('')
  const hashCode = crypto.createHash('sha1') //建立加密類型 
  let resultCode = hashCode.update(tempStr, 'utf8').digest('hex')
  
  //4.開發者得到加密後的字符串可與signature對比，標識該請求來源於微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send('mismatch')
  }
})

完成，上面是證實服務器是個人，後面還須要證實前端項目是個人，這個就跳過了，由於太簡單，直接下載那個文件，放到本身服務器中，前端項目的index.html同級便可

上面的操做，是隻要想進行微信公頁面開發，必需要有的步驟，一切的基礎。

開始正式開發

首先順着功能使用流程，順一下實現此功能的方法：

用戶在微信打開頁面後，當即或者經過方法觸發ajax，把當前url做爲參數，請求本身的後臺接口。
後臺請求微信服務器，發送本身的AppID和AppSecret，獲得一個有效期爲7200秒的Access_token
後臺再次請求微信服務器，發送Access_token，獲得一個有效期一樣爲7200秒的Ticket（若是前端請求本身的時候，Ticket沒有過時，就不用這麼麻煩請求兩次微信服務器了，直接使用便可，Access_token同理）
後臺有了可使用的Ticket，接着，生成以下幾個參數，返回給前端：
- timestamp：當前時間戳
- url：前端傳過來的url
- jsapi_ticket：獲取的Ticket
- appId：本身的AppID
- signature：使用sh1加密的noncestr、timestamp、url、jsapi_ticket的字符串
前端終於拿到了返回值，而後初始下微信服務（固然初始化微信服務以前，須要引入微信SDK的js文件），初始化服務，須要用到以上參數，同時，能夠配置你要監聽的用戶操做，好比咱們的關鍵---分享頁面！
微信配置執行後，書寫配置完成的回調函數，這個回調函數裏，能夠定義用戶分享頁面時的頁面參數，當此頁面被分享出去以後，展現的分享卡片，就是咱們定義的內容啦！
固然，不只僅是分享頁面，發朋友圈和其餘一些也是能夠配置，還有更多的配置項，均可以開始進行了！

下面是前端獲取微信受權的方法

// 微信初始化 sdk
let wxInitSdk = function() {
  let myUrl = window.location.href.split('#')[0]
  console.log('個人url: ', myUrl)
  $.ajax({
    url: BASE_URL + '/getsign',
    type: 'post',
    data: {
      url: myUrl,
    },
    success: function(data) {
      console.log(data)
      wx.config({
        debug: false, // 開啓調試模式,開發時能夠開啓
        appId: data.appId, // 必填，公衆號的惟一標識 由接口返回
        timestamp: data.timestamp, // 必填，生成簽名的時間戳 由接口返回
        nonceStr: data.noncestr, // 必填，生成簽名的隨機串 由接口返回
        url: data.url, // 必填，生成簽名的隨機串 由接口返回
        signature: data.signature, // 必填，簽名 由接口返回
        jsApiList: [
          'updateAppMessageShareData', // 分享
        ] // 此處填你所用到的方法
      });
      // 方法監聽
      wx.ready(function () {
        console.log('初始化成功')
        wx.updateAppMessageShareData({
          title: '咱的標題', // 分享標題
            desc: '咱的描述', // 分享描述
            link: window.location.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: window.location.protocol + '//' + window.location.hostname + '/img.jpg', // 分享圖標
            type: "link", // 分享類型,music、video或link，不填默認爲link
            dataUrl: "", // 若是type是music或video，則要提供數據連接，默認爲空
            success: function () {
              // 用戶確認分享後執行的回調函數
              console.log("分享配置完成");
            },
            cancel: function () {
              // 用戶取消分享後執行的回調函數
              console.log('分享取消')
            }
         });
      })
      wx.error(function (res) {
        console.log('初始化失敗')
        console.log(res)
      })
    },
    error: function(error) {
      console.log('錯誤')
    }
  })
}

下面是node端的一系列方法

const sha1 = require('sha1')
const config = require('./config') // 引入配置文件

// 臨時緩存
const myCache = {
  access_token: {
    setedTime: 0, // 數據設置的時間
    val: undefined, // 數據的值
  },
  jsapi_ticket: {
    setedTime: 0, // 數據設置的時間
    val: undefined, // 數據的值
  },
}

// 獲取 access_token
const getAccess_token = () => {
  // access_token 未過時
  if (myCache.access_token.val && (Math.floor(Date.now()) - myCache.access_token.setedTime) / 1000 < 7100) {
    return Promise.resolve(myCache.access_token.val)
  } else { // access_token 過時了
    return new Promise((resolve, reject) => {
      request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`, function (error, response, body) {
        if (!error && response.statusCode == 200) {
          let tokenMap = JSON.parse(body)
          // 緩存 access_token
          myCache.access_token.setedTime = Math.floor(Date.now())
          myCache.access_token.val = tokenMap.access_token
          resolve(tokenMap.access_token)
        } else {
          reject(error)
        }
      })
    })
  }
}

// 獲取 Ticket
const getJsapi_ticket = () => {
  // 緩存的簽名還沒有過時 --- 微信規定過時時間爲7200秒，這裏本身設置7100秒，留100秒的延遲
  if (myCache.jsapi_ticket.val && (Math.floor(Date.now()) - myCache.jsapi_ticket.setedTime) / 1000 < 7100) {
    return Promise.resolve(myCache.jsapi_ticket.val)
  } else { // 已過時，從新獲取
    return new Promise((resolve, reject) => {
      // 先獲取 token
      utils.getAccess_token().then(access_token => {
        request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', function (error, resp, json) {
          if (!error && resp.statusCode == 200) {
            let ticketMap = JSON.parse(json)
            // 緩存 ticket
            myCache.jsapi_ticket.setedTime = Math.floor(Date.now())
            myCache.jsapi_ticket.val = ticketMap.ticket
            resolve(ticketMap.ticket)
          } else {
            reject(error)
          }
        })
      }).catch(error => reject(error))
    })
  }
}

// 我本身的前端調用，獲取微信簽名
server.post('/getsign', (req, res) => {
  try {
    params = req.body
    if (!params && !params.url) return res.send('please set url of page')
    let url = params.url
    // 獲取 ticket
    getJsapi_ticket().then(jsapi_ticket => {
      let num = Math.random()
      let noncestr = num.toString(32).substr(3, 20) // 隨機字符串
      let timestamp = Math.floor(Date.now() / 1000) //精確到秒
      let obj = {
        noncestr,
        timestamp,
        url,
        appId: config.appId,
        jsapi_ticket,
        signature: sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)
      }

      res.send(obj)
    }).catch(error => {
      res.send(error)
    })
  } catch (error) {
    res.send(error)
  }
})

總體功能實現的步驟和具體代碼如上，請酌情參考。