如何在微信端html5页面调用分享接口

求助... 求助展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

厦门言成
2018-07-19 · TA获得超过4947个赞

知道小有建树答主

回答量：121

采纳率：97%

帮助的人：134万

我也去答题访问个人页

关注

展开全部

1. 服务器配置

配置JS接口安全域名

2. 后端SDK下载

源代码下载：https://pic.developgeek.com/o_1ci72pdo81i8fiqf12q0jgt1j8l9.zip

3. 前端调用前端SDK与后端SDK

前端页面调用后端SDK

<?php
    require_once "../../global/jssdk.php";
    $jssdk = new JSSDK("填写微信的APPID", "填写微信的密钥");
    $signPackage = $jssdk->GetSignPackage();
?>

前端页面引入前端SDK

<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

Tips：前端页面文件类型为php，这样有利于调用后端SDK。

调用分享接口

<?php
    require_once "../../global/jssdk.php";
    $jssdk = new JSSDK("填写微信的APPID", "填写微信的密钥");
    $signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>言成科技 & HTML5 学堂(码匠)联合出品</title>
</head>
<body>
    <div class="wrap">言成科技</div>
    <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        /**
         * [微信分享]
         * @param  {[type]} obj [description]
         * @return {[type]}     [description]
         */
        function share(obj) {
            var mainTitle   = obj.tit,
                mainDesc    = obj.des,
                mainURL     = obj.url,
                mainImgUrl  = obj.icon;

                wx.config({
                    debug: false,
                    appId: '<?php echo $signPackage["appId"];?>',
                    timestamp: <?php echo $signPackage["timestamp"];?>,
                    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
                    signature: '<?php echo $signPackage["signature"];?>',
                    jsApiList: [
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage'
                    ]
                });
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                        title: mainTitle,
                        link: mainURL,
                        imgUrl: mainImgUrl,
                        success: function () {
                        },
                        cancel: function () {
                        }
                    });

                    wx.onMenuShareAppMessage({
                        title: mainTitle,
                        desc: mainDesc,
                        link: mainURL,
                        imgUrl: mainImgUrl,
                        type: 'link',
                        dataUrl: '',
                        success: function () {
                        },
                        cancel: function () {
                        }
                });
            });
        };
        share({
            tit: '《言成科技，高品质教育》',
            des: '提供高品质教育服务，让每个人遇见更好的自己',
            url: 'https://www.developgeek.com/index.php',
            icon: 'https://www.developgeek.com/logo.png',
        });
    </script>
</body>
</html>

    $jssdk = new JSSDK("填写微信的APPID", "填写微信的密钥");
    $signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>言成科技 & HTML5 学堂(码匠)联合出品</title>
</head>
<body>
    <div class="wrap">言成科技</div>
    <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        /**
         * [微信分享]
         * @param  {[type]} obj [description]
         * @return {[type]}     [description]
         */
        function share(obj) {
            var mainTitle   = obj.tit,
                mainDesc    = obj.des,
                mainURL     = obj.url,
                mainImgUrl  = obj.icon;

                wx.config({
                    debug: false,
                    appId: '<?php echo $signPackage["appId"];?>',
                    timestamp: <?php echo $signPackage["timestamp"];?>,
                    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
                    signature: '<?php echo $signPackage["signature"];?>',
                    jsApiList: [
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage'
                    ]
                });
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                        title: mainTitle,
                        link: mainURL,
                        imgUrl: mainImgUrl,
                        success: function () {
                        },
                        cancel: function () {
                        }
                    });

                    wx.onMenuShareAppMessage({
                        title: mainTitle,
                        desc: mainDesc,
                        link: mainURL,
                        imgUrl: mainImgUrl,
                        type: 'link',
                        dataUrl: '',
                        success: function () {
                        },
                        cancel: function () {
                        }
                });
            });
        };
        share({
            tit: '《言成科技，高品质教育》',
            des: '提供高品质教育服务，让每个人遇见更好的自己',
            url: 'https://www.developgeek.com/index.php',
            icon: 'https://www.developgeek.com/logo.png',
        });
    </script>
</body>
</html>

4. 分享效果

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何在微信端html5页面调用分享接口

其他类似问题

为你推荐：