假设我们已经做好了开发前期准备并使用 php 脚本接入微信公众平台开发，现在我们就来说说怎样使用微信 JS-SDK。
一、概述
微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信 JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
二、使用步骤
- 引入 JS 文件
- 通过
config接口注入权限验证配置 - 通过
ready接口处理成功验证 - 通过
error接口处理失败验证
示例代码：http://demo.open.weixin.qq.com/jssdk/sample.zip
三、签名
- 获取令牌
- 获取
jsapi的ticket - 生成签名：将
jsapi_ticket、noncestr、timestamp、分享的 url 按字母顺序连接起来，进行 sha1 签名。 - 签名错误
- 确认签名算法正确，可用页面工具进行校验。
- 确认
config中nonceStr（js 中驼峰标准大写 S）,timestamp与用以签名中的对应noncestr,timestamp一致。 - 确认
url是页面完整的 URL，请在当前页面alert(location.href.split('#')[0])确认，包括http(s)://部分，以及?后面的 GET 参数部分,但不包括#hash 后面的部分。 - 确认
config中的appid与用来获取jsapi_ticket的appid一致。 - 确保一定缓存
access_token和jsapi_ticket。 - 确保你获取用来签名的
url是动态获取的，动态页面可参见实例代码中 php 的实现方式。如果是 html 的静态页面在前端通过 ajax 将 url 传到后台签名，前端需要用 js 获取当前页面除去#hash部分的链接（可用location.href.split('#')[0]获取，而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
四、接口调用说明
所有接口通过 wx 对象(也可使用 jWeixin 对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
success：接口调用成功时执行的回调函数。fail：接口调用失败时执行的回调函数。complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。cancel：用户点击取消时的回调函数，仅部分有用户取消操作的 api 才会用到。trigger: 监听 Menu 中的按钮点击时触发的方法，该方法仅支持 Menu 中的相关接口
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性 errMsg，其值格式如下：
- 调用成功时：xxx:ok ，其中 xxx 为调用的接口名
- 用户取消时：xxx:cancel，其中 xxx 为调用的接口名
- 调用失败时：其值为具体错误信息
五、接口列表
详见微信 JS-SDK说明文档。
六、调试工具
感兴趣的话，可以试一试下面两个调试工具：
帮助开发者检测调用【微信公众平台开发者 API】时发送的请求参数是否正确，提交相关信息后可获得服务器的验证结果。
- 使用自己的微信号来调试微信网页授权
- 调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出。
- 使用基于 weinre 的移动调试功能，支持 X5 Blink 内核的远程调试。
- 利用集成的 Chrome DevTools 协助开发
七、微信访问
- 扫描二维码关注公众号
- 扫描二维码访问
- 扫描二维码访问订阅号
- 拍照微应用
拍照微调用了 JS-SDK 的图像接口，实现了拍照或从手机相册中选图，代码如下：
wx.ready(function () {
// 拍照
document.querySelector('#captureImage').onclick = function () {
var photo = document.getElementById('photo');
wx.chooseImage({
sizeType: ['original'], // 指定是原图
sourceType: ['camera'], // 指定来源是相机
success: function (res) {
photo.style.display = 'block';
photo.src = res.localIds; // 返回选定照片的本地 ID 列表，localId 可以作为 img 标签的 src 属性显示图片
}
});
};
// 本地选图
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
sizeType: ['compressed'], // 指定是压缩图
sourceType: [''], // 指定来源是相册
success: function (res) {
photo.style.display = 'block';
photo.src = res.localIds
}
});
};
});
wx.error(function (res) {
alert(res.errMsg);
});建议使用 php 来做容器，那样比较方便读取配置。代码如下：
<div align="center">
<div>
<button id="captureImage">拍照</button>
<button id="chooseImage">从图片库</button>
</div>
<div>
<img id="photo" src=""/>
</div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
'chooseImage'
]
});
</script>
<script src="js/camera.js"></script>打开您的微信，扫码关注就可以测试拍照微应用功能了。是不是很简单呢？
评论 (0)