手机端页面分享到微信，按照官方文档写的，一直无法弹出分享的菜单栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信JS-SDK Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<div class="wxapi_container">
<div class="wxapi_index_container">
<ul class="label_box lbox_close wxapi_index_list">
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
</ul>
</div>
<div class="lbox_close wxapi_form">
<h3 id="menu-basic">基础接口</h3>
判断当前客户端是否支持指定JS接口
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
<h3 id="menu-share">分享接口</h3>
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
获取“分享给朋友”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
获取“分享到QQ”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
<h3 id="menu-image">图像接口</h3>
拍照或从手机相册中选图接口
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
预览图片接口
<button class="btn btn_primary" id="previewImage">previewImage</button>
上传图片接口
<button class="btn btn_primary" id="uploadImage">uploadImage</button>
下载图片接口
<button class="btn btn_primary" id="downloadImage">downloadImage</button>
<h3 id="menu-voice">音频接口</h3>
开始录音接口
<button class="btn btn_primary" id="startRecord">startRecord</button>
停止录音接口
<button class="btn btn_primary" id="stopRecord">stopRecord</button>
播放语音接口
<button class="btn btn_primary" id="playVoice">playVoice</button>
暂停播放接口
<button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
停止播放接口
<button class="btn btn_primary" id="stopVoice">stopVoice</button>
上传语音接口
<button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
下载语音接口
<button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
<h3 id="menu-smart">智能接口</h3>
识别音频并返回识别结果接口
<button class="btn btn_primary" id="translateVoice">translateVoice</button>
<h3 id="menu-device">设备信息接口</h3>
获取网络状态接口
<button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
<h3 id="menu-location">地理位置接口</h3>
使用微信内置地图查看位置接口
<button class="btn btn_primary" id="openLocation">openLocation</button>
获取地理位置接口
<button class="btn btn_primary" id="getLocation">getLocation</button>
<h3 id="menu-webview">界面操作接口</h3>
隐藏右上角菜单接口
<button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
显示右上角菜单接口
<button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
关闭当前网页窗口接口
<button class="btn btn_primary" id="closeWindow">closeWindow</button>
批量隐藏功能按钮接口
<button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
批量显示功能按钮接口
<button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
隐藏所有非基础按钮接口
<button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
显示所有功能按钮接口
<button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
<h3 id="menu-scan">微信扫一扫</h3>
调起微信扫一扫接口
<button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
<button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
<h3 id="menu-shopping">微信小店接口</h3>
跳转微信商品页接口
<button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
<h3 id="menu-card">微信卡券接口</h3>
批量添加卡券接口
<button class="btn btn_primary" id="addCard">addCard</button>
调起适用于门店的卡券列表并获取用户选择列表
<button class="btn btn_primary" id="chooseCard">chooseCard</button>
查看微信卡包中的卡券接口
<button class="btn btn_primary" id="openCard">openCard</button>
<h3 id="menu-pay">微信支付接口</h3>
发起一个微信支付请求
<button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
</div>
</div>
</body>
<script src="../../js/jquery.min.js"></script>
<!--步骤二：引入JS文件 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.ajax({
type: "post",
url :'http://39.106.161.34:3090/app/extraPerformance/weChat/get?url=www.baidu.com',
contentType: "application/json; charset=utf-8",
dataType: "json",
success : function(data){
alert('0847');
wx.config({
debug: true,
appId: 'wxa18184c1d389d2ec',
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'
]
});
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 2. 分享接口
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareAppMessage').onclick = function () {
wx.onMenuShareAppMessage({
title: '<a mcolored="true" href="http://www.it165.net/news/nhlw/" target="_blank" class="keylink">互联网</a>之子',
desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
link: 'www.xinlizhiyouni.com',
imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
alert('用户点击发送给朋友');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“发送给朋友”状态事件');
};
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareTimeline').onclick = function () {
wx.onMenuShareTimeline({
title: '<a mcolored="true" href="http://www.it165.net/news/nhlw/" target="_blank" class="keylink">互联网</a>之子',
link: 'www.xinlizhiyouni.com',
imgUrl: 'http://demo.open.weixin.<a mcolored="true" href="http://www.it165.net/qq/" target="_blank" class="keylink">qq</a>.com/jssdk/images/p2166127561.jpg',
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
alert('用户点击分享到朋友圈');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“分享到朋友圈”状态事件');
};
})
},
error:function(data){
alert("连接失败！");
}
});
//步骤三：通过config接口注入权限验证配置
</script>
<script>
//步骤四：通过ready接口处理成功验证
</script>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论