网站添加微信分享功能

来源:互联网 发布:mac pro使用攻略 编辑:程序博客网 时间:2024/05/17 22:47
/**微信扫二维码分享*///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() {            }        });
原创粉丝点击