微信公眾賬號開發入門

此文記錄了微信公眾號開發的整個流程，想要調用微信 JS API 並非直接引入一個 jweixin-1.0.0.js 到頁面里那么簡單。需要獲取 access_token, jsapi_ticken 和簽名 sign等。其中的任何一個步驟錯誤都會調用不到其 API。這些參數一般是后台生成，可以用阿里雲或新浪雲提供的服務。

 

一、注冊篇

注冊一個公眾賬號是必須的，5 個步驟(以個人訂閱號為例)

1. 填寫基本信息
2. 郵箱激活
3. 選擇賬號類型
4. 信息登記
5. 查看公眾號信息

1. 訪問 https://mp.weixin.qq.com，點擊右上角的 “立即注冊”

2. 激活郵箱

進入到注冊的郵箱，點擊鏈接激活

激活后自動跳到 “賬號選擇” 頁面。

 

3. 選擇賬號類型

這里選擇第一個類型 “訂閱號”。

彈出警告信息，點 “確定” 即可。跳到 “信息登記” tab

 

4. 信息登記

選“個人”，需要填寫一些身份證等信息

 

填寫完身份證號后還需要驗證運營者身份，這個需要用綁定了運營者本人銀行卡的微信掃描二維碼

 填完后並短信驗證即跳到了公眾號查看頁面。

 

5. 查看注冊信息

 

二、設置篇

公眾測試賬號注冊完后，需要到“開發者中心”配置一些參數

1. 需要有 AppID(應用ID) 和 AppSecret(應用密鑰) 

 

2. 綁定域名

進入 “公眾號設置” 的 “功能設置” 里填寫 “JS接口安全域名”

 

最多可以設置 3 個安全域名，這里我用的是新浪雲 sinaapp.com。行了，基本的設置就完成了。

 

三、獲取篇

1. 獲取 access_token 

access_token 是必須的，后面還需要用它來獲取 Jsapi_ticket，access_token有效期7200秒，開發者必須在自己的服務全局緩存 access_token。

接口是 https://api.weixin.qq.com/cgi-bin/token，需要三個參數

1. appid
2. secret
3. grant_type 固定為 client_credential

appid 和 secret 在開發者中心 - 配置項 里可以查看獲取。完整 url 如下

https://api.weixin.qq.com/cgi-bin/token?appid=wx7xxxxx&secret=xxxxx&grant_type=client_credential

該接口返回的是一個 JSON 格式

{"access_token":"F7Z8no1201HwbujxH6qY5Do1UqHuZtk-RUusIScNnIvJr6YESZdadsi2VEsnvDGnCnaPK7CkKlDuJQevOq0JPRMJcAkHZfhTfNFWPN2aXAc","expires_in":7200}

　　

2.  獲取 jsapi_ticket

有了 access_token 就可以獲取 jsapi_ticket，只需傳兩個參數

https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=xxx

返回的也是 JSON 格式

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

 

3. 簽名算法 sign

參與簽名的字段包括 noncestr（隨機字符串）, 有效的 jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分）。示例：

1. noncestr=Wm3WZYTPz0wzccnW
2. jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
3. timestamp=1414587457
4. url=http://snandy.sinaapp.com/php/wx.php

拼接字符串后

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VE2CxsPGwOywlTQbZo-W_simS2A6TqtnB7imworsKf5mE5eiOB-Ocz9TF8wmQWqokA&noncestr=test12234&timestamp=1445225081218&url=http://snandy.sinaapp.com/php/wx.php

　　

記得一定要進行 sha1 加密，后台語言都有對應的 lib 包，比如 PHP 可以直接使用 sha1 函數

$str = 'snandy';
echo sha1($str); // 4dc5103c088598caa6bb3373be436f49b7a83acc

 

JS 我用了 crypto-js.js

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

最后的效果如下

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意：

1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同
2. 簽名用的url必須是調用JS接口頁面的完整URL
3. 出於安全考慮，開發者必須在服務器端實現簽名的邏輯

 

4. 頁面配置

有了以上數據后，就可以配置頁面了。想要調用微信的JSAPI，需要以下幾個步驟

1. 引入微信 JSAPI
2. 調用 wx.config 進行配置

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

調用 wx.config 方法

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

以上參數在前面均已介紹，jsApiList 參考列表。

 

以上都配置好了，就可以調用微信 JSAPI 了，比如調用微信的 “掃一掃” 功能

wx.ready(function(){
    wx.scanQRCode({
        needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
        scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
        success: function (res) {
            var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
            console.log(result);
        }
    });  
});

 

四、測試篇

做好的頁面是不能直接通過手機端瀏覽器訪問的，一定要嵌在微信里，可以先把頁面放到一個線上服務器，將其 url 轉成二維碼，再用微信掃二維碼 這種方式來測試

1. 放在一個線上服務器（沒有獨立服務器域名的可以用各種雲服務）
2. 將測試頁面 url 轉成二維碼，比如 http://cli.im/
3. 用微信掃二維碼，其自帶的瀏覽器訪問

 

完整示例，請用微信掃描二維碼測試

 

相關：

jsapi_ticket

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

https://github.com/brix/crypto-js