JS微信分享不好写?来封装一下
微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码。
代码冗余,即便是复制过来再改也很麻烦。
之前自己封装了一下js,今天来分享一下,希望能给看到的园友带来一点思路,当然希望能帮忙一起改进。
我的思路:
1.可以分享到四个地方QQ,朋友,朋友圈,微博,一般情况下他们是一致的,可以配置一个初始参数,赋值给它们四个
2.如果出现不一致,因为前面已经赋值了初始参数,这时再把需要不一致的内容替换掉
实现主要代码:
setData: function(){ var self = this; self.data = { title: self.title, desc: self.desc, link: self.link, imgUrl: self.imgUrl, type: self.type, // 分享类型,music、video或link,不填默认为link dataUrl: self.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空 success: self.success, cancel: self.cancel }; //深度克隆 self.QQData = JSON.stringify(self.data); self.QQData = JSON.parse(self.QQData); self.TimeLineData = JSON.stringify(self.data); self.TimeLineData = JSON.parse(self.TimeLineData); self.WeiBoData = JSON.stringify(self.data); self.WeiBoData = JSON.parse(self.WeiBoData);
//反序列化
self.QQData.success = self.success;
self.TimeLineData.success = self.success;
self.WeiBoData.success = self.success;
self.QQData.cancel = self.cancel;
self.TimeLineData.cancel = self.cancel;
self.WeiBoData.cancel = self.cancel;
}
wx.ready(function(){
wx.showOptionMenu();
if(self.data == '') self.setData();
wx.onMenuShareQQ(self.QQData);
wx.onMenuShareAppMessage(self.data);
wx.onMenuShareTimeline(self.TimeLineData);
wx.onMenuShareWeibo(self.WeiBoData);
});
使用帮助:
var wxshare = require('wxshare.js');
如果分享的内容都一致
wxshare.link = ''; wxshare.desc = ''; wxshare.imgUrl = ''; wxshare.type = ''; wxshare.dataUrl = ''; wxshare.start();
如果有不一致,针对不一致的地方进行修改
wxshare.link = ''; wxshare.title = ''; wxshare.desc = ''; wxshare.imgUrl = ''; wxshare.setData();//必须加上 wxshare.TimeLineData.title = ''; wxshare.QQData.desc = ''; wxshare.start();
重点说明: setData()
如果全部的分享内容都一样,直接执行start(), 判断data参数空为true,会执行setData(),
为四个分享赋值:QQData data TimeLineData WeiboData, 而后初始化
如果有不一致,首次赋值后,直接调用setData(),为四个参数赋值,之后再根据需求修改不同的对应参数,最后start()初始化。
--------------------------------------------------------------------------------------------------------------------------------------------
具体代码 github 地址: >>>>>>>>>>戳我、戳我、戳我、戳我、戳我<<<<<<<<<<<<
相关文章
- Node.js系列-http
- JS框架_(JQuery.js)点赞按钮动画
- 方便快捷组织页面 DOM 的 js 引模板擎 —— doT.js 的使用
- Node.js模块封装及使用
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- Nest js 使用axios模块
- js原生触发事件
- 数据展现-百度js绘图
- 华为OD机试 - 幻方修复(Java & JS & Python)
- three.js(JS 三维模型库)介绍和入门
- 声纹可视化工具:wavesurfer.js---在Vue中使用音频声纹可视化插件wavesurfer.js【已封装成组件有完整demo实例附完整代码】
- node.js JS对象和JSON字符串之间的转换
- JS:crypto-js模块实现数据加密解密
- 如何在Vue组件中调用封装好的外部js文件方法
- js工具类的封装
- 利用d3.js绘制中国地图
- 使用Jasmine和karma对传统js进行单元测试
- JS中Math.random()方法的使用总结
- js比较两个时间的大小demo效果(整理)