前言

通過微信 JS-SDK 接口，可以在自己寫的 JS 程序中使用很多微信的功能。例如微信里的卡片式鏈接、拍照上傳下載圖片、錄制播放上傳下載音頻、獲取地理位置、使用搖一搖、掃一掃、微信支付等功能。

微信開發(fā)文檔

準(zhǔn)備工作

首先需要有一個(gè)公眾號(hào)，該公眾號(hào)是需要能認(rèn)證的(企業(yè)認(rèn)證)。

然后需要提前看一下開發(fā)幫助文檔，了解一下基礎(chǔ)。

接口使用流程

接口使用流程為：

• 開發(fā)前端向后端請求微信接口調(diào)用配置信息
• 開發(fā)者后端服務(wù)器使用 AppID 和 AppSecret 向微信服務(wù)器獲取 token
• 后端通過 token 獲取 ticket 并創(chuàng)建簽名
• 返回簽名至前端，根據(jù)需要調(diào)用的接口功能創(chuàng)建配置信息
• 前端使用微信提供的 js 方法注入配置信息
• 通過接口使用驗(yàn)證后，使用相應(yīng)的接口實(shí)現(xiàn)需要的功能

在使用前，需要在微信工作號(hào)里進(jìn)行一些設(shè)置，并獲取 AppID 和 AppSecret。通常 token 的有效期是7200秒,即2小時(shí)，此時(shí)間回隨token 一起返回。有效期內(nèi)可以重復(fù)使用，即跳過步驟2。

公眾號(hào)設(shè)置

• 打開微信公眾平臺(tái)，使用管理員登錄
• 設(shè)置與開發(fā) —> 公眾號(hào)設(shè)置 —> 功能設(shè)置 —> JS接口安全域名，下載 txt 文件放置到經(jīng)過備案的網(wǎng)址目錄下并確保能夠訪問，并添加后端服務(wù)訪問域名
• 設(shè)置與開發(fā) —> 基本配置 —> 公眾號(hào)開發(fā)者信息 獲取并記錄 AppID 和 AppSecret
• 設(shè)置與開發(fā) —> 基本配置 —> 公眾號(hào)開發(fā)者信息 設(shè)置添加 IP白名單

前端向后端請求 ticket

前端在頁面渲染時(shí)使用 ajax 向后端請求 ticket。具體的代碼就不寫了。

后端向微信獲取 token

后端收到前端的請求后，向微信的 api 接口發(fā)送請求，請求類型為 GET：

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

參數(shù)說明：

• grant_type : 請求 token 固定填寫 client_credential
• appid & secret : 公眾號(hào)設(shè)置里獲取到的 AppID 和 AppSecret

正常情況下，會(huì)返回 json 包：

{"access_token":"ACCESS_TOKEN","expires_in":7200}

這里的 access_token 就是我們需要的 token 了。expires_in 為有效期，單位秒。

如果請求發(fā)生錯(cuò)誤，則會(huì)返回 json 包：

{"errcode":40013,"errmsg":"invalid appid"}

這個(gè)例子是 AppID 無效，errcode 是錯(cuò)誤碼，errmsg 為錯(cuò)誤信息。

注：后端獲取的 tocken 可以用在別的微信接口通信上，所以最好在有效期內(nèi)保存至緩存。當(dāng)有效期到期時(shí)再獲取新的。

后端根據(jù) token 生成 ticket

獲取 token 后，使用 token 向微信服務(wù)器請求 ticket ，請求類型為 GET:

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

ACCESS_TOKEN 就是之前獲取到的 token 了，準(zhǔn)備使用 JS-SDK 接口 type 參數(shù)就設(shè)置為 jsapi。成功后返回一個(gè) json 包：

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

• errcode : 錯(cuò)誤碼
• errmsg : 錯(cuò)誤信息
• ticket : 獲取到的 ticket 數(shù)據(jù)
• expires_in : 有效期，單位秒

注： ticket 最好也保存在緩存內(nèi)，到期時(shí)再重新請求。

根據(jù) ticket 創(chuàng)建簽名

創(chuàng)建簽名和配置信息需要這些數(shù)據(jù)：

• noncestr : 隨機(jī)字符串
• jsapi_ticket : 微信服務(wù)器發(fā)送的 ticket
• timestamp : 時(shí)間戳
• url : 前端要使用 jsapi 的頁面地址，注意不包括 # 號(hào)和后面的部分

例如：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

然后對這些數(shù)據(jù)，按照字段名的 ASCII 碼升序排列(字典序)后，使用 URL 鍵值對的格式(即 key1=value1&key2=value2…)拼接成字符串，注意所有參數(shù)名均為小寫字符。排序?qū)嶋H上就是 jsapi_ticket -> noncerstr -> timestap -> url 。拼接好后是這樣：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

最后對此段字符串進(jìn)行 sha1 簽名，得到 signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

將這些數(shù)據(jù)和 appid 返回給前端(其中 url 是前端傳送給后端的)

前端創(chuàng)建配置信息，并注入驗(yàn)證

配置信息是一個(gè)對象，其格式為：

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

首先引入微信SDK的一個(gè) JS 文件：

http://res.wx.qq.com/open/js/jweixin-1.6.0.js
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js
兩個(gè)均支持 https ，隨便哪個(gè)個(gè)都可以，另一個(gè)是備用

根據(jù)后端傳入的參數(shù)設(shè)置配置對象，并注入

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

處理驗(yàn)證

可以使用封裝好的 wx.ready 接口來處理成功驗(yàn)證行為，使用 wx.error 接口來處理驗(yàn)證失敗行為

wx.ready(function(){
  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

wx.error(function(res){
  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});

例如實(shí)現(xiàn)將頁面在微信分享給朋友及分享到朋友圈的功能

// 成功
wx.ready(() => {
  var shareData = {
    title: "新聞",
    desc: "每日新聞",
    link: window.location.href,
    imgUrl: "https://xxxxxxx.com/img/logo.jpg"
  };
  //自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
  wx.updateAppMessageShareData(shareData);
  //自定義“分享到朋友圈”及“分享到 QQ 空間”按鈕的分享內(nèi)容（1.4.0）
  wx.updateTimelineShareData(shareData);
});
//錯(cuò)誤
wx.error(function (res) {
  console.log("微信分享錯(cuò)誤信息", res);
});

SDK接口調(diào)用說明

所有 SDK 接口都是通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個(gè)對象，除了每個(gè)接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：

• success：接口調(diào)用成功時(shí)執(zhí)行的回調(diào)函數(shù)。
• fail：接口調(diào)用失敗時(shí)執(zhí)行的回調(diào)函數(shù)。
• complete：接口調(diào)用完成時(shí)執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會(huì)執(zhí)行。
• cancel：用戶點(diǎn)擊取消時(shí)的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會(huì)用到。
• trigger: 監(jiān)聽Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。

總結(jié) 

到此這篇關(guān)于微信開發(fā)相關(guān)功能之使用微信JS-SDK接口的文章就介紹到這了,更多相關(guān)使用微信JS-SDK接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論