微信公衆帳號開發入門

時間 2019-11-05

標籤微信公衆帳號開發入門简体版

原文原文鏈接

此文記錄了微信公衆號開發的整個流程，想要調用微信 JS API 並不是直接引入一個 jweixin-1.0.0.js 到頁面裏那麼簡單。須要獲取 access_token, jsapi_ticken 和簽名 sign等。其中的任何一個步驟錯誤都會調用不到其 API。這些參數通常是後臺生成，能夠用阿里雲或新浪雲提供的服務。javascript

1、註冊篇

註冊一個公衆帳號是必須的，5 個步驟(以我的訂閱號爲例)php

填寫基本信息
郵箱激活
選擇帳號類型
信息登記
查看公衆號信息

1. 訪問 https://mp.weixin.qq.com，點擊右上角的「當即註冊」

2. 激活郵箱

進入到註冊的郵箱，點擊連接激活html

激活後自動跳到「帳號選擇」頁面。java

3. 選擇帳號類型

這裏選擇第一個類型「訂閱號」。git

彈出警告信息，點「肯定」便可。跳到「信息登記」 tabgithub

4. 信息登記

選「我的」，須要填寫一些身份證等信息算法

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

填完後並短信驗證即跳到了公衆號查看頁面。瀏覽器

5. 查看註冊信息

2、設置篇

公衆測試帳號註冊完後，須要到「開發者中心」配置一些參數緩存

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

2. 綁定域名

進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」

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

3、獲取篇

1. 獲取 access_token

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

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

appid
secret
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，不包含#及其後面部分）。示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
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

注意：

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

4. 頁面配置

有了以上數據後，就能夠配置頁面了。想要調用微信的JSAPI，須要如下幾個步驟

引入微信 JSAPI
調用 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);
        }
    });  
});