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

 这篇文章主要介绍了微信分享通用组件,用于微信浏览器内浏览网页的分享信息定义,需要的朋友可以参考下

一、可定义的信息
 
1、分享时显示的LOGO;
2、分享LOGO的宽度;
3、分享LOGO的高度;
4、分享出去显示的标题(默认调用网页标题);
5、分享出去显示的描述(默认调用网页标题);
6、分享链接(默认为当前页面的URL)。
7、分享微信的APPID(一般为空)。
 
二、使用方法
 
1、引入微信分享组件js:
代码如下:
/*******************************
 * Author:Mr.Think
 * Description:微信分享通用代码
 * 使用方法:_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');
 *******************************/
function _WXShare(img,width,height,title,desc,url,appid){
    //初始化参数
    img=img||'ico-share.png';
    width=width||100;
    height=height||100;
    title=title||document.title;
    desc=desc||document.title;
    url=url||document.location.href;
    appid=appid||'';
    //微信内置方法
    function _ShareFriend() {
        WeixinJSBridge.invoke('sendAppMessage',{
              'appid': appid,
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res){
                _report('send_msg', res.err_msg);
          })
    }
    function _ShareTL() {
        WeixinJSBridge.invoke('shareTimeline',{
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res) {
              _report('timeline', res.err_msg);
              });
    }
    function _ShareWB() {
        WeixinJSBridge.invoke('shareWeibo',{
              'content': desc,
              'url': url,
              }, function(res) {
              _report('weibo', res.err_msg);
              });
    }
    // 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                _ShareFriend();
          });
 
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                _ShareTL();
                });
 
            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                _ShareWB();
           });
    }, false);
}
 

时间: 2024-10-26 05:11:29

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,今天来分享一下,希望能给看到的园友带来一点思路,当然希望能帮忙一起改进. 我的思路: 1.可以分享到四个地方QQ,朋友,朋友圈,微博,一般情况下他们是一致的,可以配置一个初始参数,赋值给它们四个 2.如果出现不一致,因为前面已经赋值了初始参数,这时再把需要不一致的内容替换掉 实现主要代码: setData: funct

require.js+vue开发微信上传图片组件_javascript技巧

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou

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

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

DockOne微信分享(一四零):Serverless云函数架构精解

本文讲的是DockOne微信分享(一四零):Serverless云函数架构精解[编者的话]继虚拟机,容器技术之后,无服务器化成为新的行业热点,无服务器云函数可以让用户无需关心服务器的部署运营,只需开发最核心的业务逻辑,即可实现上线运营,具备分布容灾能力,可依据负载自动扩缩容,按照实际调用次数与时长计费.本次主要分享腾讯云无服务器云函数在技术实现上的挑战及架构实现原理. [烧脑式Kubernetes实战训练营]本次培训理论结合实践,主要包括:Kubernetes架构和资源调度原理.Kubernet

DockOne微信分享(一三九):基于Kubernetes的应用编排实践

本文讲的是DockOne微信分享(一三九):基于Kubernetes的应用编排实践[编者的话]近年容器的使用越来越深入,越来越多的服务采用容器的方式进行部署.但随着服务数量的增加,如何管理服务之间的依赖关系,如何对多个服务之间的更新与部署进行管理,如何在新的环境中实现多个服务的快速部署.这些问题都希望通过基于Kubernetes应用编排管理来解决,从而实现对于复杂多服务系统的快速部署和高效管理. [烧脑式Kubernetes实战训练营]本次培训理论结合实践,主要包括:Kubernetes架构和资

社会化分享功能百度分享代码示例

手机端APP: 社会化分享组件 ShareSDK你值得拥有 友盟社会化分享组件 ShareSDK for Android开发文档 http://wiki.mob.com/Android_%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E6%8C%87%E5%8D%97/   网页版 JiaThis bShare 百度分享 百度分享代码示例: 图标式 <body> <div class="bdsharebuttonbox"> <a