Home > Article > Backend Development > php WeChat public account js-sdk development application
php WeChat public account js-sdk development application
- 墨辰丷Original
- 2018-05-30 11:31:421822browse
This article mainly introduces the relevant information of PHP WeChat official account js-sdk development and application in detail. It has certain reference value. Interested friends can refer to
test js interface. Function, I am using BAE server not SAE server. The SAE server cannot write files and there will be problems with the test.
What is js-sdk, let me first demonstrate the specific function of the js-sdk interface.
I randomly open a push article on WeChat as shown below:
Click on the first article
The above is our connection article. If we send this article to a friend, the display effect will be as follows:
Share to Moments and let’s see the effect:
Why is it also an article link, in the official account, sent to friends, The interface effect displayed when sending to Moments is different. The display effect of the official account is because the WeChat official account calls the WeChat message interface when pushing, and the latter two are because the page calls the SDK interface related to js-sdk.
Send to friends calls the js interface to obtain the click status of the "Share to friends" button and the custom sharing content interface.
Send to Moments calls the js interface to obtain the click status of the "Share to Moments" button and the custom sharing content interface.
Let’s implement the steps to call the js-sdk interface:
Step one: Enter the "Function Settings" of the "Public Account Settings" on the WeChat public platform and fill in the "JS interface security domain name".
As shown below:
Only pages placed under this domain name can call the js interface.
Second step: http://demo.open.weixin.qq.com/jssdk/sample.zip Connect to this address to download, open the php folder inside, You found 4 php files
The first 3 php files are configuration files, don’t touch them, sample.php is what we opened in WeChat Connection page, in this page we write our page code. I used this file for testing, and the code inside is different from the original version.
<?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>
<p>我靠</p>
<p>猪八戒</p>
<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 p = document.getElementsByTagName("p")[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() {
// p.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>
To test the interface function of js, I am using the BAE server, not the SAE server. The SAE server cannot write files and there will be problems with the test.
For more functions and detailed information, please visit http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
The above is the entire content of this article, I hope it will help everyone learn Helps.
Related recommendations:
Summary of PHP knowledge about objects
## The difference between constants, static properties, and non-static properties in php
Classes and objects in php: Detailed graphic explanation of static properties and static methods
The above is the detailed content of php WeChat public account js-sdk development application. For more information, please follow other related articles on the PHP Chinese website!