Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

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

0 votes
641 views
in Technique[技术] by (71.8m points)

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

<!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('已注册获取“分享到朋友圈”状态事件')

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

56.7k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...