概述
微信JS-SDK是微信公眾平臺 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包涛酗。
通過使用微信JS-SDK续滋，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖饥瓷、語音涮毫、位置等手機系統(tǒng)的能力贷屎，同時可以直接使用微信分享、掃一掃唉侄、卡券、支付等微信特有的能力属划，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。
JSSDK使用步驟
步驟一：綁定域名
先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”同眯。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。
步驟二：引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件须蜗，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
步驟三：通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來唠粥，若要查看傳入的參數(shù)，可以在pc端打開晤愧，參數(shù)信息會通過log打出，僅在pc端時才會打印官份。
appId: '', // 必填烙丛，公眾號的唯一標識
timestamp: , // 必填羔味，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填赋元，簽名
jsApiList: [ ] // 必填，需要使用的JS接口列表
});
步驟四：通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法搁凸，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作护糖，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行嫡良。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用寝受，不需要放在ready函數(shù)中。
});
步驟五：通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)羡蛾，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看痴怨，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名浪藻。
});
接口調(diào)用說明
所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個對象爱葵，除了每個接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：
1.success：接口調(diào)用成功時執(zhí)行的回調(diào)函數(shù)萌丈。
2.fail：接口調(diào)用失敗時執(zhí)行的回調(diào)函數(shù)。
3.complete：接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)辆雾，無論成功或失敗都會執(zhí)行。
4.cancel：用戶點擊取消時的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到藤乙。
5.trigger: 監(jiān)聽Menu中的按鈕點擊時觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口坛梁。
備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作划咐，這時候使用ajax的回包會還沒有返回。
以上幾個函數(shù)都帶有一個參數(shù)尖殃，類型為對象划煮，其中除了每個接口本身返回的數(shù)據(jù)之外，還有一個通用屬性errMsg弛秋，其值格式如下：
調(diào)用成功時："xxx:ok" ，其中xxx為調(diào)用的接口名
用戶取消時："xxx:cancel"蟹略，其中xxx為調(diào)用的接口名
調(diào)用失敗時：其值為具體錯誤信息
代碼示例
1. html端代碼
在此示例頁面中，調(diào)用了 微信掃一掃挖炬、微信分享朋友圈、微信分享朋友
<!DOCTYPE html>
<html lang="en">
<head>
<title>wechat</title>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
<div style="text-align: center;width: 100%;height:5.5rem;background-color: red;line-height: 5.5rem" class="qr_btn">掃一掃</div>
<div style="height: 100px;"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
wx.config({
debug: true,
appId: "{$appId}",
timestamp: "{$timestamp}",
nonceStr: "{$nonceStr}",
signature: "{$signature}",
jsApiList: ['scanQRCode','updateTimelineShareData','updateAppMessageShareData']
});
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法意敛，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作草姻，所以如果需要在頁面加載時就調(diào)用相關(guān)接口钓猬，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行撩独。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用综膀，不需要放在ready函數(shù)中。
// 微信分享 -- 分享到朋友圈
wx.updateTimelineShareData({
title: 'test wechat share area', // 分享標題
link: 'http://x.tflive.cn/wechatJsapi', // 分享鏈接剧劝，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享圖標
}, function(res) {
//這里是回調(diào)函數(shù)
});
// 微信分享 -- 分享給朋友
wx.updateAppMessageShareData({
title: 'test wechat share friends', // 分享標題
desc: '測試', // 分享描述
link: 'http://x.tflive.cn/wechatJsapi', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享圖標
}, function(res) {
//這里是回調(diào)函數(shù)
});
});
// 微信掃一掃
$(".qr_btn").on('click', function() {
wx.scanQRCode({
needResult: 0, // 默認為0，掃描結(jié)果由微信處理锭部，1則直接返回掃描結(jié)果，
scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼拌禾，默認二者都有
success: function (res) {
var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結(jié)果
}
});
});
</script>
</html>
2. php代碼
<?php
namespace app\index\controller;
use think\Controller;
class Wechat extends Controller
{
protected $accessTokenUrl = 'https://api.weixin.qq.com/cgi-bin/token';
protected $jsapiTicketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?';
protected $appId;
protected $secret;
/**
* 加載微信配置
*/
protected function _initialize(){
$this->appId = config('wechat.appId');
$this->secret = config('wechat.secret');
}
/**
* 獲取微信access_token
* @return mixed|null
*/
public function getAccessToken(){
$accessToken = cache('accessToken');
if($accessToken)
return $accessToken;
$param = [
'grant_type' => 'client_credential',
'appid' => $this->appId,
'secret' => $this->secret,
];
$result = httpGuzzle('get',$this->accessTokenUrl,$param);
$accessToken = $result['access_token'];
cache('accessToken',$accessToken,($result['expires_in']-10));
return $accessToken;
}
/**
* 作用：格式化參數(shù)湃窍，簽名過程需要使用
* @param $paraMap
* @param $urlencode
* @return bool|string
*/
protected function formatBizQueryParaMap($paraMap, $urlencode)
{
$buff = "";
ksort($paraMap);
foreach ($paraMap as $k => $v)
{
if($urlencode)
{
$v = urlencode($v);
}
$buff .= $k . "=" . $v . "&";
}
$reqPar = '';
if (strlen($buff) > 0)
{
$reqPar = substr($buff, 0, strlen($buff)-1);
}
return $reqPar;
}
/**
* 微信jsapi配置 + jsapi接口測試頁面
* @return \think\response\View
*/
public function wechatJsapi(){
// 生成簽名
// 1.獲取 access_token
$access_token = $this->getAccessToken();
if(empty($access_token)) halt('access_token有誤');
// 2.獲取 jsapi_ticket
$jsapi = cache('jsapi');
if(!$jsapi){
$param = [
'access_token' => $access_token,
'type' => 'jsapi'
];
$jsapi = httpGuzzle('get',$this->jsapiTicketUrl,$param);
cache('jsapi',$jsapi,7190);
}
$jsapi_ticket = $jsapi['ticket'];
// 3.生成簽名
$noncestr = genRandomString();
$timestamp = time();
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$signObj['noncestr'] = $noncestr;
$signObj['jsapi_ticket'] = $jsapi_ticket;
$signObj['timestamp'] = $timestamp;
$signObj['url'] = $url;
$signString = $this->formatBizQueryParaMap($signObj, false);
$signString = sha1($signString);
$this->assign([
'appId' => $this->appId,
'timestamp' => $timestamp,
'nonceStr' => $noncestr,
'signature' => $signString
]);
return view();
}
}
/**
* 生成隨機字符串
* @param int $len
* @return string
*/
function genRandomString($len = 32) {
$chars = array(
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
"l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
"w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
"H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z"
);
$charsLen = count($chars) - 1;
// 將數(shù)組打亂
shuffle($chars);
$output = "";
for ($i = 0; $i < $len; $i++) {
$output .= $chars[mt_rand(0, $charsLen)];
}
return $output;
}
備注：
1.微信的配置 寫在配置文件中
2.關(guān)于httpGuzzle的使用您市，請參見 http://www.reibang.com/p/5159d661608c
至此役衡，我們完成了簡單的 微信掃一掃、微信分享朋友圈手蝎、微信分享朋友 的開發(fā)示例。
注：轉(zhuǎn)載請注明出處棵介，尊重原創(chuàng)。歡迎大家來簡書關(guān)注筆者邮辽。也更加感謝大家的打賞與支持唠雕。謝謝岩睁！
