第一步：先申请公众号（订阅号也可以）
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 一定要动态获取，不能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;
}
// 创建获取随机字符串
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 ();
// 如果是企业号用以下 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，过期则重新获取
// 如果是企业号用以下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，会检查公用名是否存在，并且是否与提供的主机名匹配。 在生产环境中，这个值应该是 2（默认值）
curl_setopt ($curl,CURLOPT_URL,$url );
$res = curl_exec ($curl );
curl_close ($curl );
return $res;
}
第六步：前端获取，并调取
这是我后台返回的结构
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信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在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 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
alert('配置验证失败: ' + res.errMsg)
})
})
},
}
}