微信公众号开发教程[017]-网页开发-JSSDK

我承接app和微信公众号开发,如果有谁需要的话,可以惠顾我,谢谢.

QQ: 40678884

微信: szuzsq

-------------------------------------------------------------------------------------------------------------------------------------

jssdk就是在微信页面里调用手机设备(如相机,重力感应等)的一套javascript代码.

题外话,做app时,在网页里调用手机设备,比较出名的是cordova,大家可以度娘一下,练练手.不过我嫌这玩意麻烦,就自己写了套,是从WebViewJavascriptBridge: https://github.com/marcuswestin/WebViewJavascriptBridge里面改过来的,原始WebViewJavascriptBridge只支持ios,我改为也支持android了,同时优化了一下代码.大家如果有需要,可以找我(QQ:40678884).这玩意,其实就是在页面和手机之间打个洞,例如页面提供个javascript函数,让iphone的ios代码调用(允许有参数和返回值);或者反过来ios提供个函数让javascript调用.

言归正传,使用jssdk也不难.

1).绑定域名.

微信公众号官方后台管理->公众号设置->功能设置->JS接口安全域名..注意,这里和网页授权绑定域名一样,也是不带http,https,并且不需要子目录.例如我要使用jssdk的页面为http://szuzsq.tunnel.qydev.com/weixin/sample.php,则这里我的域名是szuzsq.tunnel.qydev.com

2).引入JS文件
在需要调用JS接口的页面引入如下JS文件http://res.wx.qq.com/open/js/jweixin-1.0.0.js,如需使用摇一摇周边功能请引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js.

例如,我的代码如下:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3).下载官方的示例代码:

http://demo.open.weixin.qq.com/jssdk/sample.zip

在代码里提供了几种语言的实现.我使用php..里面的sample.php我改了一下,就是我要调用手机设备了.,代码如下:

<?php
//文件名: http://szuzsq.tunnel.qydev.com/weixin/sample.php

error_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.wx.qq.com/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() {
//在这里调用API
btn.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;
}

以下是效果图:

微信公众号开发教程[017]-网页开发-JSSDK

秒客网

微信公众号开发教程[017]-网页开发-JSSDK

相关文章