微信Web开发-App前端jssdk获取问题

本问主要介绍微信网页webapp开发过程中引入微信jssdk的坑

1.基本配置

毫无疑问，请参照官方文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

注：一般最容易出现问题的是步骤三

2.config配置失败的原因

2.1域名不一致

官方有错误排查的引导，还是无法解决，那么你问题最可能出现在url的回调问题
2.1.1https和http不一致导致签名错误
2.1.2返回的url与请求的url不一致，包含了域名除hash值外的字段。
eg：请求的接口的页面为为https://www.vitian.vip/
如上述例子，你生成签名的url就一定是https://www.vitian.vip/
注：请求页面的最后的/反斜杠,很容易被忽略

2.2引入的JS文件名称

引入的jssdk文件名称是https和http需要注意

3.实例

getJssdk:function() {
	// var url =""; // 此处为后台的接口
	$.ajax({
		url: url,
		type: 'POST',
		contentType: "application/json",
		// dataType: 'jsonp',//这里要用jsonp的方式不然会报错
		success: function(r) {
			var data = {};
			data.timestamp = r.signPackage.timestamp;
			data.nonceStr = r.signPackage.nonceStr;
			data.signature = r.signPackage.signature;
			data.appId = r.signPackage.appId;
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp:data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.nonceStr, // 必填，生成签名的随机串
				signature: data.signature,// 必填，签名
				jsApiList: [
					'getLocalImgData', 
					'checkJsApi',
					'previewImage',
					'openLocation',
					'getLocation',
					'chooseImage',
					'uploadImage',
					'downloadImage',
					'getLocalImg'
				] // 必填，需要使用的JS接口列表
			});
			wx.ready(function () {
				// vm._getLocation();
				// myVar = setInterval(function(){ vm._getLocation() }, 10000);
			});
			wx.error(function(res){
				console.log(res)
			});
		}
	});
	},