手机端页面分享到微信,按照官方文档写的,一直无法弹出分享的菜单栏

<!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>
阅读 271
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒

    微信开放生态 相关的技术问题交流平台