概述
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
JSSDK使用步骤
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [ ] // 必填，需要使用的JS接口列表
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
1.success：接口调用成功时执行的回调函数。
2.fail：接口调用失败时执行的回调函数。
3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
代码示例
1. html端代码
在此示例页面中，调用了 微信扫一扫、微信分享朋友圈、微信分享朋友
<!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信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// 微信分享 -- 分享到朋友圈
wx.updateTimelineShareData({
title: 'test wechat share area', // 分享标题
link: 'http://x.tflive.cn/wechatJsapi', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享图标
}, function(res) {
//这里是回调函数
});
// 微信分享 -- 分享给朋友
wx.updateAppMessageShareData({
title: 'test wechat share friends', // 分享标题
desc: '测试', // 分享描述
link: 'http://x.tflive.cn/wechatJsapi', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享图标
}, function(res) {
//这里是回调函数
});
});
// 微信扫一扫
$(".qr_btn").on('click', function() {
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});
});
</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;
}
/**
* 作用：格式化参数，签名过程需要使用
* @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;
// 将数组打乱
shuffle($chars);
$output = "";
for ($i = 0; $i < $len; $i++) {
$output .= $chars[mt_rand(0, $charsLen)];
}
return $output;
}
备注：
1.微信的配置 写在配置文件中
2.关于httpGuzzle的使用，请参见 https://www.jianshu.com/p/5159d661608c
至此，我们完成了简单的 微信扫一扫、微信分享朋友圈、微信分享朋友 的开发示例。
注：转载请注明出处，尊重原创。欢迎大家来简书关注笔者。也更加感谢大家的打赏与支持。谢谢！
网友评论