微信的 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的签名

  



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>

  

更多的详情 在 详情

时间: 2024-10-29 19:06:47

微信的 JSSDK的相关文章

微信企业号 JS-SDK:上传图片

微信企业号 JS-SDK:上传图片 微信的JS-SDK提供了微信客户端相关的功能,如:拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫等微信特有的能力,为微信用户提供更优质的网页体验.这里将会介绍如何通过调用JS-SDK接口从手机摄像头或相册内上传图片. 目录 1. 介绍 2. 代码示例 1. 介绍 1.1 流程说明 首先看下整个Demo的流程: ①微信客户端访问页面 ②获取JS-SDK中的相关权限 API:http://qydev.weixin.qq.com/wiki/

Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践

先来看看微信分享效果: 在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包 下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip 二.设置安全域名 所有的微信JS接口都只能在公众号绑定的域名下调用.登录微信公众平台,点击左边的“公众号设置”,切换到“功能设置”,在“JS接口安全域名”一栏设置安全域名,下载验证文件到网站根目录,再回到

ThinkPHP3.2.3集成微信分享JS-SDK实践

先来看看微信分享效果: 在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包 下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip 二.设置安全域名 所有的微信JS接口都只能在公众号绑定的域名下调用.登录微信公众平台,点击左边的"公众号设置",切换到"功能设置",在"JS接口安全域名"

微信开放JS-SDK,助力网页开发

From:http://mp.weixin.qq.com/s?__biz=MjM5NDAwMTA2MA==&mid=209208141&idx=1&sn=1f075212b3482900bb7096ac810dc7f3&key=2f5eb01238e84f7ef75f5c4d8084b275b234159411cccabd57be15d9d54c568c053c1882864db9945028cc57c21b262c&ascene=0&uin=MzUzMDg

微信企业号 jsSDK wx.config报invalid signature错误,导致api接口无法使用

最近在做公司定制化的时候发现一个问题,使用微信的语音API的时候微信报错,错误信息为:the permission value is offline verifying 但是诡异的是:同样的代码在我们公司的产品上就不会报这个错误,可以正确调用接口.但是放在客户的服务器上,wx.config里面的参数配置成客户微信企业号信息就会报错. 通过查询发现,微信JS-SDK的附录5已经说明了这个问题可能存在的原因 通过排查,发现23没有问题,所以将焦点放在了第一个. 通过微信提供的web调试工具发现wx.

0517日重点:微信的jssdk用法

如上图,微信分享默认情况下: 1.微信中分享出去的链接,都是当前那个点击分享操作的页面链接. 2.微信分享链接中的文字,就是页面中的title. 3.微信分享链接中的图片,是页面中默认的第一个img.如果页面没有,就空着. 但是如果想分享出去的页面链接是指定的某页面,或者图片位置显示指定图片,或者中间描述部分不是连接是文字,如下图: 就得必须在项目里用上微信提供的js-sdk了. 参考文档:https://mp.weixin.qq.com/wiki 配置中的签名需要后台配合,生成动态签名才行.

微信开放JS-SDK接口后,广汽菲亚特就脑洞大开了

自从微信开放了JS-SDK接口,包括拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API.通过用户熟悉的网页获得服务,并可享受微信朋友圈的用户流量丶拍照丶语音翻译丶支付等能力,而HTML5页面将成为另一个担任服务用户重任的“武器”. 广汽菲亚特顺势而上,在一个以夜型者为主题的推广活动中做新技术的尝鲜者!借助菲翔.致悦Blacktop新车上市机会,成为国内第一家车企(可能也是第一个品牌哦)开发基于微信平台使用音频技术的互动游戏.Blacktop上市互动活动,调用录音.语音识别强大的原

微信官方jssdk Demo -php版

已经经过修订,解决了https验证出错的问题,解决方案:跳过验证. tp5下的开发 控制器:Lists.php 文件如下: 1 <?php 2 3 namespace app\home\controller; 4 5 use think\Controller; 6 7 use app\home\model\Jssdk as Jsdk; 8 Class Lists extends Base 9 { 10 public function lists() 11 { 12 //$jssdk = new

用c#开发微信(10) JSSDK 基本用法 分享接口“发送到朋友”

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 本文以介绍了分享接口里的"发送给朋友"事件的基本用法,其它的类推. JSSDK使用步骤 1:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安