基於egg.js微信分享API封裝

1、需求背景

因項目須要，發佈的H5移動端頁面中須要支持微信分享，好比分享到朋友圈，分享到朋友等。在藉助node.js全棧技術能力狀況下，前端研發人員可利用這一特性來進行依業務實際需求的API接口封裝。
主要注意地方是：

1.使用到了cgi-bin/token獲取token和簽名
2.拿到token再調用cgi-bin/ticket/getticket獲取ticket
3.拿到ticket以後再依據傳入的[noncestr] [timestamp] [url]生成能夠與騰訊服務器匹配校驗的簽名串
4.參考資料： 微信公從平臺簽名實現
5.本文所指內容使用egg.js框架實現

2、實現步驟

1.定義接口結構

經過需求分析，咱們知道這個接口的請求與返回應該包含：分享標題，分享描述，分享圖片，分享連接，返回校驗簽名等內容。詳細描述以下：
請求參數:

參數名	參數說明	舉例
link	分享連接	www.yourdomain.com/montage/ind…
imgUrl	分享封面圖片	www.yourdomain.com/montage/ima…
title	分享標題	你的分享標題
desc	分享描述	你的分享描述

返回結果:

參數名	參數說明	舉例
code	狀態碼	200
message	狀態描述	請求成功
data	返回數據	{}
- wxAccountInfo	簽名信息	{}
-- appId	微信公衆平臺分配ID	'd0ddsldf3542'
-- timestamp	簽名時間戳	1519265659
-- nonceStr	加密字符串	M4vhCXM
- wxShareInfo	透傳分享信息	略
-- ...	透傳分享信息	略

2.定義路由

假設咱們的接口名字定義爲/api/service/getWeChatSignature那麼須要進行如下內容的路由配置。

其中： app.controller.api.index.index.getWeChatSignature爲控制器路徑。

3.公共配置

微信分享簽名配置，須要抽離到外部公共配置文件中，對於egg.js框架來講，約定於配置，咱們則只須要將相關配置放置於config/config.default.js。

4.token獲取

接下來即是實現controller與業務相關的功能開發，利用egg.js service與controller理念，咱們將調用微信接口邏輯部份抽離至單獨的service中

5.獲取TICKET

6.簽名實現

獲取了token與ticket以後則進入關鍵一步，簽名生成實現步驟。 須要 jsapi_ticket noncestr timestamp url參與簽名 這裏的noncestr須要注意須要生成隨機字符串

timestamp則須要注意單位是 秒,所以須要進行轉換

最後，將以上幾個參數進行 sha1簽名

3、使用方法

1.訪問地址

http://localhost:7001/api/service/getWeChatSignature
複製代碼

2.調用方式

POST
複製代碼

3.請求參數

{
     link: 'https://www.yourdomain.com/montage/index.html',              // 分享連接
     imgUrl: 'https://www.yourdomain.com/montage/images/cover.jpg',      // 分享封面圖片
     title: '你的分享標題',                                               // 分享標題
     desc: '一些描述...'                                                  // 分享描述
}
複製代碼

4.返回結果

{
    "code":200,
    "message":"請求成功",
    "data":{
        "wxAccountInfo":{
            "appId":"your app id",      // appid
            "timestamp":1519265659,     // 時間截
            "nonceStr":"M4vhCXM",       // 加密字符串
            "signature":"your signature no like.. f5617cf42f"    // 比對簽名
        },
        "wxShareInfo":{
            "imgUrl":"https://mp.yourdomain.com/montage/images/cover.jpg",  // 分享封面地址
            "link":"https://mp.yourdomain.com/montage/index.html",          // 分享連接地址
            "desc":"一此描述。。。",                                         // 分享描述
            "title":"分享標題"                                              // 分享標題 
        }
    }
}
複製代碼

4、實現效果

1.PostMan模擬調用

2.前端模擬調用(本文以create.js調用網絡爲例，其它好比ajax, axios使用方式本文不做討論)

在頁面模板中加入微信js-sdk

調用接口，傳入分享內容

調用接口返回後註冊分享內容

相關的示例源代碼已上傳到Github:

基於egg.js微信分享API封裝