php微信公众号js-sdk开发应用

下面是关于PHP微信公众号JS-SDK开发应用的完整攻略：

什么是JS-SDK

JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用 JS-SDK，网页开发者可以轻松地在微信内嵌入即时通讯、地理位置定位等微信原生功能，为微信用户提供丰富的网页应用体验。

开发步骤

1. 配置开发环境

首先需要注册微信公众平台账号，并在开发者中心中配置开发环境，设置测试账号等。

2. 获取 access_token

获取 access_token 是使用微信 JS-SDK 的前提。access_token 是一种网页授权获取用户信息和开发者凭据有效性的证明。

$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET';

$res = file_get_contents($url);
$data = json_decode($res, true);

$access_token = $data['access_token'];

3. 获取 Js-Api Ticket

获取 Js-Api Ticket 是使用微信 JS-SDK 的重要步骤。Js-Api Ticket 是一种网页授权获取用户信息和开发者凭据有效性的证明。

$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token";

$res = file_get_contents($url);
$data = json_decode($res, true);

$jsapi_ticket = $data['ticket'];

4. 生成签名

生成签名是使用微信 JS-SDK 最关键的一步。签名是一种在客户端和服务端相互通信的过程中进行验证的机制，其作用是防止未经授权的第三方应用程序对通信中的数据进行篡改。

$noncestr = "Wm3WZYTPz0wzccnW";
$timestamp = time();
$url = "";
$signature = "";

$signature = sha1("jsapi_ticket=$jsapi_ticket&noncestr=$noncestr&timestamp=$timestamp&url=$url");

5. 在页面中引入 JS-SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
  wx.config({
      debug: true,
      appId: '<?php echo $appId; ?>',
      timestamp: '<?php echo $timestamp; ?>',
      nonceStr: '<?php echo $noncestr; ?>',
      signature: '<?php echo $signature; ?>',
      jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'checkJsApi',
        'onMenuShareAppMessage',
        'onMenuShareTimeline',
        'onMenuShareQQ',
        'onMenuShareWeibo'
      ]
  });
  wx.ready(function () {
      // 在这里调用 API
  });
</script>

示例说明

示例一：获取用户地理位置

首先需要在微信公众平台中开启“获取用户地理位置”的接口权限。

wx.getLocation({
    success: function(res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    }
});

示例二：选择图片

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

注意：以上示例都需要在wx.ready(function(){...})回调函数中执行。