微信的 JSSDK

闲来无事,花了几个小时研究了下微信的 JSSDK。

将学习中所用到的代码都复制到这儿,以后查看的时候方便点.

PHP

$AppID = "";    //APPID
$AppSecret = "";    //APPSECRET
$token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$AppID&secret=$AppSecret";
$token_content = file_get_contents( $token_url );
// token 次数有限 需要缓存
$token = "" ;        //取得上面 获得的 token

$jsapi_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$tokenK&type=jsapi";
$jsapi_content = file_get_contents( $jsapi_url );
//  需要缓存
$url = "";    //调用 JSSDK 的 URL
$noncestr="";    //随机生成的 16位数,JS里也会用到
$jsapi_ticket = "";    //上面获得的ticket
$timestamp = time();
$string1 = "jsapi_ticket=$jsapi_ticket&noncestr=$noncestr&timestamp=$timestamp&url=$url";
//拼接字符串
$signature = sha1($string1);    //    JS的签名

<html>
<head>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="/themes/default/wap/js/zepto.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
	var wxConfig = {
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '<{$AppID}>', // 必填，公众号的唯一标识
			timestamp: <{$timestamp}>, // 必填，生成签名的时间戳
			nonceStr: '<{$noncestr}>', // 必填，生成签名的随机串
			signature: '<{$signature}>',// 必填，签名，见附录1
			jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','chooseImage','startRecord','scanQRCode','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
　　　　　　　　　　　　　　　　//http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.99.84.E5.BD.952-.E6.89.80.E6.9C.89JS.E6.8E.A5.E5.8F.A3.E5.88.97.E8.A1.A8
		};
	wx.config(wxConfig);
</script>
</head>
<body>
<button id="share">分享到朋友圈</button>
<button id="share2">分享给朋友</button>
<button id="choose">选择图片</button>
<button id="record">录音录音</button>
<button id="QRcode">扫一扫</button>
<button id="where">我在哪</button>
</body>
</html>
<script>
	wx.ready(function(){
		$("#share").tap(function(){
			wx.onMenuShareTimeline({
				title: '酱油酱油', // 分享标题
				link: 'http://xxxx.com', // 分享链接
				imgUrl: '', // 分享图标
				success: function () { 
					alert("分享成功!");
				},
				cancel: function () { 
					alert("分享失败?");
				}
			});
		});
		$("#share2").tap(function(){
			wx.onMenuShareAppMessage({
				title: '酱油酱油', // 分享标题
				link: 'http://xxxx.com', // 分享链接
				imgUrl: '', // 分享图标
				success: function () { 
					alert("分享成功!");
				},
				cancel: function () { 
					alert("分享失败?");
				}
			});
		});
		$("#reload").tap(function(){
			location.reload();
		});
		$("#choose").tap(function(){
			wx.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function (res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
				}
			});
		});
		$("#record").tap(function(){
			wx.startRecord({
			  cancel: function () {
				alert('用户拒绝授权录音');
			  }
			});
		});
		$("#QRcode").tap(function(){
			alert("kaishi")
			wx.scanQRCode({
				needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: function (res) {
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					
				}
			});
		});
		$("#where").tap(function(){
			alert("fff")
			wx.getLocation({
				type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				success: function (res) {
					var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					var speed = res.speed; // 速度，以米/每秒计
					var accuracy = res.accuracy; // 位置精度
					var str = "纬度为"+latitude;
						str += ";经度为"+longitude;
					alert(str);
				}
			});
		});
	});
</script>

更多的详情在详情