Giter Club home page Giter Club logo

m-share's Introduction

h5页面分享组件、支持分享到微信、朋友圈、新浪微博、QQ空间、QQ好友。

点击查看demo

下图为:1. 分享拉窗 2. 右上角提示(微信或手q客户端) 3. 弹层提示(其他浏览器)

执行逻辑

- 微信客户端 手q qq浏览器 uc浏览器 其他浏览器
分享到微信 提示点击右上角分享 提示点击右上角分享 native分享 native分享 弹层提示
分享到朋友圈 提示点击右上角分享 提示点击右上角分享 native分享 native分享 弹层提示
分享到qq 提示点击右上角分享 提示点击右上角分享 native分享 - 弹层提示
分享到qq空间 提示点击右上角分享 提示点击右上角分享 native分享 web分享 web分享
分享到新浪微博 web分享 web分享 web分享 web分享 web分享

安装

有两种安装方式

  1. npm安装

     npm install m-share
    
  2. script引入

     <script src="m-share.js"></script>
    

快速开始

<div class="m-share"></div>
<script>
	const config = {...}; // config配置参考下面“基本使用-配置项”
	Mshare.init(config);
</script>

配置项

const config = {
  link:  'http://www.qq.com', // 网址,默认使用window.location.href
  title: '标题',  // 标题,默认读取document.title 
  desc:  '分享描述', // 描述, 默认读取<meta name="description" content="desc" />
  imgUrl: 'http://backtonature.github.io/project/m-share/demo1.png' // 图片, 默认取网页中第一个img标签
  types: ['wx', 'wxline', 'qq', 'qzone', 'sina'], // 启用的社交分享,默认为全部启用
  infoMap: { // 针对不同平台设定不同分享内容
    wx: {
      link: '分享到微信的链接', // 覆盖分享到微信的链接
      title: '分享到微信的标题', // 覆盖分享到微信的标题
      desc: '分享到微信的描述', // 覆盖分享到微信的标题
      imgUrl: '分享到微信的图片链接' // 覆盖分享到微信的图片链接
    }
  },
  fnDoShare(type) {
    // 执行分享的回调,type为'wx', 'wxline', 'qq', 'qzone', 'sina'
  }
};

注意:

  1. 所有的配置参数都不是必填项
  2. 其他浏览器并没有开放native分享的api,所以对分享到微信朋友圈QQ好友设置的infoMap参数,在其他浏览器手机qq客户端下不会生效.

方法

init(config) - demo

初始化化页面所有class为m-share的元素。

popup(config) - demo

弹出分享弹窗

wxConfig(config)

若当前页面为公众号页面,具备访问微信api的能力,可通过此方法配置微信分享。

Mshare.wxConfig({
  title: '',
  link: '',
  desc: '',
  imgUrl: '',
  wx: {
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '' // 必填,签名
  },
  infoMap: ...
});

render(el, config) - demo

对指定元素渲染分享icon,el为指定元素或者指定元素的选择器String。

<div id="myDom"></div>
<script>
  Mshare.render('#myDom', config);
  // or Mshare.render(document.querySelector('#myDom', config));
</script>

to(type, config) - demo

js直接调用分享

<button id="qq"></button>
<script>
  document.querySelector('#qq').addEventListener('click', () => {
    Mshare.to('qq', config);
  });
</script>

m-share's People

Contributors

backtonature avatar codingjia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

m-share's Issues

关于微信分享的问题

您好,我想请教一下,在vue项目里面,如果要使用微信分享,Mshare.to('wx', config); 也是使用这个吗?那个微信的配置wxConfig(config)要在哪里执行或使用呢?

配置的config不起作用

从UC浏览器打开,点击分享,选择微信分享,config已经都进行了配置,但是无法获取config的数据,还是使用的默认config数据
还有就是,config中的desc无论在哪个分享中都没有起作用,就算配置了meta标签,分享出来得desc也是空的

PC端QQ分享失败

请问下,是什么原因导致的分享失败呢?send_share接口返回的msg:"NEED_VERIFICATION [errcode:100222:0]",输入验证码后是"[errcode:100001:0]"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.