基本配置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)用

    
    


    
    
分享頁(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ù)中。建議按如下順序檢查：