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

来源：互联网发布：工程类软件编辑：程序博客网时间：2024/06/03 19:58

微信开发的准备工作（不熟，不是我来搞的，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后面的的地址需要授权，只有这样才能使用支付功能，或者自定义分享内容

1 0