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

 更新时间:2016年11月28日 14:51:17   作者:简单成书   我要评论
这篇文章主要为大家详细介绍了php微信公众号js-sdk开发应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

测试js的接口功能,我用的是BAE服务器不是SAE服务器。SAE服务器不能写入文件,测试会出问题。
什么叫js-sdk,我先演示js-sdk接口的具体作用。

我在微信随便打开一片推送文章如下图:

这里写图片描述 

点开第一篇文章

 

上面就是我们的连接文章,如果我们把这篇文章发送给朋友,显示效果如下图:

这里写图片描述

分享到朋友圈我们再来看看效果:

这里写图片描述

为什么同样是文章连接,在公众号、发送给朋友、发送到朋友圈显示的界面效果不一样。公众号的显示效果是因为微信公众帐号在推送的时候调用了微信的消息接口,而后两者是因为页面调用js-sdk相关的sdk接口。
发送给朋友调用了js接口的获取“分享给朋友”按钮点击状态及自定义分享内容接口。
发送给朋友圈调用了js接口的获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。

下面我们来实现调用js-sdk接口的步骤:

第一步:微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

如下图:

这里写图片描述 

只有置于该域名下的页面才能调用js接口。

第二步:http://demo.open.weixin.qq.com/jssdk/sample.zip连接这个地址下载 ,打开里面的php文件夹,你发现4个php文件

这里写图片描述 

前面3 个php文件是配置文件,不要动它,sample.php是我们在微信中打开的连接页面,在这个页面中我们来编写我们的页面代码。这个文件我用来测试,里面的代码跟原版已经不同。

<?php
// echo "nihao";
require_once "jssdk.php";
$jssdk = new JSSDK("wxaf471be5d2bc9521", "93f5c3817074d43e7a7ab3f403cc72dd");//JSSDK中的参数是appid和appsecret。
$signPackage = $jssdk->GetSignPackage();//获取配置参数。
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></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>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//这个是js-sdk文件,一定要引入。
<script>
 var button = document.getElementsByTagName("button");
 var btn = document.getElementById("btn");
 var div = document.getElementsByTagName("div")[0];
 var btn1 = document.getElementById("btn1");
 //wx表示一个js-sdk构建的一个对象。config()是它的一个方法,这个接口用来验证配置。
 wx.config({
 debug: true,//true表示每调用一个接口信息都会在页面alert一段字符串。方便测试过程中国是否能正确调用接口。
 appId: '<?php echo $signPackage["appId"];?>',
 timestamp: <?php echo $signPackage["timestamp"];?>,
 nonceStr: '<?php echo $signPackage["nonceStr"];?>',
 signature: '<?php echo $signPackage["signature"];?>',
 //上面的4个参数,如果你像深入了解其来源就去查看jssdk.php代码。测试过程不需要对上面的代码做任何操作。
 jsApiList: [
  // 所有要调用的 API 都要加到这个列表中
  'onMenuShareAppMessage',//获取“分享给朋友”按钮点击状态及自定义分享内容接口。
  'chooseImage',//获取手机相片接口
  'openLocation'//获取微信地图接口
 ]
 });
//所有的js调用接口都要放到下面的ready()中。
 wx.ready(function () {
 // 在这里调用 API
 //获取“分享给朋友”按钮点击状态,点击后发送给朋友微信,微信上的推送显示内容就是下面的数据
  wx.onMenuShareAppMessage({
   title: '大圣', // 分享标题
   desc: '我要坚持', // 分享描述
   link:'', // 分享链接
   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");
   }
  });
 //拍照或从手机相册选择。点击页面上的按钮就可以调用手机里的相册。
  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属性显示图片
   }
  })
  };
 //微信内置地图接口。点击该按钮就可转到显示当前位置的地图页面
  btn1.onclick = function() {
  wx.openLocation({
 latitude: 0, // 纬度,浮点数,范围为90 ~ -90
 longitude: 0, // 经度,浮点数,范围为180 ~ -180。
 name: '', // 位置名
 address: '', // 地址详情说明
 scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
 infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
  }
 });
// wx.checkJsApi({
//  jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
//  success: function(res) {
//   // 以键值对的形式返回,可用的api值true,不可用为false
//   // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//   alert("success");
//  }
// });
// btn.onclick = function() {
//  div.innerText = "齐天大圣";
//  wx.onMenuShareAppMessage({
//  title: '大圣', // 分享标题
//  desc: '我要坚持', // 分享描述
//  link:'', // 分享链接
//  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");
//  }
// });
 // }
</script>
</html>

测试js的接口功能,我用的是BAE服务器不是SAE服务器。SAE服务器不能写入文件,测试会出问题。
更多功能及详细信息,请大家访问http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • ECSHOP在PHP5.5及高版本上报错的解决方法

    ECSHOP在PHP5.5及高版本上报错的解决方法

    程序不断的更新换代,php版本也在不断的推陈出新,自从php7.0推出,php5.5版本已落伍,但是目前使用php5.5的也不少,接下来,小编给大家整理关于ECSHOP在PHP5.5及高版本上报错的解决方法,小伙伴们一起来学习吧
    2015-08-08
  • 一个简单的php实现的MySQL数据浏览器

    一个简单的php实现的MySQL数据浏览器

    一个简单的php实现的MySQL数据浏览器...
    2007-03-03
  • Laravel实现表单提交

    Laravel实现表单提交

    本文给大家分享的是在使用laravel过程中如何实现表单提交的一个简单示例,非常简单,这里推荐给学习laravel的小伙伴
    2017-05-05
  • php读取excel文件示例分享(更新修改excel)

    php读取excel文件示例分享(更新修改excel)

    这篇文章主要介绍了php读取excel文件示例,还有更新修改功能,需要的朋友可以参考下
    2014-02-02
  • thinkphp的c方法使用示例

    thinkphp的c方法使用示例

    用过thinkphp的朋友都知道,C()方法在整个框架中用的非常普遍,C方法的实现非常简单,但是功能非常强大,下面是C()方法的详解和使用示例
    2014-02-02
  • php视频拍照上传头像功能实现代码分享

    php视频拍照上传头像功能实现代码分享

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,既不是post传递也不是get函数传递,这个另外一种数据格式传递,使用的是$GLOBALS ['HTTP_RAW_POST_DATA'],需要的朋友可以参考下
    2015-10-10
  • thinkPHP导出csv文件及用表格输出excel的方法

    thinkPHP导出csv文件及用表格输出excel的方法

    这篇文章主要介绍了thinkPHP导出csv文件及用表格输出excel的方法,涉及thinkPHP针对表格与Excel文件的操作技巧,需要的朋友可以参考下
    2015-12-12
  • laravel框架查询数据集转为数组的两种方法

    laravel框架查询数据集转为数组的两种方法

    今天小编就为大家分享一篇laravel框架查询数据集转为数组的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Yii不同类型邮箱数量的方法

    Yii不同类型邮箱数量的方法

    这篇文章主要介绍了Yii不同类型邮箱数量的方法,涉及Yii金沙国际官网查询及字符串的遍历、截取与判断相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • php插入mysql数据返回id的方法

    php插入mysql数据返回id的方法

    今天小编就为大家分享一篇php插入mysql数据返回id的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05

最新评论