网站添加微信分享功能
来源:互联网 发布: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">×</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() { } });
阅读全文
0 0
- 网站添加微信分享功能
- 网站添加微信登录功能
- 微信分享功能
- 微信分享功能
- 微信分享功能
- 微信分享功能
- 微信分享功能
- web网页,移动端h5页面添加微信分享,qq分享等功能
- 测试微信分享功能
- 测试微信分享功能
- 微信分享功能详解
- 微信分享功能详解
- 微信分享功能详解
- android微信分享功能
- android 微信分享功能
- 微信自定义分享功能
- 微信 页面分享功能
- 微信自定义分享功能
- MyEclipse10 启动不了报An error has occurred.See the log file
- phpstudy配置
- HDU 2457-DNA repair(AC自动机+DP)
- BZOJ3165 Heoi2013 Segment
- 一步步优化JVM一:概述、方法及需求
- 网站添加微信分享功能
- 谷歌大脑科学家 Caffe缔造者 贾扬清 微信讲座
- UI11-事件传递
- listview复用之选中事件混乱+scrollview嵌套listview不显示
- unity模型任意无限切割插件
- 网络编程socket基本API
- 【Idea】——配置部署非Maven项目
- 最小覆盖_KEY
- 模拟的nginx 配置为域名的的方式直接访问项目