微信開(kāi)發(fā)-自定義分享卡片-node.js實(shí)現(xiàn)

Object 發(fā)布于2019-08-23 15:58 / 2112人閱讀

摘要：本篇主要講述，如何在微信中打開(kāi)自家的頁(yè)面，在然后在用戶(hù)分享的時(shí)候，能由我們自定義分享出去后，展示的頁(yè)面卡片中的頁(yè)面標(biāo)題頁(yè)面描述頁(yè)面圖片和分享鏈接。

本篇主要講述，如何在微信中打開(kāi)自家的頁(yè)面，在然后在用戶(hù)分享的時(shí)候，能由我們自定義分享出去后，展示的頁(yè)面卡片中的頁(yè)面標(biāo)題、頁(yè)面描述、頁(yè)面圖片和分享鏈接。

此功能，具體的來(lái)說(shuō)，是：

在微信打開(kāi)自家的頁(yè)面

點(diǎn)擊右上角微信的功能按鈕，出現(xiàn)功能菜單

點(diǎn)擊分享給好友、朋友圈、QQ好友等

選擇對(duì)應(yīng)的好友，發(fā)送

打開(kāi)對(duì)應(yīng)的好友聊天界面，可以看到，被分享的頁(yè)面卡片，在展示上和默認(rèn)的樣式有所不同。

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

僅在樣式上就已經(jīng)有很所不同，此外最關(guān)鍵的，是分享的url也可以自定義。

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

首先說(shuō)一下，完成自定義分享信息的，從無(wú)到有的流程：

基礎(chǔ)硬件服務(wù)：

需要一個(gè)公網(wǎng)可以訪(fǎng)問(wèn)的有效域名：

購(gòu)買(mǎi)域名，并備案，我是在阿里云購(gòu)買(mǎi)的，備案需要十幾個(gè)工作日。

購(gòu)買(mǎi)ip，然后設(shè)置上面的域名，解析到該ip，這個(gè)時(shí)間可以快到忽略。

擁有自己的服務(wù)器，來(lái)存放自己頁(yè)面項(xiàng)目：

我還是在阿里云購(gòu)買(mǎi)購(gòu)買(mǎi)服務(wù)器，這個(gè)花費(fèi)最大，幾百元一年的使用權(quán)。  
而且這個(gè)服務(wù)器，本質(zhì)就是一臺(tái)電腦，是電腦就有配置，我目前只是自己學(xué)習(xí)使用，配置幾乎是最低的，而且購(gòu)買(mǎi)的套餐自帶公網(wǎng)ip，這么一來(lái)我連上面購(gòu)買(mǎi)ip的錢(qián)也省了。

綜上所述，最終我只購(gòu)買(mǎi)了域名和一個(gè)套餐自帶公網(wǎng)ip的服務(wù)器，服務(wù)器用來(lái)放置前端項(xiàng)目和后臺(tái)項(xiàng)目。

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

微信公眾平臺(tái)，開(kāi)發(fā)者認(rèn)證

打開(kāi)微信公眾平臺(tái) https://mp.weixin.qq.com/，使用郵箱注冊(cè)，注意，一個(gè)郵箱只能注冊(cè)一個(gè)微信公眾平臺(tái)賬號(hào)，一個(gè)賬號(hào)只能選擇一種賬號(hào)分類(lèi)且不能更改，這里一定要慎重，這里選擇訂閱號(hào)。

可選個(gè)人類(lèi)型、企業(yè)類(lèi)型等等，其中，個(gè)人類(lèi)型是不沒(méi)有分享定制功能的，但企業(yè)類(lèi)型我又不符合。。。最終我還是選擇的個(gè)人類(lèi)型，因?yàn)榧词刮业馁~號(hào)沒(méi)有權(quán)限，但微信公眾號(hào)里面，提供一個(gè)功能全開(kāi)的測(cè)試賬號(hào)，使用測(cè)試賬號(hào)可以進(jìn)行學(xué)習(xí)和測(cè)試，還是沒(méi)問(wèn)題的。

填寫(xiě)信息，綁定微信，注冊(cè)完成，登錄進(jìn)去。

為了進(jìn)行開(kāi)發(fā)，需要在這里和你的后臺(tái)項(xiàng)目和前端項(xiàng)目進(jìn)行對(duì)應(yīng)的配置，讓微信確認(rèn)后臺(tái)項(xiàng)目和前臺(tái)項(xiàng)目都是你的之后，才會(huì)提供服務(wù)。

有關(guān)服務(wù)器端和后臺(tái)項(xiàng)目的配置：

首先需要說(shuō)明，由于訂閱號(hào)的功能比較少，如果只是進(jìn)行學(xué)習(xí)，建議在 開(kāi)發(fā) => 開(kāi)發(fā)者工具中選擇使用公眾平臺(tái)測(cè)試帳號(hào)進(jìn)行學(xué)習(xí)性開(kāi)發(fā)，這樣可以使用全功能的微信服務(wù)，配置也比較少。  
下面的配置步驟均是使用自己的賬號(hào)需要進(jìn)行的配置

開(kāi)發(fā) => 基本配置 => 公眾號(hào)開(kāi)發(fā)信息，在這里記下開(kāi)發(fā)者ID(AppID)，接著開(kāi)通服務(wù)，記下開(kāi)發(fā)者密碼(AppSecret)，開(kāi)發(fā)中會(huì)需要輸入。

設(shè)置IP白名單，這里寫(xiě)的是自己的服務(wù)器IP地址，因?yàn)楣δ苌暇€(xiàn)后，需要使用這臺(tái)服務(wù)器，通過(guò)開(kāi)發(fā)者ID和密碼來(lái)向微信服務(wù)區(qū)獲取自己服務(wù)的access_token

進(jìn)行下面的后臺(tái)項(xiàng)目，目的是讓微信確定這個(gè)后臺(tái)項(xiàng)目是你的，檢驗(yàn)方法是微信發(fā)起一個(gè)get請(qǐng)求，你返回正確的返回值，啟用此配置時(shí)調(diào)用：

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

Token：完全自定義的一個(gè)字符串，相當(dāng)于個(gè)暗號(hào)，你的返回值需要這個(gè)字符串參與拼裝。

EncodingAESKey：隨機(jī)生成即可

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

有關(guān)前端項(xiàng)目的配置：

設(shè)置 => 公眾號(hào)設(shè)置 => 功能設(shè)置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網(wǎng)站的域名，比如wx.qq.com或者wx.qq.com/user，最多可寫(xiě)三個(gè)，且需要驗(yàn)證。

> 驗(yàn)證的方式，就是將一個(gè)微信提供的txt文件，放在此域名對(duì)應(yīng)的放置于服務(wù)器中的web項(xiàng)目的訪(fǎng)問(wèn)根目錄中，需要和主文件（大部分默認(rèn)為```index.html```）放在同一級(jí)，當(dāng)提交的時(shí)候，微信會(huì)進(jìn)行訪(fǎng)問(wèn)，來(lái)獲取文件，確認(rèn)此域名是你的。

配置完成后，就可以進(jìn)行開(kāi)發(fā)了。

下面進(jìn)入代碼階段。

證明后臺(tái)項(xiàng)目和前端項(xiàng)目時(shí)我自己的

首先，上面證明服務(wù)是自己的部分，我們需要實(shí)現(xiàn)一個(gè)接口，我用http://wx.my.com/forWx打的比方，那么為了啟用配置，我需要實(shí)現(xiàn)/forWx給微信調(diào)用，下面是代碼：

node的基礎(chǔ)環(huán)境搭建省略，這里只寫(xiě)接口內(nèi)部方法了，關(guān)鍵是參數(shù)加密拼裝

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

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

  // 3.將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密
  let tempStr = array.join("")
  const hashCode = crypto.createHash("sha1") //創(chuàng)建加密類(lèi)型 
  let resultCode = hashCode.update(tempStr, "utf8").digest("hex")
  
  //4.開(kāi)發(fā)者獲得加密后的字符串可與signature對(duì)比，標(biāo)識(shí)該請(qǐng)求來(lái)源于微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send("mismatch")
  }
})

完成，上面是證明服務(wù)器是我的，后面還需要證明前端項(xiàng)目是我的，這個(gè)就跳過(guò)了，因?yàn)樘?jiǎn)單，直接下載那個(gè)文件，放到自己服務(wù)器中，前端項(xiàng)目的index.html同級(jí)即可

上面的操作，是只要想進(jìn)行微信公頁(yè)面開(kāi)發(fā)，必須要有的步驟，一切的基礎(chǔ)。

開(kāi)始正式開(kāi)發(fā)

首先順著功能使用流程，順一下實(shí)現(xiàn)此功能的方法：

用戶(hù)在微信打開(kāi)頁(yè)面后，立即或者通過(guò)方法觸發(fā)ajax，把當(dāng)前url作為參數(shù)，請(qǐng)求自己的后臺(tái)接口。

后臺(tái)請(qǐng)求微信服務(wù)器，發(fā)送自己的AppID和AppSecret，得到一個(gè)有效期為7200秒的Access_token

后臺(tái)再次請(qǐng)求微信服務(wù)器，發(fā)送Access_token，得到一個(gè)有效期同樣為7200秒的Ticket（如果前端請(qǐng)求自己的時(shí)候，Ticket沒(méi)有過(guò)期，就不用這么麻煩請(qǐng)求兩次微信服務(wù)器了，直接使用即可，Access_token同理）

后臺(tái)有了可以使用的Ticket，接著，生成如下幾個(gè)參數(shù)，返回給前端：

timestamp：當(dāng)前時(shí)間戳

url：前端傳過(guò)來(lái)的url

jsapi_ticket：獲取的Ticket

appId：自己的AppID

signature：使用sh1加密的noncestr、timestamp、url、jsapi_ticket的字符串

前端終于拿到了返回值，然后初始下微信服務(wù)（當(dāng)然初始化微信服務(wù)之前，需要引入微信SDK的js文件），初始化服務(wù)，需要用到以上參數(shù)，同時(shí)，可以配置你要監(jiān)聽(tīng)的用戶(hù)操作，比如我們的關(guān)鍵---分享頁(yè)面！

微信配置執(zhí)行后，書(shū)寫(xiě)配置完成的回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)里，可以定義用戶(hù)分享頁(yè)面時(shí)的頁(yè)面參數(shù)，當(dāng)此頁(yè)面被分享出去之后，展示的分享卡片，就是我們定義的內(nèi)容啦！

當(dāng)然，不僅僅是分享頁(yè)面，發(fā)朋友圈和其他一些也是可以配置，還有更多的配置項(xiàng)，都可以開(kāi)始進(jìn)行了！

下面是前端獲取微信授權(quán)的方法

// 微信初始化 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, // 開(kāi)啟調(diào)試模式,開(kāi)發(fā)時(shí)可以開(kāi)啟
        appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí) 由接口返回
        timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳 由接口返回
        nonceStr: data.noncestr, // 必填，生成簽名的隨機(jī)串 由接口返回
        url: data.url, // 必填，生成簽名的隨機(jī)串 由接口返回
        signature: data.signature, // 必填，簽名 由接口返回
        jsApiList: [
          "updateAppMessageShareData", // 分享
        ] // 此處填你所用到的方法
      });
      // 方法監(jiān)聽(tīng)
      wx.ready(function () {
        console.log("初始化成功")
        wx.updateAppMessageShareData({
          title: "咱的標(biāo)題", // 分享標(biāo)題
            desc: "咱的描述", // 分享描述
            link: window.location.href, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: window.location.protocol + "http://" + window.location.hostname + "/img.jpg", // 分享圖標(biāo)
            type: "link", // 分享類(lèi)型,music、video或link，不填默認(rèn)為link
            dataUrl: "", // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
            success: function () {
              // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
              console.log("分享配置完成");
            },
            cancel: function () {
              // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)
              console.log("分享取消")
            }
         });
      })
      wx.error(function (res) {
        console.log("初始化失敗")
        console.log(res)
      })
    },
    error: function(error) {
      console.log("錯(cuò)誤")
    }
  })
}

下面是node端的一系列方法

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

// 臨時(shí)緩存
const myCache = {
  access_token: {
    setedTime: 0, // 數(shù)據(jù)設(shè)置的時(shí)間
    val: undefined, // 數(shù)據(jù)的值
  },
  jsapi_ticket: {
    setedTime: 0, // 數(shù)據(jù)設(shè)置的時(shí)間
    val: undefined, // 數(shù)據(jù)的值
  },
}

// 獲取 access_token
const getAccess_token = () => {
  // access_token 未過(guò)期
  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 過(guò)期了
    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 = () => {
  // 緩存的簽名尚未過(guò)期 --- 微信規(guī)定過(guò)期時(shí)間為7200秒，這里自己設(shè)置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 { // 已過(guò)期，重新獲取
    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))
    })
  }
}

// 我自己的前端調(diào)用，獲取微信簽名
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) // 隨機(jī)字符串
      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)
  }
})

整體功能實(shí)現(xiàn)的步驟和具體代碼如上，請(qǐng)酌情參考。

GPU云服務(wù)器云服務(wù)器實(shí)現(xiàn)自定義手勢(shì) 自定義如何實(shí)現(xiàn) 自定義布局怎么實(shí)現(xiàn) 微信自定義菜單 view

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102599.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Object

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

[C/C++ C++11]正則表達(dá)式

閱讀 1812·2021-11-25 09:43
window.open 打開(kāi)新窗口被攔截的解決方案

閱讀 2739·2019-08-30 15:53
canvas下的全屏問(wèn)題

閱讀 1877·2019-08-30 15:52
div寬度和高度固定，讓圖片鋪滿(mǎn)整個(gè)div而且不變形

閱讀 2970·2019-08-29 13:56
JavaScript面向?qū)ο缶幊獭狥unction類(lèi)型

閱讀 3382·2019-08-26 12:12
Node.js 全局對(duì)象

閱讀 628·2019-08-23 17:58
vue-element-admin簡(jiǎn)化版

閱讀 2211·2019-08-23 16:59
每日 30 秒 ? 數(shù)組也會(huì)禿頂

閱讀 1013·2019-08-23 16:21

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信開(kāi)發(fā)-自定義分享卡片-node.js實(shí)現(xiàn)

相關(guān)文章

博客 - 收藏集 - 掘金

發(fā)表評(píng)論

0條評(píng)論

Object

男|高級(jí)講師

TA的文章

[C/C++ C++11]正則表達(dá)式

window.open 打開(kāi)新窗口被攔截的解決方案

canvas下的全屏問(wèn)題

div寬度和高度固定，讓圖片鋪滿(mǎn)整個(gè)div而且不變形

JavaScript面向?qū)ο缶幊獭狥unction類(lèi)型

Node.js 全局對(duì)象

vue-element-admin簡(jiǎn)化版

每日 30 秒 ? 數(shù)組也會(huì)禿頂

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信開(kāi)發(fā)-自定義分享卡片-node.js實(shí)現(xiàn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！