微信开发的准备工作（不熟
，不是我来搞的，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");
}
})
})
}
），所以做了一下是否是微信浏览器的判断，然后通过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了，然后各种打桩，确认无误，
微信的开发，你只有一步步按照他的意思来做，才可能实现功能。
还有一件事，微信的诱导分享规则，现在分享只能用他原生的分享，不能再自定义按钮，只能自定义分享内容（调了好久，然后在网上查了好久资料才看到了），关于诱导分享贴一则官方的通告关于诱导分享，这里有详细规则。、
在这里还略过了一件很重要的事情，就是获取签名等一系列东西，推荐这个博客，写的很详细
而 我的项目中是原来项目经理写的，他写的很简单，参考一下，这个待商榷：
微信分享的链接地址：参考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后面的的地址需要授权，只有这样才能使用支付功能，或者自定义分享内容
扫一扫
5821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
