lizhen
/
gganli


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>授权与分享演示</title>
        <!-- Bootstrap Core CSS -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="__CDN__/assets/css/index.css" rel="stylesheet">
        <!-- Plugin CSS -->
        <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="https://cdn.staticfile.org/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body id="page-top">

        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
                        <span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">授权与分享演示</a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse-menu">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="{:url('/')}" target="_blank">{:__('Home')}</a></li>
                        <li><a href="{:url('index/user/index')}" target="_blank">{:__('会员中心')}</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <header>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="header-content">
                            <div class="header-content-inner">
                                当你看见这个页面则表示当前以及授权登录成功
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- jQuery -->
        <script src=https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <!-- 微信JSSDK授权 -->
        <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>
        <script>
            window.onload = function () {
                if (isWeixin()) {
                    var wxConfig;
                    var currentUrl = window.location.href.split('#')[0];//这里需要注意最好是通过后端渲染，避免出现失败
                    $.ajax({
                        data: {'url': encodeURIComponent(currentUrl)}, //encodeURIComponent解决2次分享签名失败的问题，后端要urldecode
                        type: "POST",
                        dataType   : "json",
                        url: "weixin/index/config",
                        success: function (json) {
                            if (json.code == 1) {
                                wxConfig = json.data;
                                //通过config接口注入权限验证配置，所需资料在后台通过签名算法获取
                                wx.config({
                                    debug: wxConfig.debug,
                                    appId: wxConfig.appId,
                                    timestamp: wxConfig.timestamp,
                                    nonceStr: wxConfig.nonceStr,
                                    signature: wxConfig.signature,
                                    jsApiList: wxConfig.jsApiList
                                });
                                wechatShare.options.isSignature = true;
                                callback && callback(opts, wx);
                            }
                        }
                    });

                    // 成功
                    wx.ready(function(){
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                        //分享给朋友
                        wx.onMenuShareAppMessage({
                            title: wxConfig.share_title,            // 分享标题
                            desc: wxConfig.share_synopsis,          // 分享描述
                            link: currentUrl,                       // 分享链接
                            imgUrl: 'http://{$_SERVER["HTTP_HOST"]}/' + wxConfig.share_img,   // 分享图标
                            type: '',                               // 分享类型,music、video或link，不填默认为link
                            dataUrl: '',                            // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });

                        //分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: wxConfig.share_title,            // 分享标题
                            link: currentUrl,                       // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: 'http://{$_SERVER["HTTP_HOST"]}/' + wxConfig.share_img,   // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                    });

                    // 失败
                    wx.error(function(res){
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        alert(JSON.stringify(res));
                    });
                }
            };
            //判断是否在微信中打开
            function isWeixin() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }
        </script>
    </body>

</html>