前言
在app端h5呼叫原生的分享功能，通過傳遞 title , desc,link 等引數可以自定義分享連結的樣式如下：
測試號管理
- 在這個頁面你會得到測試號資訊
appID和appsecret - 需要驗證介面配置資訊，主要是為了驗證伺服器地址的有效性。
- JS介面安全域名,你需要使用微信 JS-SDK 的伺服器域名
- 測試號二維碼,掃碼後你的微訊號才有許可權使用 JS-SDK 的功能
具體流程可以點選檢視具體流程，重點說下第二點，驗證伺服器有效性。
- URL：填寫上你服務端介面的地址
- Token：隨意填寫，在你服務端介面中會用到
- 微信會向你填寫的URL傳送一個請求並且帶上 signature,timestamp,nonce,echostr 引數，請求型別為
GET,我們接受到這些引數後需要進行加密然後返回加密後的值作為驗證。
接下來來寫介面。
// 需要引入 sha1 包來將字串轉化
const sha1 = require('sha1')
router.get('/',async ctx=>{
// 與你填寫的 Token 保持一致
const token = 'gwxtoken'
const {
signature,
timestamp,
nonce,
echostr
} = ctx.query
// 進行字典排序加密
let str = [token, timestamp, nonce].sort().join("");
let sha = sha1(str)
// 校驗微信加密簽名,如果來自微信將 echostr 原樣返回
if (sha === signature) {
ctx.body = echostr
} else {
ctx.body = "wrong"
}
})
複製程式碼服務端
獲取 access_token
請求微信 access_token 介面,引數如下，請求型別為 GET ，可以拿到 access_token 的值。
| grant_type | appid | secret |
|---|---|---|
| 填寫 client_credential | 測試資訊的appID | 測試資訊的appsecret |
獲取 jsapi_ticket
請求微信 jsapi_ticket 介面，引數如下，請求型別為 GET，可以拿到 的值
| access_token | type |
|---|---|
| 填寫 access_token 的值 | 填寫 jsapi |
const request = require('request')
// 獲取 access_token
router.get('/assess-token',async ctx=>{
let result = await request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appID&secret=appsecret')
ctx.body = result
})
function getData(url){
return new Promise((resolve,reject)=>{
request(url,function(err,res,body){
resolve(body)
})
})
}
// 獲取 jsapi_ticket
router.get('/share',async ctx=>{
// 獲取客戶端傳遞過來的 access_token 和分享地址
const {sessionKey,link} = ctx.request.query
let noncestr = '201913' // 自定義
let timestamp = Math.floor(Date.now() / 1000) // 當前時間單位為 秒
let result = await getData('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+sessionKey+'&type=jsapi')
let tiket = JSON.parse(result).ticket
ctx.body = {
noncestr,
timestamp,
signature:sha1('jsapi_ticket=' + tiket + '&noncestr=' + noncestr + '×tamp=' + timestamp +'&url='+link)
}
})
複製程式碼需要注意：
- noncestr 為自定義，timestamp 單位為秒
- 這裡使用 request 作為 http 請求，
var request = require('request');
request('http://www.google.com', function (error, response, body) {
// 列印值可以發現，body才是我們想要的 ticket 值
});
複製程式碼- koa2 中 ctx.body 如果放在 包含非同步操作的回撥中，返回均為404，(還不是很懂是為啥)，所以此處封裝了一個 Promise 這樣可以通過 await 的方式將程式碼執行同步化，ctx.body 可以拿到服務端返回的值。
客戶端
通過wx.config介面注入許可權驗證配置
呼叫服務端的介面 為了獲取服務端定義的 timestamp,nonceStr,signature 這三個值,這三個值需要保持和服務端同步
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: 'AppId', // 必填，企業號的唯一標識，此處填寫企業號corpid
timestamp:'timestamp', // 必填，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature,// 必填，簽名，見附錄1
jsApiList: ['onMenuShareTimeline', // 分享到朋友圈
'onMenuShareAppMessage', // 分享給朋友
'onMenuShareQQ',// 分享到QQ
'onMenuShareWeibo',// 分享到騰訊微博
'onMenuShareQZone'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
複製程式碼呼叫微信分享等介面
在需要自定義分享連結或其他 sdk 支援的功能可以通過 wx.ready 來初始化這些功能，拿分享功能作為例子,更多功能參考文件
wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖示
type: '', // 分享型別,music、video或link，不填預設為link
dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
success: function () {
// 使用者點選了分享後執行的回撥函式
}
})
複製程式碼最後
當你看到這個提示框時候，那麼你已經完成 sdk 配置 和服務端返回的 signature 的校驗。記錄了一次整體使用的過程，方便以後檢視
