微信开发（js-sdk）中遇见的各种问题

最新推荐文章于 2025-03-04 15:49:40 发布

dt13191

最新推荐文章于 2025-03-04 15:49:40 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/dt13191/article/details/54913489

版权

微信开发的准备工作（不熟，不是我来搞的，copy一下别人和官方的）

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入js文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

3. 通过config接口注入权限配置直至功能完善 ( 从这里开始写写坑和自己的心得 )

前面的自不必说，都是按步就班的按照官方文档来写，

//判断是否是微信浏览器
		function isWeiXin(){
		    var ua = window.navigator.userAgent.toLowerCase();
		    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		        return true;
		    }else{
		        return false;
		    }
		}
if(isWeiXin()){
		
		$(function(){
			
			 var client_url = window.location.href;//本地地址
            //  alert("client_url="+client_url)
             var data = {
               client_url : client_url
             }
             $.ajax({
                type : "POST",
                url : basepath+"h5weixin/getConfig.html",
                data : JSON.stringify(data),
                cache : false,
                contentType:"application/json",
                success : function(response){
                 var response = JSON.parse(response);
                 var data = response.data ;
                  alert("getConfig");
                //  alert(data)
                  alert(JSON.stringify(data));
                 //通过config接口注入权限验证配置
                 wx.config({
                     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                     appId: data.appId, // 必填，公众号的唯一标识
                     timestamp:data.timestamp, // 必填，生成签名的时间戳
                     nonceStr : data.noncestr,  // 必填，生成签名的随机串
                     signature: data.signature,// 必填，签名
                     jsApiList: ['checkJsApi',
                     'onMenuShareTimeline',
                     'onMenuShareAppMessage',
                     'onMenuShareQQ',
                     'onMenuShareWeibo',
                     'hideMenuItems',
                     'showMenuItems',
                     'hideAllNonBaseMenuItem',
                     'showAllNonBaseMenuItem',
                     'translateVoice',
                     'startRecord',
                     'stopRecord',
                     'onRecordEnd',
                     'playVoice',
                     'pauseVoice',
                     'stopVoice',
                     'uploadVoice',
                     'downloadVoice',
                     'chooseImage',
                     'previewImage',
                     'uploadImage',
                     'downloadImage',
                     'getNetworkType',
                     'openLocation',
                     'getLocation',
                     'hideOptionMenu',
                     'showOptionMenu',
                     'closeWindow',
                     'scanQRCode',
                     'chooseWXPay',
                     'openProductSpecificView',
                     'addCard',
                     'chooseCard',
                     'openCard'] // 必填，需要使用的JS接口列表
                 });
                // alert("开始展示右上角菜单");
                // wx.showOptionMenu();
               //  alert("展示右上角菜单");
                },
                error : function(){
                   console.log("error1");
                }
                })
                  
		})
		}

//判断是否是微信浏览器
		function isWeiXin(){
		    var ua = window.navigator.userAgent.toLowerCase();
		    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		        return true;
		    }else{
		        return false;
		    }
		}
if(isWeiXin()){
		
		$(function(){
			
			 var client_url = window.location.href;//本地地址
            //  alert("client_url="+client_url)
             var data = {
               client_url : client_url
             }
             $.ajax({
                type : "POST",
                url : basepath+"h5weixin/getConfig.html",
                data : JSON.stringify(data),
                cache : false,
                contentType:"application/json",
                success : function(response){
                 var response = JSON.parse(response);
                 var data = response.data ;
                  alert("getConfig");
                //  alert(data)
                  alert(JSON.stringify(data));
                 //通过config接口注入权限验证配置
                 wx.config({
                     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                     appId: data.appId, // 必填，公众号的唯一标识
                     timestamp:data.timestamp, // 必填，生成签名的时间戳
                     nonceStr : data.noncestr,  // 必填，生成签名的随机串
                     signature: data.signature,// 必填，签名
                     jsApiList: ['checkJsApi',
                     'onMenuShareTimeline',
                     'onMenuShareAppMessage',
                     'onMenuShareQQ',
                     'onMenuShareWeibo',
                     'hideMenuItems',
                     'showMenuItems',
                     'hideAllNonBaseMenuItem',
                     'showAllNonBaseMenuItem',
                     'translateVoice',
                     'startRecord',
                     'stopRecord',
                     'onRecordEnd',
                     'playVoice',
                     'pauseVoice',
                     'stopVoice',
                     'uploadVoice',
                     'downloadVoice',
                     'chooseImage',
                     'previewImage',
                     'uploadImage',
                     'downloadImage',
                     'getNetworkType',
                     'openLocation',
                     'getLocation',
                     'hideOptionMenu',
                     'showOptionMenu',
                     'closeWindow',
                     'scanQRCode',
                     'chooseWXPay',
                     'openProductSpecificView',
                     'addCard',
                     'chooseCard',
                     'openCard'] // 必填，需要使用的JS接口列表
                 });
                // alert("开始展示右上角菜单");
                // wx.showOptionMenu();
               //  alert("展示右上角菜单");
                },
                error : function(){
                   console.log("error1");
                }
                })
                  
		})
		}

上面因为代码要和h5的共用（不要问为什么

），所以做了一下是否是微信浏览器的判断，然后通过config注册权限，然后再$(function(){})外面写wx.ready()(不需要也没有必要写里面，注册之后马上就会执行ready，大家都懂)

      wx.ready(function(){
		 		var param = {
		 			shareCode:101,
		 			wx:1
		 		};
		 		var title="小豆课堂";
		 		var link = "http://douwong.com/wx/index.html";
		 		var imgUrl="http://www.xiaodouedu.com/theme/1/images/logo.png";
		 		var desc = "快来注册小豆课堂，跟我一起当学霸！10天免费体验在线课程。";
		 		//获取分享规则，公用参数
		 		//我自己的逻辑，已经删除
		 		
		        wx.showMenuItems({
				    menuList: ['menuItem:share:timeline','menuItem:share:appMessage','menuItem:share:qq',
				    	'menuItem:share:weiboApp','menuItem:share:QZone','menuItem:share:facebook'] // 要显示的菜单项，所有menu项见附录3
				});
                wx.onMenuShareTimeline({  
			        title: title, // 分享标题  
			        link: link,  
			        imgUrl: imgUrl, // 分享图标
			        success: function () {
			             showMsg("分享成功");
			        },
			        cancel: function () { 
			              
			        }
			    });
			    wx.onMenuShareAppMessage({
				    title: title, // 分享标题
				    desc: desc, // 分享描述
				    link: link, // 分享链接
				    imgUrl: imgUrl, // 分享图标
				    type: '', // 分享类型,music、video或link，不填默认为link
				    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				    success: function () { 
				        // 用户确认分享后执行的回调函数
				        showMsg("分享成功");
				    },
				    cancel: function () { 
				        // 用户取消分享后执行的回调函数
				    }
				});  
				wx.onMenuShareQQ({
				    title: title, // 分享标题
				    desc: desc, // 分享描述
				    link: link, // 分享链接
				    imgUrl: imgUrl, // 分享图标
				    success: function () { 
				       // 用户确认分享后执行的回调函数
				       showMsg("分享成功");
				    },
				    cancel: function () { 
				       // 用户取消分享后执行的回调函数
				    }
				});
				wx.onMenuShareWeibo({
				    title: title, // 分享标题
				    desc: desc, // 分享描述
				    link: link, // 分享链接
				    imgUrl: imgUrl, // 分享图标
				    success: function () { 
				       // 用户确认分享后执行的回调函数
				       showMsg("分享成功");
				    },
				    cancel: function () { 
				        // 用户取消分享后执行的回调函数
				    }
				});
				wx.onMenuShareQZone({
				    title: title, // 分享标题
				    desc: desc, // 分享描述
				    link: link, // 分享链接
				    imgUrl: imgUrl, // 分享图标
				    success: function () { 
				       // 用户确认分享后执行的回调函数
				       showMsg("分享成功");
				    },
				    cancel: function () { 
				        // 用户取消分享后执行的回调函数
				    }
				});
               });

这里碰上一个大坑，让我网上查了好久，打了n个断点来测试，唉。。就是这个

wx.showMenuItems

这个方法本来是没必要写的，但是，我们微信端在公用js中写了一个禁用右上角分享功能的东西，贴出来看看

//隐藏微信中网页右上角按钮
function onBridgeReady() {
      WeixinJSBridge.call('hideOptionMenu');
}
if(currentURL.indexOf("detail/noticedetail.html") > -1
  || currentURL.indexOf("discovery/detali.html") > -1 ){
	//if条件通过则放行  ，不隐藏分享菜单
}else{
	if (typeof WeixinJSBridge == "undefined") {
	    if (document.addEventListener) {
	        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
	    } else if (document.attachEvent) {
	        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
	        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
	    }
	} else {
	    onBridgeReady();
	}
}









就是这个，他就将微信右上角的功能键隐藏了，一开始查阅资料以为是隐藏了那三个点，其实不是，它只是将里面的传播类和保护类隐藏了，基础类是不能被隐藏的，所以我再加了这个显示传播类的代码。做完这些后，就可以开始测试了。测试的方法就是先开启debug了，然后各种打桩，确认无误，

微信的开发，你只有一步步按照他的意思来做，才可能实现功能。

还有一件事，微信的诱导分享规则，现在分享只能用他原生的分享，不能再自定义按钮，只能自定义分享内容（调了好久，然后在网上查了好久资料才看到了），关于诱导分享贴一则官方的通告关于诱导分享，这里有详细规则。、









在这里还略过了一件很重要的事情，就是获取签名等一系列东西，推荐这个博客，写的很详细

微信开发：JS-SDK之分享接口的实现

而 我的项目中是原来项目经理写的，他写的很简单，参考一下，这个待商榷：

微信分享的链接地址：参考https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb2e533b85d18e5a2&redirect_uri=http%3A%2F%2Fwww.douwong.com%2FH5%2Factivity%2Fsignin.html&response_type=code&scope=snsapi_base&state=&connect_redirect=1#wechat_redirect

redirect_uri后面的的地址需要授权，只有这样才能使用支付功能，或者自定义分享内容