PHP开发微信公众号JS-SDK集成指南

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-SDK 测试</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
 <div>我靠</div>
 <div>猪八戒</div>
 <button style="color: red" id="btn">你好</button>
 <button id="btn1">唐生</button>
 
 <!-- 必须引入微信 JS-SDK -->
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 
 <script>
 // 获取 DOM 元素
 var button = document.getElementsByTagName("button");
 var btn = document.getElementById("btn");
 var div = document.getElementsByTagName("div")[0];
 var btn1 = document.getElementById("btn1");
 
 /* 核心：配置 wx.config */
 wx.config({
  debug: true, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '<?php echo $signPackage["appId"];?>', // 必填，公众号的唯一标识
  timestamp: <?php echo $signPackage["timestamp"];?>, // 必填，生成签名的时间戳
  nonceStr: '<?php echo $signPackage["nonceStr"];?>', // 必填，生成签名的随机串
  signature: '<?php echo $signPackage["signature"];?>', // 必填，签名
  jsApiList: [
   'onMenuShareAppMessage', // 分享给朋友
   'chooseImage',           // 拍照或选图
   'openLocation'           // 使用腾讯地图
  ]
 });
 
 /* 核心：在 ready 回调中执行 API */
 wx.ready(function () {
  // 1. 自定义“发送给好友”的内容
  wx.onMenuShareAppMessage({
   title: '大圣', // 分享标题
   desc: '我要坚持', // 分享描述
   link: 'http://www.baidu.com', // 分享链接
   imgUrl: 'http://discuz.comli.com/weixin/weather/icon/cartoon.jpg', // 分享图标
   type: 'link', // 分享类型,music、video或link，不填默认为link
   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
   success: function () { 
    // 用户确认分享后执行的回调函数
    alert("success");
   },
   cancel: function () { 
    // 用户取消分享后执行的回调函数
    alert("error");
   }
  });
 
  // 2. 示例：点击按钮选择图片
  btn.onclick = function(){
   wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
   })
  };
 
  // 3. 示例：点击按钮打开微信内置地图
  btn1.onclick = function() {
   wx.openLocation({
    latitude: 0, // 纬度，浮点数，范围为90 ~ -90
    longitude: 0, // 经度，浮点数，范围为180 ~ -180。
    name: '', // 位置名
    address: '', // 地址详情说明
    scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
   });
  }
 });
 
 /* 错误处理（可选） */
 wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
 });
 
</script>
</body>
</html>