JS微信分享不好写?来封装一下

微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码。

代码冗余,即便是复制过来再改也很麻烦。

之前自己封装了一下js,今天来分享一下,希望能给看到的园友带来一点思路,当然希望能帮忙一起改进。

我的思路:

1.可以分享到四个地方QQ,朋友,朋友圈,微博,一般情况下他们是一致的,可以配置一个初始参数,赋值给它们四个

2.如果出现不一致,因为前面已经赋值了初始参数,这时再把需要不一致的内容替换掉

实现主要代码:


  1. setData: function(){ 
  2.         var self = this; 
  3.         self.data = { 
  4.             title: self.title, 
  5.             desc: self.desc, 
  6.             link: self.link, 
  7.             imgUrl: self.imgUrl, 
  8.             type: self.type, // 分享类型,music、video或link,不填默认为link 
  9.             dataUrl: self.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空 
  10.             success: self.success, 
  11.             cancel: self.cancel 
  12.         }; 
  13.         //深度克隆 
  14.         self.QQData = JSON.stringify(self.data); 
  15.         self.QQData = JSON.parse(self.QQData); 
  16.         self.TimeLineData = JSON.stringify(self.data); 
  17.         self.TimeLineData = JSON.parse(self.TimeLineData);   
  18.         self.WeiBoData = JSON.stringify(self.data); 
  19.         self.WeiBoData = JSON.parse(self.WeiBoData);    
  20.  
  21.   //反序列化 
  22.           self.QQData.success = self.success; 
  23.            self.TimeLineData.success = self.success; 
  24.           self.WeiBoData.success = self.success; 
  25.           self.QQData.cancel = self.cancel; 
  26.           self.TimeLineData.cancel = self.cancel; 
  27.           self.WeiBoData.cancel = self.cancel; 
  28.     } 
  29.  
  30.  
  31. wx.ready(function(){ 
  32.                 wx.showOptionMenu(); 
  33.                 if(self.data == '') self.setData(); 
  34.                 wx.onMenuShareQQ(self.QQData); 
  35.                 wx.onMenuShareAppMessage(self.data); 
  36.                 wx.onMenuShareTimeline(self.TimeLineData); 
  37.                 wx.onMenuShareWeibo(self.WeiBoData); 
  38.             }); 

使用帮助:

var wxshare = require('wxshare.js');

如果分享的内容都一致

wxshare.link = ''; wxshare.desc = ''; wxshare.imgUrl = ''; wxshare.type = ''; wxshare.dataUrl = ''; wxshare.start();

如果有不一致,针对不一致的地方进行修改


  1. wxshare.link = ''; 
  2. wxshare.title = ''; 
  3. wxshare.desc = ''; 
  4. wxshare.imgUrl = ''; 
  5. wxshare.setData();//必须加上 
  6. wxshare.TimeLineData.title = '';  
  7. wxshare.QQData.desc = ''; 
  8. wxshare.start(); 

重点说明: setData()

如果全部的分享内容都一样,直接执行start(), 判断data参数空为true,会执行setData(),
为四个分享赋值:QQData data TimeLineData WeiboData, 而后初始化

如果有不一致,首次赋值后,直接调用setData(),为四个参数赋值,之后再根据需求修改不同的对应参数,最后start()初始化。

作者:一文不提

来源:51CTO

时间: 2024-10-18 10:58:21

JS微信分享不好写?来封装一下的相关文章

js微信分享API_javascript技巧

本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.

js实现微信分享代码_javascript技巧

通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.

DockOne微信分享(六十九):微服务选型之Modern Node.js

本文讲的是DockOne微信分享(六十九):微服务选型之Modern Node.js[编者的话]目前Node.js的发展非常快,大家可能还停留在:Node.js性能很好,Node.js里都是回调,写起来很恶心,Node.js只能做前端工具,Node.js是单线程部署会有问题,以及这样的八卦<uber用go替代Node.js重写了地理位置服务>... 可是真相呢? 在微服务盛行的今天,为什么我们要选用Node.js去构建微服务呢?本次分享将试图从以下2个方面给出答案: 被误解的Node.js:除

微信分享JS接口失效说明及解决方案

关键字:微信分享 JS 失效  分享到朋友圈    微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的JS接口一直用于内部业务,并未对外开放,在微信公开的开放文档里面并没有此接口. 某些第三方借助微信客户端漏洞在未获得权限的情况下使用接口,微信6.0.2版本对此漏洞做了修复以确保用户分享内容的准确性,避免诱导分享. 另外,不久将向广大公众号开放正式分享接口供开发者使用. 临时解决方案: 标题:

js实现通用的微信分享组件示例

 这篇文章主要介绍了微信分享通用组件,用于微信浏览器内浏览网页的分享信息定义,需要的朋友可以参考下 一.可定义的信息   1.分享时显示的LOGO: 2.分享LOGO的宽度: 3.分享LOGO的高度: 4.分享出去显示的标题(默认调用网页标题): 5.分享出去显示的描述(默认调用网页标题): 6.分享链接(默认为当前页面的URL). 7.分享微信的APPID(一般为空).   二.使用方法   1.引入微信分享组件js: 代码如下: /******************************

DockOne微信分享(六十四):基于Docker实现DevOps的一些探索

本文讲的是DockOne微信分享(六十四):基于Docker实现DevOps的一些探索[编者的话]本次分享从DevOps介绍:Docker介绍:基于Docker实现DevOps的优势:Docker化DevOps流水线实例分享等四方面展开. DevOps介绍 DevOps(Deveplopment和Operations的简称),中译为开发运维一体化,可定义为是一种过程.方法.文化.运动或实践,主要是为了通过一条高度自动化的流水线来加强开发和其他IT职能部门之间的沟通和协作,加速软件和服务的交付.

DockOne微信分享(九十六):爱油科技基于SpringCloud的微服务实践

本文讲的是DockOne微信分享(九十六):爱油科技基于SpringCloud的微服务实践[编者的话]本次分享主要介绍了爱油科技基于Docker和Spring Cloud将整体业务微服务化的一些实践经验,主要包括: 微服务架构的分层和框架选型 服务发现和配置管理 服务集成和服务质量保证 基于领域驱动设计 实施DevOps 从单体应用到微服务 单体应用 对于单体应用来说,优点很多,例如: 小而美,结构简单易于开发实现 部署门槛低,单个Jar包或者网站打包即可部署 可快速实现多实例部署 然而随着业务

DockOne微信分享(一一一):LAIN 平台远程进入容器功能设计与实现

本文讲的是DockOne微信分享(一一一):LAIN 平台远程进入容器功能设计与实现[编者的话]本次分享主要介绍在宜信大数据创新中心的开源 PaaS 平台LAIN中,基于 WebSocket 和 Docker Remote API 远程进入单进程容器功能的设计与实现. [上海站|3天烧脑式微服务架构训练营]培训内容包括:DevOps.微服务.Spring Cloud.Eureka.Ribbon.Feign.Hystrix.Zuul.Spring Cloud Config.Spring Cloud

DockOne微信分享(一四二):容器云在万达的落地经验

本文讲的是DockOne微信分享(一四二):容器云在万达的落地经验[编者的话]容器生态是现在非常火热的技术生态之一,个人认为它主要囊括着四个方面的技术栈:一是容器核心技术栈(包括 Docker.rkt 及第三方公司自主研发的容器 Engine 等):二是容器基础技术栈(包括容器网络.存储.安全及服务发现等):三是容器编排技术栈(包括 Mesos/Marathon.Swarm.Kubernetes 及 OpenShift 等):四是容器应用技术栈(主要包括 CI/CD.监控.日志及微服务框架等).