网站添加微信分享功能

/*
*微信扫二维码分享
*/

//1、分享按钮 html
    <div title="分享" ng-click="shareChartBook(chartbook)">
        <i  class="icon-share icon-info-propriety">
        </i>
    </div>

//2、检查图册是否冻结 js
    $scope.shareChartBook = function(chartBook) {
                if (chartBook.isFrozen) {
                    toaster.pop('warning', '', '图册已冻结,无法分享');
                    return;
                }
                shareManager.shareChartBook(chartBook);
    }

//3、选择分享方式(公开、私密)需要与数据库交互 js
    //假设公开分享

//4、选择微信分享显示二维码(二维码的内容是个链接) html
    <a class="btn-share btn-share-weixin" title="分享到微信" ng-click="$('#qrcodeDiv').fadeIn('fast');"></a>    

    <div id="qrcodeDiv" style="">
        <button type="button" class="close" ng-click="hideQRCode()" aria-hidden="true">&times;</button>
        <label style="font-weight: bold">分享到微信</label>
        <div style="padding: 15px 29px">
            <qrcode version="4" error-correction-level="L" size="180" data="{{Link}}"></qrcode>
        </div>
        <label>使用微信扫描上面的二维码,即可分享到微信朋友圈</label>
    </div>

//5、分享页面添加微信开发平台JS-SDK
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="src/js/weixin-jssdk.js"></script>   //自己将JS-SDK封装成函数,所以需要引入

    //5.1 封装的weixin-jssdk.js    (微信开发平台 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)
        /** 
         *
         * 需要引用下面的js来使用
         * <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
         */
        angular.module("weixin-jssdk", [])
            .factory("WeixinSDK", ["$http", function($http) {
                var ret = {};
                ret.config = function(url) {
                    $http.get(charts_server + "/service/weixin/sign", {params: {url: url.split("#")[0]}}).success(function (response) {
                        if (response.object) {
                            var config = response.object;
                            wx.config({
                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                                appId: config.appId, // 必填,公众号的唯一标识
                                timestamp: config.timestamp, // 必填,生成签名的时间戳
                                nonceStr: config.nonceStr, // 必填,生成签名的随机串
                                signature: config.signature,// 必填,签名
                                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
                            });
                        }
                    });
                    return ret;
                };
                ret.ready = function(onMenuShareTimeline, onMenuShareAppMessage) {
                    wx.ready(function () {
                        wx.onMenuShareTimeline(onMenuShareTimeline || {});
                        /***********************样例*********************
                        {
                            title: '哈哈哈哈哈哈?', // 分享标题
                            link: location.href, // 分享链接
                            imgUrl: local_server + '/article/first.jpg', // 分享图标
                            success: function() {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function() {
                                // 用户取消分享后执行的回调函数
                            }
                        }
                        *************************************************/

                        wx.onMenuShareAppMessage(onMenuShareAppMessage || {});
                        /*********************样例*************************
                        {
                            title: '哈哈哈哈哈哈?', // 分享标题
                            desc: '哈哈哈哈哈哈?', // 分享描述
                            link: location.href, // 分享链接
                            imgUrl: local_server + '/article/first.jpg', // 分享图标
                            type: '', // 分享类型,music、video或link,不填默认为link
                            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                            success: function() {
                            // 用户确认分享后执行的回调函数
                            },
                            cancel: function() {
                                // 用户取消分享后执行的回调函数
                            }
                        }
                        **************************************************/
                    });
                    return ret;
                };
                ret.error = function(callback) {
                    wx.error(function (res) {
                        callback(res);
                    });
                    return ret;
                };
                return ret;
            }]);
    //5.2 module添加weixin-jssdk模块
        var playChartBook = angular.module('playChartBook',
            [
                'aaa',
                'bbb',
                'weixin-jssdk'
            ]); 

    //5.3 controller添加WeixinSDK方法 js
        playChartBook.controller('playChartBook', ['$scope','$rootScope', '$q', '$http', '$localStorage', '$modal','WeixinSDK',
        function ($scope, $rootScope, $q, $http, $localStorage, $modal, WeixinSDK) {

        }

//6、调用方法,添加微信分享到朋友圈和好友时的图片、摘要和标题
    //微信分享标题、摘要和图片
    var weixinName = obj.resource.name;
    var weixinDesc = (obj.resource.desc == "" || !obj.resource.desc) ? "这是标题" : obj.resource.desc;
    var weixinImage = (obj.resource.iconStore.substring(0,4) == "http") ? obj.resource.iconStore : charts_server + '/service/image?path=' + obj.resource.iconStore;

    WeixinSDK.config(location.href)
        .ready({
            title: weixinName, // 分享标题
            link: location.href.split('#')[0], // 分享链接
            imgUrl: weixinImage, // 分享图标
            success: function() {
            },
            cancel: function() {
            }
        }, {
            title: weixinName, // 分享标题
            desc: weixinDesc, // 分享描述
            link: location.href.split('#')[0], // 分享链接
            imgUrl: weixinImage, // 分享图标
            type: '', // 分享类型,music、video或link,不填默认为link
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
            success: function() {
            },
            cancel: function() {
            }
        });

猜你喜欢

转载自blog.csdn.net/taotao12312/article/details/76999452
今日推荐