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

最新推荐文章于 2024-07-20 17:38:41 发布

szuzsq

最新推荐文章于 2024-07-20 17:38:41 发布

阅读量3.6k

点赞数 1

文章标签：微信公众号开发实例

本文链接：https://blog.csdn.net/szuzsq/article/details/52055890

版权

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;
	}

以下是效果图:

szuzsq

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信公众号开发教程[017]-网页开发-JSSDK

jssdk就是在微信页面里调用手机设备(如相机,重力感应等)的一套javascript代码. 题外话,做app时,在网页里调用手机设备,比较出名的是cordova,大家可以度娘一下,练练手.不过我嫌这玩意麻烦,就自己写了套,是从WebViewJavascriptBridge:https://github.com/marcuswestin/WebViewJavasc...
复制链接

扫一扫