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

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

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

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

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

在微信打開自家的頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有關(guān)服務(wù)器端和后臺項目的配置：

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

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

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

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

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

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

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

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

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

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

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

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

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

證明后臺項目和前端項目時我自己的

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

node的基礎(chǔ)環(huán)境搭建省略，這里只寫接口內(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請求的參數(shù) signature、timestamp、nonce、echostr
  let signature = req.query.signature // 微信加密簽名
  let timestamp = req.query.timestamp // 時間戳
  let nonce = req.query.nonce // 隨機(jī)數(shù)
  let echostr = req.query.echost // 隨機(jī)字符串

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

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

完成，上面是證明服務(wù)器是我的，后面還需要證明前端項目是我的，這個就跳過了，因為太簡單，直接下載那個文件，放到自己服務(wù)器中，前端項目的index.html同級即可

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

開始正式開發(fā)

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

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

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

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

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

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

url：前端傳過來的url

jsapi_ticket：獲取的Ticket

appId：自己的AppID

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

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

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

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

// 獲取 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 = () => {
  // 緩存的簽名尚未過期 --- 微信規(guī)定過期時間為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 { // 已過期，重新獲取
    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)
  }
})

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102599.html

發(fā)表評論

登陸后可評論

0條評論

Object

男|高級講師

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

TA的文章

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

閱讀 1719·2021-11-25 09:43
window.open 打開新窗口被攔截的解決方案

閱讀 2680·2019-08-30 15:53
canvas下的全屏問題

閱讀 1832·2019-08-30 15:52
div寬度和高度固定，讓圖片鋪滿整個div而且不變形

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

閱讀 3332·2019-08-26 12:12
Node.js 全局對象

閱讀 575·2019-08-23 17:58
vue-element-admin簡化版

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

博客 - 收藏集 - 掘金

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

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

window.open 打開新窗口被攔截的解決方案

canvas下的全屏問題

div寬度和高度固定，讓圖片鋪滿整個div而且不變形

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

Node.js 全局對象

vue-element-admin簡化版

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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