php微信微信官方账号js-sdk的开发与应用

为了测试js的接口功能，我用BAE服务器代替了SAE服务器。SAE服务器不能写文件，测试会出错。什么是js-sdk？我将首先演示js-sdk接口的具体功能。

我在微信上开了一个推送文章，如下图：

点击第一篇文章

以上是我们的连线文章。如果我们把这篇文章发给朋友，显示效果如下：

在朋友圈分享。让我们来看看效果：

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

让我们实现调用js-sdk接口的步骤：

第一步：微信公众平台进入“微信官方账号设置”的“功能设置”，填写“JS界面安全域名”。

下图：

只有放在域名下的页面才能调用js接口。

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

前三个php文件是配置文件。别碰他们。sample.php是我们在微信上打开的连接页面。在这个页面中，我们将编写我们的页面代码。我用这个文件做测试，里面的代码和原来的不一样。

？php//echo '倪好'；require _ once ' jssdk.php$ JSSDK=new JSSDK(' wxaf 471 be 5 d2bc 9521 '，' 93f 5 c 3817074d 43 e7a 7 ab 3 f 403 cc 72 DD ')；//JSSDK中的参数是appid和appsecret。$ sign package=$ jssdk-getsign package()；//获取配置参数。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-scale=0 '/headdy div/div pig/div button style=' color 3360 red ' id=' BTN ' hello/button id=' BTN 1 '唐生/button/Body script src=' http 3360http://RES . wx . QQ。script var button=document . getelementsbytagname(' button ')；var BTN=document . getelementbyid(' BTN ')；var div=document . getelementsbytagname(' div ')[0]；var BTN 1=document . getelementbyid(' BTN 1 ')；//wx表示由js-sdk构建的对象。Config()是它的方法之一，这个接口用来验证配置。Wx.config ({debug: true，//true表示对接口信息的每次调用都会提醒页面上的一个字符串。方便测试中国能否正确调用接口。appId: '？PHP echo $ sign package[' appId ']；timestamp:PHP echo $ sign package[' timestamp ']；nonceStr: '？PHP echo $ sign package[' non estr ']；签名：PHP echo $ sign package[' sign ']；//以上四个参数，如果您想深入了解它们的来源，请查看jssdk.php代码。测试过程不需要用上面的代码做任何事情。jsaplist :【//所有需要调用的API都要添加到这个列表中，' ' onMenuShareAppMessage '，//获取“分享给朋友”按钮的点击状态，自定义分享内容界面。ChooseImage '，//获取手机照片界面' openLocation'//获取微信地图界面]})；//所有js调用接口都应该放在下面的ready()中。Wx.ready(function () {//在此调用API获取“与好友分享”按钮的点击状态，发送给好友微信。微信上推送的显示内容为以下数据wx . onmensharepmessage({ title : '大圣'，//分享标题desc: '我要坚持'，//分享描述链接：' http://www.baidu.com '，//分享链接imgurl3360 ' http://discuz.comli.com/weixin/weather/icon/cartoon.jpg',//分享图标类型： '链接'，//分享类型，音乐，视频或链接，但默认链接数据url3360 ' '。//如果类型为音乐或视频，应提供数据链接，默认为null success 3360 function(){//用户确认共享后执行回调函数alert(' success ')；}，cancel:函数(){//用户取消共享后执行的回调函数alert(' error ')；} });//拍照或从手机相册中选择。点击页面上的按钮，即可调用手机中的相册。BTN . onclick=function(){ wx . choose image({ count : 1，//default 9 size type :[' original '，' compressed']，//可以指定是原始还是压缩。默认情况下，两者都有sourcetype: ['相册'，'相机']。//可以指定来源是相册还是相机。默认情况下，两者都有success3360函数(RES){ varlocal ids=RES . local ids；//返回选中照片的本地Id列表，本地ID可以作为img标签的src属性显示图片} })；//微信内置地图界面。点击此按钮转到地图页面BTN 1 . onclick=function(){ wx . open location({纬度： 0，//纬度，浮点数，范围从90到-90经度3360 0，//经度，浮点数，范围从180到-180。名称： ' '，//位置名称地址： ' '，//地址详细信息描述比例： 1，//地图缩放级别，整形值，范围从1到28。

默认值为最大infoUrl: '' //可以点击查看位置界面底部显示的超链接进行跳转})；} });//wx . checkjsapi({//jsaplist :[' onmenusharappmessage ']，//待检测js接口列表见附录2，//success 3360 function(RES){/////以键值对形式返回，可用api值为真。不可用为false////例如：{ '检查结果' : { '选择图像' : true ' }，' errmsg' : '检查jsapi 3360 ok'}//alert('成功')；//}//});//BTN。onclick=function () {//div。innertext=《天圣》；//wx . onmenusharapmessage({//title : '大圣'，//分享标题//desc: '我要坚持'，//分享描述//link:' 3358www.baidu.com '，//分享链接//imgurl3360 ' http://discuz.com Li.com/weixin/weather/icon/cartoon . jpg '，//分享图标//type: 'link '，//分享类型、音乐、视频或链接//}、//cancel : function(){////用户取消共享//alert后执行的回调函数(' error ')；//}//});//}/script/html测试js的接口功能，我用BAE服务器代替SAE服务器。SAE服务器不能写文件，测试会出错。更多功能和详情请访问http://MP . weixin . QQ.com/wiki/7/aa 137 b 55 FB 2e 0456 BF 8dd 9148 DD 613 f . html。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。