首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onNovember 28, 2016

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

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

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

点开第一篇文章

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

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

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

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

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

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

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

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

如下图：

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

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

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

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

前面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: '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");
   }
  });
 //拍照或从手机相册选择。点击页面上的按钮就可以调用手机里的相册。
  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: '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");
//  }
// });
 // }
</script>
</html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

简单成书

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
基于pear auth实现登录验证
Feb 26 PHP
php中将html中的br换行符转换为文本输入中的换行符
Mar 26 PHP
基于php和mysql的简单的dao类实现crud操作功能
Jan 27 PHP
PHP cURL初始化和执行方法入门级代码
May 28 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
Oct 09 PHP
PHP模板引擎Smarty中的保留变量用法分析
Apr 11 PHP
Adnroid 微信内置浏览器清除缓存
Jul 11 PHP
php cookie工作原理与实例详解
Jul 18 PHP
php实现的读取CSV文件函数示例
Feb 07 PHP
PHP 二级子目录（后台目录）设置二级域名
Mar 02 PHP
php引用和拷贝的区别知识点总结
Sep 23 PHP
php连接sftp的作用以及实例代码
Sep 23 PHP
php微信高级接口调用方法（自定义菜单接口、客服接口、二维码）
Nov 28 #PHP
php微信公众平台交互与接口详解
Nov 28 #PHP
php微信公众号开发模式详解
Nov 28 #PHP
jQuery+php简单实现全选删除的方法
Nov 28 #PHP
PHP中的use关键字及文件的加载详解
Nov 28 #PHP
php连接微软MSSQL(sql server)完全攻略
Nov 27 #PHP
php源码之将图片转化为data/base64数据流实例详解
Nov 27 #PHP
自动化(1) zip(1) Bean(3) metaclass(1) IOC(3) XML(1) 进销存(1) enumerate(1) list(1) find(1)
You might like
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Laravel执行migrate命令提示：No such file or directory的解决方法
2016/03/16 PHP
PHP控制反转（IOC）和依赖注入（DI）
2017/03/13 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
js new Date()实例测试
2019/10/31 Javascript
JS实现纵向轮播图（初级版）
2020/01/18 Javascript
python人人网登录应用实例
2014/09/26 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python使用配置文件过程详解
2019/12/28 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
如何利用cmp命令比较文件
2016/04/11 面试题
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2015大学生实训报告
2014/11/05 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers