• 微信公众号h5页面自定义分享


    <!DOCTYPE html>
    <html>
    
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
        </head>
        transparent
    
        <body>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                //            配置公总号自定义分享
                //            需要引入jauery
                $.ajax({
                    method: 'GET',
                    url: window.BASE_URL + 'api/v1/sharding/get',
                    contentType: 'application/x-www-form-urlencoded',
                    async: false,
                    dataType: "json",
                    data: {
                        url: location.href.split('#')[0],
                    },
                    success: function(data) {
                        console.log(data.data)
                        var signatures = data.data
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                            appId: signatures.appid, // 必填,公众号的唯一标识
                            timestamp: ((signatures.timeStamp).toString()).substring(0, 10), // 必填,生成签名的时间戳<?= $data['timestamp']?>
                            nonceStr: signatures.nonce_str, // 必填,生成签名的随机串<?= $data['noncestr']?>
                            signature: (signatures.signature).toLowerCase(), // 必填,签名<?= $data['signature']?>
                            jsApiList: ['openLocation', 'getLocation', 'translateVoice',
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                'onMenuShareQQ',
                                'onMenuShareWeibo',
                                'onMenuShareTimeline',
                                'onMenuShareQZone'
                            ] // 这里先声明我们要用到打开地图的JS接口
                        });
                    }
                });
    
                wx.ready(function() {
                    wx.checkJsApi({
                        jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                        success: function(res) {
                            // 以键值对的形式返回,可用的api值true,不可用为false
                            // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        }
                    });
                    var shareUrl = 'https://www.gzkny.com/h5/ziyemian/souquan.html?openid=' + openid;
                    var obj = { //朋友圈
                        title: '康尼雅口腔医院', // 分享标题
                        desc: '', // 分享描述
                        link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        // 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,
                        // 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;
                        imgUrl: 'https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg',
                        fail: function(res) {
                            alert(JSON.stringify(res));
                        }
                    };
                    var obj1 = { //好友
                        title: '康尼雅口腔医院', // 分享标题
                        desc: '', // 分享描述
                        link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        // 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,
                        // 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;
                        imgUrl: 'https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg', // 分享图标
                        fail: function(res) {
                            alert(JSON.stringify(res));
                        }
                    };
                    // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareAppMessage(obj1);
    
                    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareTimeline(obj);
    
                    // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareQQ(obj);
    
                    // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareWeibo(obj);
    
                    // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
                    wx.onMenuShareQZone(obj);
                    // 7.2 获取当前地理位置
                    wx.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                        success: function(res) {
                            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                            var speed = res.speed; // 速度,以米/每秒计
                            var accuracy = res.accuracy; // 位置精度
                            var result = []
                            result.push(longitude)
                            result.push(latitude)
                            result = JSON.stringify(result);
                            localStorage.setItem("result", result);
                            longg()
                        }
                    });
                });
            </script>
        </body>
    
    </html>    
  • 相关阅读:
    DoNet:浅淡对delegate的理解
    纹理学习总结
    Vue引发的getter和setter
    JS——判断一个对象是否为空
    使用vue-axios请求geoJson数据报错的问题
    在vue-cli项目中使用echarts
    Vue中的$set的使用
    史上最全的开发和设计资源大全(转--------来源:伯乐在线)
    IOS safari浏览器登陆时Cookie无法保存的问题
    JS中const、var 和let的区别
  • 原文地址:https://www.cnblogs.com/lipengze/p/11429406.html
Copyright © 2020-2023  润新知