微信js-sdk使用流程

步驟一：微信公衆號後臺作相關設置

• 接口配置信息

如圖配置兩個參數：

url：配置一個後臺接口，微信會帶4個參數訪問這個接口，後臺須要拿到參數作驗證後返回參數中的echostr才能驗證成功

token: 自定義的字符串，後臺作驗證時須要用到

如圖配置的話微信的訪問連接以下：

http://245691q6b5.zicp.vip/wx...

//http://245691q6b5.zicp.vip/wx接口操做以下
//個人後臺使用koa2
router.get('/wx', async (ctx, next) => {
    //1.解析參數
    const querystring = ctx.querystring;
    const tokenParams = getParams(querystring);
    const signature = tokenParams['signature'];
    const echostr = tokenParams['echostr'];
    const timestamp = tokenParams['timestamp'];
    const nonce = tokenParams['nonce'];
    const token = 'wanglaowu'; //如圖配置的自定義token
    //2.token, timestamp, nonce排序後的字符串經過sha1加密
    let str = [token, timestamp, nonce].sort().join('');
    let sha = sha1(str);
    //3.加密後的字符串和signature比對，若是相等說明是微信的訪問，返回echostr，便可驗證成功，返回其餘值驗證失敗。
    if (sha == signature) {
        ctx.body = echostr;
    } else {
        ctx.body = 'wrong';
    }
    //ps:能夠不進行驗證直接返回echostr也能夠驗證成功，但不建議這樣作。
})

function getParams(querystring) {
    const rs = {}
    const kvArr = querystring.split('&');
    kvArr.forEach(item => {
        const temp = item.split('=')
        const key = temp[0];
        const val = temp[1];
        rs[key] = val
    })
    return rs
}

作好這些準備後，點擊提交會有配置成功的提示。

• 配置JS接口安全域名

如圖不須要http://或https://,點擊提交便可

步驟二：後端獲取使用weixin js-sdk須要的配置參數

router.get('/wxapiconfig', async (ctx, next) => {
    //1.獲取accessToken，用於獲取訪問wx的api的憑證；
    const accessToken = await getAccessToken()
    //2.獲取jsapiTicket 用於訪問wx的api的憑證
    const jsapiTicket = await getJsapiTicket(accessToken)
    //3.生成時間戳和隨機字符串
    const nonceStr = randomString(16)//隨機字符串
    const timestamp = (Date.now()/1000).toFixed();//時間戳
    const url = 'http://245691q6b5.zicp.vip/wx'
    //4.按照微信官方要求拼接字符串
    const str = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
    //5.sha1加密後得到signature參數
    const signature = sha1(str);
    //6.經過官方工具驗證signature的正確性：//https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

    //7.將參數返給前端
    ctx.body = JSON.stringify({
        jsapiTicket,
        nonceStr,
        timestamp,
        signature,
        jsApiList: ['updateAppMessageShareData'] //須要請求的接口，也能夠在前端使用時增長此參數
    })
})

function getAccessToken() {
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appsecret}`
    return Superagent.get(url).then(res => {
        return JSON.parse(res.text).access_token
    })
}

function getJsapiTicket(accessToken) {
    const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`
    return Superagent.get(url).then(res => {
        return JSON.parse(res.text).ticket
    })
}

function randomString(len) {
    len = len || 32;
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    
    var maxPos = chars.length;
    var pwd = '';
    for (i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

步驟三：前端拿到參數後使用js-sdk進行接口調用

• 在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...
• 全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳（上一步中後端返回的參數）
    nonceStr: '', // 必填，生成簽名的隨機串（上一步中後端返回的參數）
    signature: '',// 必填，簽名（上一步中後端返回的參數）
    jsApiList: [] // 必填，須要使用的JS接口列表（上一步中後端返回的參數，也可在前端配置此參數）
});

• 接口調用見官網使用教程：https://mp.weixin.qq.com/wiki...