微信開發——前期配置

時間 2019-12-10

標籤微信開發前期配置简体版

原文原文鏈接

　　本文講前端如何獨立的進行微信開發(沒有搭建後臺，如何經過config接口注入權限驗證配置)。css

　　一、申請微信公衆號成功後，進入微信公衆平臺（https://mp.weixin.qq.com/），登陸。html

　　二、在開發者工具中選擇公衆平臺測試帳號，點擊進入，微信掃碼受權登陸。前端

　　三、進入測試號頁面，獲得測試號信息：jquery

　　四、完成JS-SDK使用權限簽名算法。git

　　首先獲取access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token）：打開連接https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET，連接中的APPID和APPSECRET用步驟3中獲得的測試號信息對應的替換，便可成功返回access_token，好比個人返回數據以下：github

{
access_token: "br8H90LtER9bYV2X6w21gn2ncpNsk47jJqlunDxYHVVLqsjjP99OJd3cLTxrNg_xp7Pxry_aZ5JBVClfjrXE07m9j3LkSkFRDvDhmSK3Lp0BwsafdgTD0ZrnaDnkd0RuUCMjAJANVF",
expires_in: 7200
}

　　而後獲取jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）：打開連接https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi，連接中的ACCESS_TOKEN用上一步獲取的access_token替換，便可成功返回jsapi_ticket，好比個人返回數據以下：算法

{
errcode: 0,
errmsg: "ok",
ticket: "kgt8ON7yVITDhtdwci0qefauZHtIntmVAA1tkdyuhJBV868ar6VeAiJpPeg-hDCbtfKfWaHOGS28YeeeqPyHTQ",
expires_in: 7200
}

　　而後按照微信文檔說明的簽名算法獲取signature。api

　　下面咱們分解一下該簽名算法：緩存

　　首先準備原材料，一共須要四個原料：noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分）。jsapi_ticket在咱們完成以上步驟後就獲得了，url就是咱們開發的頁面的url，那麼咱們實際上只差隨機字符串和時間戳。安全

　　如今咱們經過如下代碼製造一個隨機字符串：

function generateRandomString() {
     return (Math.random().toString(36).substr(2));
}

var noncestr = encodeURIComponent(generateRandomString());

　　經過微信文檔示例，發現時間戳單位爲秒，因而咱們經過如下代碼實現：

var timestamp1 = new Date().getTime()/1000;
var timestamp = timestamp1.toFixed(0);

　　那麼如今原材料備齊！

　　接下來按照規則處理原材料。首先完成拼接：

var array = new Array(jsapi_ticket, noncestr, timestamp, url);
var str = 'jsapi_ticket=' + array[0] + '&' +
          'noncestr=' + array[1] + '&' +
          'timestamp=' + array[2] + '&' +
          'url=' + array[3];

　　而後對上面拼接完的字符串進行sha1加密，便可獲得signature。可是怎麼加密呢？通過實踐發現，咱們可使用cryptoJS,參考cryptoJS（https://github.com/brix/crypto-js）在github上的說明，經過如下代碼加密：

var sign = CryptoJS.SHA1(str).toString();

　　五、參考微信文檔JSSDK使用步驟，前2步就不說了，主要說一下步驟三，經過config接口注入權限驗證配置。經過本文以上步驟，咱們能夠直接配置以下：

wx.config({
        debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: '你的測試號appid', // 必填，公衆號的惟一標識
        timestamp: timestamp, // 必填，生成簽名的時間戳
        nonceStr: noncestr, // 必填，生成簽名的隨機串
        signature: sign, // 必填，簽名，見附錄1
        jsApiList: ['chooseImage'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

　　六、開啓服務器，訪問頁面，just enjoy your coding!

　　附錄：

1、注意事項：

　　一、開發頁面的url要配置到上文3中提到的js接口安全域名中（不然config配置時會報錯invalid url domain）；

　　二、手機微信要關注測試公衆號，不然訪問頁面後沒法體驗設計到微信接口的功能。

2、參考文獻：

　　一、微信JS-SDK說明文檔（http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html）；

　　二、crypto-js（https://github.com/brix/crypto-js）。

3、感謝老大cyn的指導。

4、demo代碼以下.

html文件：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
    <title>test</title>
    <link rel="stylesheet" href="../../dist/css/index.css" />
    <script src="../../dist/lib/jquery/jquery-2.2.0.min.js"></script>
    <script src="../../dist/lib/wx/jweixin-1.0.0.js"></script>
    <script src="../../dist/lib/crypto-js.js"></script>
    <script src="../../dist/js/main.js"></script>
</head>

<body>
hello world!
</body>
</html>

View Code

js文件：

/**
 * 
 * @authors lovelyun
 * 
 */
$(function () {
    var data = {
        token: {
            access_token: "your token",
            expires_in: 7200
        },
        ticket: {
            errcode: 0,
            errmsg: "ok",
            ticket: "your ticket",
            expires_in: 7200
        }
    };

    var noncestr = encodeURIComponent(generateRandomString());
    var timestamp1 = new Date().getTime()/1000;
    var timestamp = timestamp1.toFixed(0);
    var jsapi_ticket = data.ticket.ticket;
    var url = 'http://192.168.2.109:3000/dist/html/index.html';
    var array = new Array(jsapi_ticket, noncestr, timestamp, url);
    var str = 'jsapi_ticket=' + array[0] + '&' +
        'noncestr=' + array[1] + '&' +
        'timestamp=' + array[2] + '&' +
        'url=' + array[3];
    var sign = CryptoJS.SHA1(str).toString();

    function generateRandomString() {
        return (Math.random().toString(36).substr(2));
    }

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

});

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。