一：前提配置：
1.创建公众号并认证，备案网站并且有服务器。
2.微信公众平台 - 登录微信公众号 - 设置 - 公众号设置 - 功能设置 - 添加JS接口安全域名，
3.微信公众平台 - 登录微信公众号 - 开发 - 基本配置 - 添加IP地址白名单（配置后才能获取 access_token ）
二：使用JS-SDK完整代码及流程：
获取 access_token --> 根据access_token 获取 jsapi_ticke --> 生成JS-SDK权限验证的签名
html示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>弹窗</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.toast {
padding: 10px 25px 10px 25px;
background: rgba(0, 0, 0, .5);
border-radius: 5px;
color: #ffffff;
text-align: center;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
z-index: 100;
}
</style>
</head>
<body>
<div id="test">
<toast v-if='isShow' :message='isShowMsg'></toast>
<div class="container" @click="showToast">
点击显示 showToast
</div>
</div>
<script>
var that;
Vue.component('toast', {
props: ['message'],
template: `
<div class="toast_bg_transparent">
<div class="toast">
<span>{{message}}</span>
</div>
</div>
`
})
new Vue({
el: '#test',
data() {
return {
isShow: false,
isShowMsg: '', //弹窗提示
}
},
methods: {
getA() {
var url = 'https://jayjing.wang/gongzhonghao_H5/getConfig.php';
$.ajax({
url: url,
complete: res => {
var config = JSON.parse(res.responseText)
console.log('res-config', config)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: config.appId, // 必填，公众号的唯一标识
timestamp: config.timestamp, // 必填，生成签名的时间戳
nonceStr: config.nonceStr, // 必填，生成签名的随机串
signature: config.signature, // 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
}
})
},
showToast() {
console.log('点击了 showToast')
this.isShow = true;
this.isShowMsg = '错误提示';
setTimeout(() => {
this.isShow = false;
}, 1000);
}
},
mounted() {
this.getA()
wx.ready(function(res) {
console.log('ready', res)
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
}
})
</script>
</body>
</html>
运行结果如下图，就证明配置完成，可以开发了。
php示例代码：
<?php
header("Content-Type:text/html;charset=utf8");
header("Access-Control-Allow-Origin: *"); //解决跨域
header('Access-Control-Allow-Methods:GET');// 响应类型
header('Access-Control-Allow-Headers:*'); // 响应头设置
$appid = "wx9025b8efd---";
$secret = "3c242548fb56---";
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
$s = file_get_contents($url);
$s = json_decode($s, true);
$url_b = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$s['access_token']}&type=jsapi";
$data = file_get_contents($url_b);
$data = json_decode($data, true);
$ticket = $data['ticket'];
//print();
//echo $ticket;
// 进行sha1签名
$timestamp = time();
$nonceStr = createNonceStr();
// 注意 URL 建议动态获取(也可以写死).
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 调用JSSDK的页面地址
//$url = $_SERVER['HTTP_REFERER']; // 前后端分离的, 获取请求地址(此值不准确时可以通过其他方式解决)
$str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}";
$sha_str = sha1($str);
$signPackage = array(
"appId" => $appid,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"signature" => $sha_str,
);
//echo $appid.'-----'.$nonceStr.'-----'.$timestamp.'-----'.$sha_str;
echo urldecode(json_encode($signPackage));
//随机字符串
function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
?>大功告成。
扫描二维码关注公众号，回复：
10779583 查看本文章
--
