vue项目中实现的微信分享功能示例
2019-01-29 12:43
791 查看
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考,具体如下:
/* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}, resource, shareData) let params = {url: window.location.href} $post('/vue/weixinjiekou', params).then(data => { // 分享标题等参数 const shareTitle = obj.title const shareDesc = obj.desc const shareLink = obj.userShare ? obj.link + data.flag : obj.link const shareImgUrl = obj.img const config = { title: shareTitle, // 分享标题 desc: shareDesc, // 分享描述 link: shareLink, // 分享链接 imgUrl: shareImgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function () {}, cancel: function () {} } wechat.config({ debug: false, appId: data.appid, // 和获取Ticke的必须一样------必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.noncestr, // 必填,生成签名的随机串 signature: data.signature, // 必填,签名,见附录1 // 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] }) // 处理验证失败的信息 wechat.error(function (res) { console.log('验证失败返回的信息:', res) }) // 处理验证成功的信息 wechat.ready(function () { // 分享给朋友 wechat.onMenuShareAppMessage(config) // 分享到朋友圈 wechat.onMenuShareTimeline(config) // 分享到qq wechat.onMenuShareQZone(config) // 分享到微博 wechat.onMenuShareWeibo(config) // 分享到qq空间 wechat.onMenuShareQZone(config) }) }) }
微信接口信息
{ "result": { "appid": "appid", "noncestr": "随机串", "signature": "签名", "timestamp": 时间戳, "flag": 6 }, "status": "y" }
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 基于thinkPHP实现的微信自定义分享功能示例
- vue实现微信分享朋友圈,发送朋友的示例讲解
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- vue-cli构建项目下使用微信分享功能
- VueJs单页应用实现微信网页授权及微信分享功能示例
- 在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能(可使用ShareSDK默认UI或自定义UI)
- JAVA WEB项目在微信浏览器下实现自定义分享源码示例
- cocos2d-x项目Android版和IOS版接入微信分享功能示例
- vue项目实现记住密码到cookie功能示例(附源码)
- vue实现微信分享功能
- vue项目实现记住密码功能
- IOS微信分享功能简单实现
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能。
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能
- 微信JS-SDK分享功能的.Net实现代码
- 微信小程序实现动态显示和隐藏某个控件功能示例
- 微信小程序实现分享功能
- 超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用
- andriod 实现新浪、QQ空间、微信朋友圈、微信好友分享功能
- iOS项目集成ShareSDK实现第三方登录、分享、关注等功能。