摘要：本篇主要講述，如何在微信中打開自家的頁面，在然后在用戶分享的時候，能由我們自定義分享出去后，展示的頁面卡片中的頁面標題頁面描述頁面圖片和分享鏈接。

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

此功能，具體的來說，是：

在微信打開自家的頁面

點擊右上角微信的功能按鈕，出現功能菜單

點擊分享給好友、朋友圈、QQ好友等

選擇對應的好友，發送

打開對應的好友聊天界面，可以看到，被分享的頁面卡片，在展示上和默認的樣式有所不同。

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

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

默認分享的話，你當前頁面的url是什么，那么分享出去就是什么，而自定義的情況，則可以自己定義url，有了極大的靈活性，當然也是還有一些限制，但至少，鏈接的參數是可以完全自定義的，這個后面文章繼續介紹。

基礎硬件服務：

需要一個公網可以訪問的有效域名：

購買域名，并備案，我是在阿里云購買的，備案需要十幾個工作日。

購買ip，然后設置上面的域名，解析到該ip，這個時間可以快到忽略。

擁有自己的服務器，來存放自己頁面項目：

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

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

阿里云ECS：https://cn.aliyun.com/product/ecs

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

打開微信公眾平臺 https://mp.weixin.qq.com/，使用郵箱注冊，注意，一個郵箱只能注冊一個微信公眾平臺賬號，一個賬號只能選擇一種賬號分類且不能更改，這里一定要慎重，這里選擇訂閱號。

可選個人類型、企業類型等等，其中，個人類型是不沒有分享定制功能的，但企業類型我又不符合。。。最終我還是選擇的個人類型，因為即使我的賬號沒有權限，但微信公眾號里面，提供一個功能全開的測試賬號，使用測試賬號可以進行學習和測試，還是沒問題的。

填寫信息，綁定微信，注冊完成，登錄進去。

為了進行開發，需要在這里和你的后臺項目和前端項目進行對應的配置，讓微信確認后臺項目和前臺項目都是你的之后，才會提供服務。

有關服務器端和后臺項目的配置：

首先需要說明，由于訂閱號的功能比較少，如果只是進行學習，建議在 開發 => 開發者工具中選擇使用公眾平臺測試帳號進行學習性開發，這樣可以使用全功能的微信服務，配置也比較少。  
下面的配置步驟均是使用自己的賬號需要進行的配置

開發 => 基本配置 => 公眾號開發信息，在這里記下開發者ID(AppID)，接著開通服務，記下開發者密碼(AppSecret)，開發中會需要輸入。

設置IP白名單，這里寫的是自己的服務器IP地址，因為功能上線后，需要使用這臺服務器，通過開發者ID和密碼來向微信服務區獲取自己服務的access_token

進行下面的后臺項目，目的是讓微信確定這個后臺項目是你的，檢驗方法是微信發起一個get請求，你返回正確的返回值，啟用此配置時調用：

url：接口地址，比如http://wx.my.com/forWx

Token：完全自定義的一個字符串，相當于個暗號，你的返回值需要這個字符串參與拼裝。

EncodingAESKey：隨機生成即可

消息加解密方式：自選，這里我使用的是明文模式

有關前端項目的配置：

設置 => 公眾號設置 => 功能設置 => 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 + "http://" + 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 + "×tamp=" + timestamp + "&url=" + url)
      }

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

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