基本配置1.設(shè)置—公眾號(hào)設(shè)置—功能設(shè)置—配置JS接口安全域名
安全域名配置規(guī)則如下
2.開(kāi)發(fā)—基本配置
開(kāi)發(fā)者密碼第一次使用需要重新設(shè)置
記錄 開(kāi)發(fā)者ID(AppID) 開(kāi)發(fā)者密碼()后面會(huì)用到
3.IP白名單配置
推薦填寫當(dāng)前本地開(kāi)發(fā)IP地址和服務(wù)器IP地址
本地開(kāi)發(fā)地址獲取方式
服務(wù)器IP地址(根據(jù)自己的服務(wù)器Ip地址自行填寫)
多個(gè)IP地址填寫用回車隔開(kāi)
4重要的一步
在:微信公眾號(hào)-開(kāi)發(fā)-接口權(quán)限查看想要調(diào)用的開(kāi)發(fā)接口是否可用
如果有相關(guān)接口權(quán)限無(wú)法開(kāi)啟,推薦使用:微信公眾平臺(tái)-開(kāi)發(fā)-開(kāi)發(fā)者工具-公眾平臺(tái)測(cè)試帳號(hào)開(kāi)發(fā)
開(kāi)始開(kāi)發(fā)1.引入JS文件
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件,(支持https):
2通過(guò)config接口注入權(quán)限驗(yàn)證配置(最重要的一步)
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填,公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填,生成簽名的時(shí)間戳
nonceStr: '', // 必填,生成簽名的隨機(jī)串
signature: '',// 必填,簽名
jsApiList: [] // 必填,需要使用的JS接口列表
});
appID(前面在微信公眾號(hào)基本配置中已經(jīng)拿到了)
:['','eData'] (例:上傳圖片接口,和自定義分享接口)
簽名算法(微信官方提供)
生成簽名之前必須先了解一下,是公眾號(hào)用于調(diào)用微信JS接口的臨時(shí)票據(jù)。正常情況下,的有效期為7200秒,通過(guò)來(lái)獲取。由于獲取的api調(diào)用次數(shù)非常有限,頻繁刷新會(huì)導(dǎo)致api調(diào)用受限,影響自身業(yè)務(wù),開(kāi)發(fā)者必須在自己的服務(wù)全局緩存 。
參考以下文檔獲?。ㄓ行?200秒,開(kāi)發(fā)者必須在自己的服務(wù)全局緩存):用第一步拿到的 采用http GET方式請(qǐng)求獲得(有效期7200秒,開(kāi)發(fā)者必須在自己的服務(wù)全局緩存):2.1簽名獲取拆解第一步GET請(qǐng)求
的有效期為7200秒(不必反復(fù)請(qǐng)求)
appid 和 secret 在前面的基本配置中其實(shí)都已經(jīng)拿到。但是由于開(kāi)發(fā)者密碼()是校驗(yàn)公眾號(hào)開(kāi)發(fā)者身份的密碼,具有極高的安全性。不能直接暴露在前端代碼中,所以的請(qǐng)求需在后端完成,這里簽名的生成過(guò)程都在后端完成。
當(dāng)前以node搭建后端服務(wù)
//獲取到access_token示例
var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log("access_token值" +JSON.parse(body).access_token)
}
});
第二步GET請(qǐng)求
的有效期為7200秒(不必反復(fù)請(qǐng)求)
用第一步獲取到的的值進(jìn)行請(qǐng)求
//
var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
request(url, function (error, response, body) {

if (!error && response.statusCode == 200) {
console.log("jsapi_ticket值" + JSON.parse(body).ticket);
}
});
第三步生成算法簽名
const = (Date.now() / 1000) //生成簽名的時(shí)間戳
const = Math.random().(36).substr(2, 15) //生成簽名的隨機(jī)串
let //在第二步生成
let url//簽名用的url必須是調(diào)用JS接口頁(yè)面的完整URL(前端請(qǐng)求服務(wù)端接口帶入)
const sha1 = require('sha1')//這里需要引入一個(gè)插件npm install sha1
router.get('/', (req, res, next) => {
const url = decodeURIComponent(req.query.url)//這里的url采用前端加密,后端解密的形式獲取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在第二步拿到了"
const params = {
nonceStr,
jsapi_ticket,
timestamp,
url
}
const string = Object.keys(params).sort().map(key => `${key.toLowerCase()}=${params[key]}`).join('&')
const signature = sha1(string)//生成的簽名
res.status(200).json({//將參數(shù)返回給前端
timestamp,
signature,
nonceStr
});
})
module.exports = router;
3前端靜態(tài)頁(yè)面實(shí)際調(diào)用
Document
分享頁(yè)面

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
function wxFN(){
$.ajax({
type: "get",
url: `http://*************/api/wx?url=${encodeURIComponent(location.href.split('#')[0])}`,
success: function(data) {
console.log(data);
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。
appId: data.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí)
timestamp: data.timestamp, // 必填,生成簽名的時(shí)間戳
nonceStr: data.nonceStr, // 必填,生成簽名的隨機(jī)串
signature: data.signature, // 必填,簽名
jsApiList: ['updateAppMessageShareData'] // 必填,需要使用的JS接口列表
});
}
});
}
wxFN()
wx.ready(function() { //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function() {
alert("成功")
// 設(shè)置成功
}
})
});
wx.error(function(res) {
console.log('err', res)
});
</script>
4常見(jiàn)錯(cuò)誤及解決方法(微信提供)
調(diào)用config 接口的時(shí)候傳入?yún)?shù) debug: true 可以開(kāi)啟debug模式,頁(yè)面會(huì)alert出錯(cuò)誤信息。以下為常見(jiàn)錯(cuò)誤及解決方法:
invalid url domain當(dāng)前頁(yè)面所在域名與使用的appid沒(méi)有綁定,請(qǐng)確認(rèn)正確填寫綁定的域名,僅支持80(http)和443(https)兩個(gè)端口,因此不需要填寫端口號(hào)(一個(gè)appid可以綁定三個(gè)有效域名,見(jiàn) ]目錄1.1.1)。
invalid 簽名錯(cuò)誤。建議按如下順序檢查:
確認(rèn)簽名算法正確,可用頁(yè)面工具進(jìn)行校驗(yàn)。確認(rèn)config中(js中駝峰標(biāo)準(zhǔn)大寫S), 與用以簽名中的對(duì)應(yīng), 一致。確認(rèn)url是頁(yè)面完整的url(請(qǐng)?jiān)诋?dāng)前頁(yè)面alert(.href.split('#')[0])確認(rèn)),包括'http(s)/'部分,以及'?'后面的GET參數(shù)部分,但不包括'#'hash后面的部分。確認(rèn) config 中的 appid 與用來(lái)獲取 的 appid 一致。確保一定緩存和。確保你獲取用來(lái)簽名的url是動(dòng)態(tài)獲取的,動(dòng)態(tài)頁(yè)面可參見(jiàn)實(shí)例代碼中php的實(shí)現(xiàn)方式。如果是html的靜態(tài)頁(yè)面在前端通過(guò)ajax將url傳到后臺(tái)簽名,前端需要用js獲取當(dāng)前頁(yè)面除去'#'hash部分的鏈接(可用.href.split('#')[0]獲取,而且需要),因?yàn)轫?yè)面一旦分享,微信客戶端會(huì)在你的鏈接末尾加入其它參數(shù),如果不是動(dòng)態(tài)獲取當(dāng)前鏈接,將導(dǎo)致分享后的頁(yè)面簽名失敗。
the value is offline 這個(gè)錯(cuò)誤是因?yàn)閏onfig沒(méi)有正確執(zhí)行,或者是調(diào)用的JSAPI沒(méi)有傳入config的參數(shù)中。建議按如下順序檢查:
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。