第一步：先申請公眾號（訂閱號也可以）
https://mp.weixin.qq.com/cgi-bin
第二步：進入基本配置诫舅，獲取appid和appsecret,并設置白名單(白名單一定要設置）
查看ip地址可以先請求獲取access_token,他會報40164，里面有ip地址宫患，加入ip白名單
第三步：進行基礎配置刊懈，這個需要后臺配合，我這邊用的是thinkphp5.0娃闲，
后臺我參照了網上的
php:驗證
publicfunction index()
{
$this->valid();
}
//驗證消息
? ? publicfunction valid()
{
$echoStr = $_GET["echostr"];
if($this->checkSignature()){
echo $echoStr;
exit;
}
}
//檢查簽名
? ? privatefunction checkSignature()
{
$signature = $_GET["signature"];
$timestamp = $_GET["timestamp"];
$nonce = $_GET["nonce"];
$token = TOKEN;
$tmpArr = array($token,$timestamp,$nonce);
sort($tmpArr, SORT_STRING);
$tmpStr = implode($tmpArr);
$tmpStr = sha1($tmpStr);
if($tmpStr == $signature){
return true;
}else{
return false;
}
}
第四步：配置安全域名
第五步：后臺獲取token以及簽名生成返回前端,
生成的token等要存入數據庫虚汛，我這邊沒寫。
// 公眾號的appId
? ? private $appId = '你的appid';
// 公眾號的appSecret
? ? private $appSecret = '你的appsecret';
// 獲取簽名等信息皇帮，本方法內容可做微信分享接口用
? ? publicfunction getInfohj() {
// 獲取最新可用ticket
? ? ? ? $jsapiTicket = $this->getJsApiTicket ();
// 注意 URL 一定要動態(tài)獲取卷哩，不能hardcode.
? ? ? ? $protocol = (! empty ($_SERVER ['HTTPS'] )&& $_SERVER ['HTTPS']!== 'off' || $_SERVER ['SERVER_PORT']== 443)? "https://" : "http://";
// 獲取當前頁面的url
// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
? ? ? ? // 如果方法作為接口，則無法將當前頁面訪問路徑作為分享url属拾，需要訪問接口的前端頁面通過 window.location.href 獲取頁面url傳過來
? ? ? ? $url = $_POST ['url']? $_POST ['url']: "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$timestamp = time ();
$nonceStr? = $this->createNonceStr ();
// 這里參數的順序要按照 key 值 ASCII 碼升序排序
? ? ? ? $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1 ($string );
$signPackage = array (
"appId"? ? => $this->appId,
"nonceStr"? => $nonceStr,
"timestamp" => $timestamp,
"url"? ? ? => $url,
"signature" => $signature,
"rawString" => $string
? ? ? ? );
//如果是接口将谊，這里則是echo json_encode($signPackage);
//return $signPackage;
? ? ? ? echo json_encode($signPackage);
exit;
}
// 創(chuàng)建獲取隨機字符串
? ? privatefunction createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for($i = 0;$i < $length;$i ++) {
$str .= substr ($chars, mt_rand (0, strlen ($chars )- 1 ),1 );
}
return $str;
}
// 獲取ticket
? ? privatefunction getJsApiTicket() {
// jsapi_ticket 應該存在數據庫中
? ? ? ? //$data = json_decode ( $this->get_php_file ( "jsapi_ticket.php" ) );
? ? ? ? // 獲取最新可用token冷溶，ticket需要通過token獲取
? ? ? ? $accessToken = $this->getAccessToken ();
// 如果是企業(yè)號用以下 URL 獲取ticket
// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
? ? ? ? $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$res = json_decode($this->httpGet ($url ),true);
$ticket = isset($res['ticket'])?$res['ticket']: '';
return $ticket;
}
// 獲取token
? ? privatefunction getAccessToken() {
// access_token 應該全局存儲與更新，以下代碼以寫入到文件中做示例尊浓，實際應存在數據庫中
? ? ? ? //$data = json_decode ( $this->get_php_file ( "access_token.php" ) );
? ? ? ? //獲取沒過期的token逞频，過期則重新獲取
? ? ? ? // 如果是企業(yè)號用以下URL獲取access_token
// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
? ? ? ? $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
$res =json_decode($this->httpGet ($url ),true);
$access_token = isset($res['access_token'])?$res['access_token']: '';
return $access_token;
}
// curl訪問返回數據
? ? privatefunction httpGet($url) {
$curl = curl_init ();
curl_setopt ($curl,CURLOPT_RETURNTRANSFER,true );
curl_setopt ($curl,CURLOPT_TIMEOUT,500 );
// 為保證第三方服務器與微信服務器之間數據傳輸的安全性，所有微信接口采用https方式調用栋齿，必須使用下面2行代碼打開ssl安全校驗虏劲。
? ? ? ? // 如果在部署過程中代碼在此處驗證失敗，請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別文件褒颈。
? ? ? ? curl_setopt ($curl,CURLOPT_SSL_VERIFYPEER,1 );
curl_setopt ($curl,CURLOPT_SSL_VERIFYHOST,2 );//CURLOPT_SSL_VERIFYHOST 設置為 1 是檢查服務器SSL證書中是否存在一個公用名(common name)。注：公用名(Common Name)一般來講就是填寫將要申請SSL證書的域名 (domain)或子域名(sub domain)励堡。 設置成 2谷丸，會檢查公用名是否存在，并且是否與提供的主機名匹配应结。 在生產環(huán)境中刨疼，這個值應該是 2（默認值）
? ? ? ? curl_setopt ($curl,CURLOPT_URL,$url );
$res = curl_exec ($curl );
curl_close ($curl );
return $res;
}
第六步：前端獲取，并調取
這是我后臺返回的結構
<div @click="onClick">掃一掃</div>
let hexcase = 0;/* hex output format. 0 - lowercase; 1 - uppercase */
? import wx from 'weixin-js-sdk'
? import axios from 'axios'
? import qsfrom 'qs'
? import $ from 'jquery'
? export default {
data(){
return{
}
},
methods:{
onClick() {
let data=qs.stringify({
url:"你的網頁鏈接"
? ? ? ? ? ? })
//alert("1231231231")
? ? ? ? axios.post('后端接口',data).then(res=>{
//console.log(res)
? ? ? ? ? ? wx.config({
debug: false,// 開啟調試模式,調用的所有api的返回值會在客戶端alert出來鹅龄，若要查看傳入的參數揩慕，可以在pc端打開，參數信息會通過log打出扮休，僅在pc端時才會打印迎卤。
? ? ? ? ? ? ? appId: '你的appid',// 必填，公眾號的唯一標識
? ? ? ? ? ? ? timestamp:res.data.timestamp ,// 必填玷坠，生成簽名的時間戳
? ? ? ? ? ? ? nonceStr: res.data.nonceStr,// 必填蜗搔，生成簽名的隨機串
? ? ? ? ? ? ? signature: res.data.signature,// 必填，簽名
? ? ? ? ? ? ? jsApiList: ['scanQRCode']// 必填八堡，需要使用的JS接口列表
? ? ? ? ? ? });
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法樟凄，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作兄渺，所以如果需要在頁面加載時就調用相關接口缝龄，則須把相關接口放在ready函數中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口挂谍，則可以直接調用叔壤，不需要放在ready函數中。
? ? ? ? ? ? ? wx.scanQRCode({
needResult: 0,// 默認為0口叙，掃描結果由微信處理百新，1則直接返回掃描結果，
? ? ? ? ? ? ? ? scanType: ["qrCode","barCode"],// 可以指定掃二維碼還是一維碼庐扫，默認二者都有
? ? ? ? ? ? ? ? success: function (res) {
var result = res.resultStr;// 當needResult 為 1 時饭望，掃碼返回的結果
? ? ? ? ? ? ? ? ? //alert (result)
? ? ? ? ? ? ? ? }
});
});
/* 處理失敗驗證*/
? ? ? ? ? ? wx.error(function (res) {
// config 信息驗證失敗會執(zhí)行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名
? ? ? ? ? ? ? alert('配置驗證失敗: ' + res.errMsg)
})
})
},
}
}
