cordova-share-js

简介

基于Cordova插件，提供社交平台分享功能方法的封装。

目前支持分享的平台有：

• 微信（支持好友和朋友圈），支持图片、链接和页面的分享。
• QQ（支持好友和QQ空间），支持图片、文字和页面的分享。
• 微博，支持图片、文字和页面的分享。

使用介绍

使用私有仓库安装

npm install cordova-share-js

将cordova-share-js引入到到所需的项目下： 在所需的JS文件中引入方法：

import CordovaShare from 'cordova-share-js';

然后，根据项目需要支持的分享平台，选择安装对应的插件，并且根据分享的类型将数据传给CordovaShare对应的方法。

分享插件

微信

安装依赖

在Cordova项目目录下，安装cordova-plugin-wechat，并且将YOUR_WECHAT_APPID替换成微信开放平台的应用ID。

cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID

使用示例

分享图片

const data = {
  title: '标题',
	description: '描述',
	image: 'base64',  // 支持base64和url图片
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'friend';   // friend:分享给朋友, article:分享到朋友圈
const type = 'image';

CordovaShare.wechat(data, target, type);

分享页面或链接

const data = {
  title: '标题',
	description: '描述',
	url: 'url',  // 页面的url
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'friend';   // friend:分享给朋友, article:分享到朋友圈
cosnt type = 'page'  // page:分享页面, link:分享链接 

CordovaShare.wechat(data, target, 'image');

QQ

安装依赖

在Cordova项目目录下，安装cordova-plugin-qqsdk，并且将YOUR_QQ_APPID替换成QQ开放平台的应用ID。

cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=YOUR_QQ_APPID

使用示例

分享图片

const data = {
  title: '标题',
	description: '描述',
	image: 'base64',  // 支持base64、url图片和图片的绝对路径
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'friend';   // friend:分享给朋友, article:分享到QQ空间
const type = 'image';

CordovaShare.qq(data, target, type);

分享页面

const data = {
  title: '标题',
	description: '描述',   // qq必填
	url: 'url': // 页面的url地址
	image: 'url',  // qq必填，只支持url图片
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'friend';   // friend:分享给朋友, article:分享到QQ空间
const type = 'page';

CordovaShare.qq(data, target, type);

分享文字

const data = {
	title: '分享的文字',
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'friend';   // friend:分享给朋友, article:分享到QQ空间
const type = 'text';

CordovaShare.qq(data, target, type);

微博

安装依赖

在Cordova项目目录下，安装cordova-plugin-weibosdk，并且将YOUR_WEIBO_APPID替换成微博开放平台的应用ID。

cordova plugin add cordova-plugin-weibosdk --variable WEIBO_APP_ID=YOUR_WEIBO_APPID

使用示例

分享图片

const data = {
  title: '标题',
	description: '描述',
	image: 'url',  // 支持url图片和图片和base64，注意base64图片如果太大会报错，建议使用url图片
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'article';   // 分享微博
const type = 'image';

CordovaShare.weibo(data, target, type);

分享页面

const data = {
  title: '标题',
	description: '描述',
	url: 'url',  // 页面的url
	image: 'url',  // 支持url图片和base64，注意base64图片如果太大会报错，建议使用url图片
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'article';   // 发布微博
const type = 'page';

CordovaShare.weibo(data, target, type);

分享文字

const data = {
	title: '分享的文字',
	success: (success) => {
		console.log(success);
	},
	error: (error) => {
		console.error(error);
	}
}
const target = 'article';   // 发布微博
const type = 'text';

CordovaShare.weibo(data, target, type);

分享组件

在Cordova项目目录下，安装分享组件依赖的截图插件cordova-screenshot。

cordova plugin add https://github.com/gitawego/cordova-screenshot.git

支持平台

目前分享组件可以支持截图并分享到微信、qq和微博：

平台	shareTypes
微信好友	wechat_friend
微信朋友圈	wechat_article
QQ好友	qq_friend
QQ空间	qq_article
微博	weibo
备注：微博无法直接分享大图片，需要先把图片上传到服务器上获取url，再做分享。

参数说明

参数	说明
title	分享标题字符串
description	分享描述字符串
quality	分享图片质量，默认100，可选0-100数字
shareTypes	分享平台类型数组
onClose	分享关闭回调函数，包含分享成功和取消分享的情况，如：{success: false, result: "User cancel the sharing"}
onError	分享过程中发生错误的回调函数

分享按钮组件：ShareButtons

在项目中引入ShareButtons组件

import { ShareButtons } from './components/cordova-share-js';

示例：

<ShareButtons
	title={title}
	description={description}
	quality={80}
	shareTypes={['wechat_friend', 'wechat_article', 'qq_friend', 'qq_article', 'weibo']}
	onClose={onClose}
	onError={onError}
/>

分享弹框组件：CordovaScreenshot

在项目中引入CordovaScreenshot组件

import { CordovaScreenshot } from './components/cordova-share-js';

示例：

<CordovaScreenshot
	title={title}
	description={description}
	quality={80}
	shareTypes={['wechat_friend', 'wechat_article', 'qq_friend', 'qq_article', 'weibo']}
	onClose={onClose}
	onError={onError}
/>