![微信公众号开发教程[017]-网页开发-JSSDK](https://100zi.50zi.cn/uploadfile/img/15/333/09319222b93dd26e6cb24bd56bbc0282.jpg)
jssdk就是在微信页面里调用手机设备(如相机,重力感应等)的一套javascript代码.
题外话,做app时,在网页里调用手机设备,比较出名的是cordova,大家可以度娘一下,练练手.不过我嫌这玩意麻烦,就自己写了套,是从WebViewJavascriptBridge:/marcuswestin/WebViewJavascriptBridge里面改过来的,原始WebViewJavascriptBridge只支持ios,我改为也支持android了,同时优化了一下代码.大家如果有需要,可以找我(QQ:40678884).这玩意,其实就是在页面和手机之间打个洞,例如页面提供个javascript函数,让iphone的ios代码调用(允许有参数和返回值);或者反过来ios提供个函数让javascript调用.
言归正传,使用jssdk也不难.
1).绑定域名.
微信公众号官方后台管理->公众号设置->功能设置->JS接口安全域名..注意,这里和网页授权绑定域名一样,也是不带http,https,并且不需要子目录.例如我要使用jssdk的页面为http://szuzsq./weixin/sample.php,则这里我的域名是szuzsq.
2).引入JS文件
在需要调用JS接口的页面引入如下JS文件http://res./open/js/jweixin-1.0.0.js,如需使用摇一摇周边功能请引入http://res./open/js/jweixin-1.1.0.js.
例如,我的代码如下:
<script src="http://res./open/js/jweixin-1.0.0.js"></script>
3).下载官方的示例代码:
http://demo.open./jssdk/sample.zip
在代码里提供了几种语言的实现.我使用php..里面的sample.php我改了一下,就是我要调用手机设备了.,代码如下:
<?php//文件名: http://szuzsq./weixin/sample.phperror_reporting(E_ALL || ~E_NOTICE);header("Content-type:text/html; charset=utf-8");require_once "jssdk.php";$jssdk = new JSSDK("wxf649ff600f132a41", "5baf64562b15223f919165d083f9b889");$signPackage = $jssdk->GetSignPackage();?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--因为在手机中，所以添加viewport--><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>微信测试</title></head><body><button id="weixin" style="display: block; margin: 2em auto">微信接口测试</button><script src="http://res./open/js/jweixin-1.0.0.js"></script><script>wx.config({debug: true, //调试阶段建议开启appId: '<?php echo $signPackage["appId"]; ?>',timestamp: '<?php echo $signPackage["timestamp"]; ?>',nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',signature: '<?php echo $signPackage["signature"]; ?>',jsApiList: [//所有要调用的API都要加到这个列表中,这里以图像接口为例"chooseImage", "previewImage", "uploadImage", "downloadImage"]});var btn = document.getElementById('weixin');wx.ready(function() {//在这里调用APIbtn.onclick = function() {wx.chooseImage({success: function(res) {var localIds = res.localIds;//返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片}});}});</script></body></html>
4).在我这边的jssdk.php代码里,提交get请求的代码,有些问题.开启了ssl验证,我就把它关了(即改为和我在utils.php里的curl_http_get代码一样).大家酌情考虑.代码如下:
private function httpGet($url) {//$curl = curl_init();//curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);//curl_setopt($curl, CURLOPT_TIMEOUT, 500);为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。//curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);//curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);//curl_setopt($curl, CURLOPT_URL, $url);//$res = curl_exec($curl);//curl_close($curl);//return $res;$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); //将curl会话获取的信息以字符串返回,而不是直接输出curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); //禁止curl验证对等证书(peer's certificate)curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0); //不检查服务器SSL证书中是否存在一个公用名(common name)curl_setopt($curl, CURLOPT_POST, false); //发送 GET请求.类型为:application/x-www-form-urlencoded//curl_setopt($curl, CURLOPT_POSTFIELDS, $data); //PHP的curl支持通过给此选项传递关联数组(而不是字符串)来生成multipart/form-data的POST请求$result = curl_exec($curl);if($errno = curl_errno($curl))$result = "$errno:" . curl_error($curl);curl_close($curl);return $result;}
以下是效果图:
