投稿
问答

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

作者：admin 2021-06-27 我要评论

!DOCTYPE htmlhtmlhead meta charset="utf-8" title微信JS-SDK Demo/title meta name="viewport" content="width=device-width, initial-scale=1, user-scalable...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)
<!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="/uploads/allimg/210627/15434924G-1.jpg"></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: 'https://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>

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • 手机端页面分享到微信，按照官方文档写

    手机端页面分享到微信，按照官方文档写

  • vue 传值问题

    vue 传值问题

  • SpringBoot redis操作极慢

    SpringBoot redis操作极慢

  • 如何将Babel编译后产生import去掉，直

    如何将Babel编译后产生import去掉，直

腾讯云代理商
精彩导读
/uploads/allimg/210505/1201302930-0-lp.jpg

wepy2.0 真的坑，连报错都没有就不热更

/uploads/allimg/210422/1501046347-0-lp.jpg

Java GUI GridBagLayout布局生成的组件

/images/defaultpic.gif

Electron 客户端怎么实现静默更新。

/images/defaultpic.gif

mysql表字段json类型对json数组过滤该

/uploads/allimg/210608/0Z1431438-0-lp.jpg

MySQL字段排序，数据混乱。

/images/defaultpic.gif

如何将第三方服务器的图片地址转换为文

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云