前言
- app分享分两种模式，一种是调用系统分享功能如下图1，另一种是针对各个平台定制分享功能，如下图2是针对微信的定制分享效果
图1：app调用系统分享功能
图1：app定制微信分享功能 - 调用系统分享功能很简单，用一个插件就够了，能够分享到用户手机上已安装应用；定制分享功能比较复杂，需要多个插件，如定制微信分享需要在微信开放平台申请并等待审核，你可能还需要定制QQ和新浪微博分享，定制过程和微信类似，各个插件需要单独调试
- 定制分享优点是可以知道分享来源，能够监听到分享目标是否安装、分享成功或失败事件
- 大厂的分享功能一般是两种兼用，先定制，点击更多调用系统分享，如下图
- 本文将演示调用系统分享功能和定制微信分享功能
调用系统分享功能
- 需要安装cordova-plugin-x-socialsharing插件，点这里查看并安装插件
- 目前安装这个插件后，build会找不到
ANDROID_SUPPORT_V4_VERSION参数，如下图
- 修改插件的
plugin.xml把参数值写死，如下图，然后重新build
重新build
cordova platform rm android & cordova platform add android & cordova build android
- 在NativeService.ts添加了分享公共方法，并简化了分享功能
- 调用分享
- 分享图文或dom，原理就是把一段html片段转成base64字符串图片，然后分享。需要使用html2canvas
cnpm i html2canvas。效果演示如下图，源码点这里
定制微信分享
- 登录微信开放平台，没有帐号则注册
- 如下图在管理中心创建移动应用并填一堆资料等待审核，我的2个工作日审核通过
- 审核通过可会看到已获得分享权限，如下图，像微信支付和微信登录需要单独申请开通权限，接下来介绍的微信分享插件，同时也提供了微信支付和微信登录的等功能
- 浏览微信分享文档，如下图可以看到微信分享、微信登录等android、ios文档，cordova插件封装的方法也就是这里提供的方法
- 安装微信插件cordova-plugin-wechat
cordova plugin add cordova-plugin-wechat --variable wechatappid=你申请的AppID - 如下代码封装微信插件分享方法，只是实现分享文本和图片，需要分享音乐视频小程序等请查看微信开发平台文档（插件提供的文档也很简单）
可以看到使用微信插件分享，可以判断微信是否安装，分享是否成功
declare var Wechat;
/**
* 微信分享
* @param scene 分享目标 0:分享到对话，1:分享到朋友圈，2:收藏
* @param text 分享的文本
* @param image 分享的图片 可是是图片base64，可以是图片url地址
*/
wechatShare(scene = 0, text = null, image = null) {
if (!text && !image) {
this.alert('分享内容不能为空');
return;
}
Wechat.isInstalled(installed => {
if (installed) {
// 如果message存在则分享message
text && Wechat.share({
text: text,
scene: scene
}, () => {
console.log('分享成功');
}, reason => {
console.log('分享失败' + reason);
});
// 如果image存在则分享image
image && Wechat.share({
message: {
title: "微信分享",
description: "微信分享",
media: {
type: Wechat.Type.IMAGE,
image: image
}
},
scene: scene
}, () => {
console.log('分享成功');
}, reason => {
console.log('分享失败' + reason);
});
} else {
this.showToast('请安装微信');
}
}, () => {
this.showToast('分享失败');
});
}
- 调用分享方法及效果演示
- 现在微信分享已搞定，下面提供QQ、微博分享插件，集成过程和微信类似
QQ： https://github.com/iVanPan/Cordova_QQ
QQ开放平台：https://connect.qq.com/index.html
微博：https://github.com/iVanPan/cordova_weibo
微博开放平台：http://open.weibo.com/
微信：https://github.com/xu-li/cordova-plugin-wechat
微信开放平台：https://open.weixin.qq.com/
