分类
Javascript PHP

微信公众平台开发入门教程

假设我们已经做好了开发前期准备并使用php脚本接入微信公众平台开发，现在我们就来说说怎样使用微信JS-SDK。

一、概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

二、使用步骤

  1. 引入JS文件
  2. 通过config接口注入权限验证配置
  3. 通过ready接口处理成功验证
  4. 通过error接口处理失败验证

示例代码：http://demo.open.weixin.qq.com/jssdk/sample.zip

三、签名

  1. 获取令牌
  2. 获取jsapi的ticket
  3. 生成签名：将jsapi_ticket、noncestr、timestamp、分享的url按字母顺序连接起来，进行sha1签名。
  4. 签名错误

1) 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

2) 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

3) 确认url是页面完整的url，请在当前页面alert(location.href.split('#')[0])确认，包括http(s)://部分，以及？后面的GET参数部分,但不包括#hash后面的部分。

4) 确认config中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

5) 确保一定缓存access_token和jsapi_ticket。

6) 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去#hash部分的链接（可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

四、接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

1) success：接口调用成功时执行的回调函数。

2) fail：接口调用失败时执行的回调函数。

3) complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

4) cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

5) trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

1) 调用成功时：xxx:ok ，其中xxx为调用的接口名

2) 用户取消时：xxx:cancel，其中xxx为调用的接口名

3) 调用失败时：其值为具体错误信息

五、接口列表

详见微信JS-SDK说明文档。

六、调试工具

接口在线调试工具

帮助开发者检测调用【微信公众平台开发者API】时发送的请求参数是否正确，提交相关信息后可获得服务器的验证结果。

微信web开发者工具

1) 使用自己的微信号来调试微信网页授权

2) 调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分SDK的输入和输出。

3) 使用基于 weinre 的移动调试功能，支持 X5 Blink内核的远程调试。

4) 利用集成的 Chrome DevTools 协助开发

七、微信访问

  1. 扫描二维码关注公众号
  2. 扫描二维码访问

1) 扫描二维码访问订阅号

订阅号

2) 拍照微应用

拍照微应用

拍照微调用了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>

打开您的微信，扫码关注就可以测试拍照微应用功能了。是不是很简单呢？