前言
- app分享分兩種模式子寓，一種是調(diào)用系統(tǒng)分享功能如下圖1梁厉，另一種是針對各個平臺定制分享功能辜羊，如下圖2是針對微信的定制分享效果
圖1：app調(diào)用系統(tǒng)分享功能
圖1：app定制微信分享功能 - 調(diào)用系統(tǒng)分享功能很簡單，用一個插件就夠了词顾，能夠分享到用戶手機(jī)上已安裝應(yīng)用八秃；定制分享功能比較復(fù)雜，需要多個插件肉盹，如定制微信分享需要在微信開放平臺申請并等待審核昔驱，你可能還需要定制QQ和新浪微博分享，定制過程和微信類似上忍，各個插件需要單獨(dú)調(diào)試
- 定制分享優(yōu)點(diǎn)是可以知道分享來源骤肛，能夠監(jiān)聽到分享目標(biāo)是否安裝、分享成功或失敗事件
- 大廠的分享功能一般是兩種兼用窍蓝，先定制萌衬，點(diǎn)擊更多調(diào)用系統(tǒng)分享，如下圖
- 本文將演示調(diào)用系統(tǒng)分享功能和定制微信分享功能
調(diào)用系統(tǒng)分享功能
- 需要安裝cordova-plugin-x-socialsharing插件它抱，點(diǎn)這里查看并安裝插件
- 目前安裝這個插件后秕豫，build會找不到
ANDROID_SUPPORT_V4_VERSION參數(shù)，如下圖
- 修改插件的
plugin.xml把參數(shù)值寫死，如下圖混移，然后重新build
重新build
cordova platform rm android & cordova platform add android & cordova build android
- 在NativeService.ts添加了分享公共方法祠墅，并簡化了分享功能
- 調(diào)用分享
- 分享圖文或dom，原理就是把一段html片段轉(zhuǎn)成base64字符串圖片歌径，然后分享毁嗦。需要使用html2canvas
cnpm i html2canvas。效果演示如下圖回铛，源碼點(diǎn)這里
定制微信分享
- 登錄微信開放平臺狗准，沒有帳號則注冊
- 如下圖在管理中心創(chuàng)建移動應(yīng)用并填一堆資料等待審核，我的2個工作日審核通過
- 審核通過可會看到已獲得分享權(quán)限茵肃，如下圖腔长，像微信支付和微信登錄需要單獨(dú)申請開通權(quán)限，接下來介紹的微信分享插件验残，同時也提供了微信支付和微信登錄的等功能
- 瀏覽微信分享文檔捞附，如下圖可以看到微信分享、微信登錄等android您没、ios文檔鸟召，cordova插件封裝的方法也就是這里提供的方法
- 安裝微信插件cordova-plugin-wechat
cordova plugin add cordova-plugin-wechat --variable wechatappid=你申請的AppID - 如下代碼封裝微信插件分享方法，只是實(shí)現(xiàn)分享文本和圖片氨鹏，需要分享音樂視頻小程序等請查看微信開發(fā)平臺文檔（插件提供的文檔也很簡單）
可以看到使用微信插件分享欧募，可以判斷微信是否安裝，分享是否成功
declare var Wechat;
/**
* 微信分享
* @param scene 分享目標(biāo) 0:分享到對話仆抵，1:分享到朋友圈跟继，2:收藏
* @param text 分享的文本
* @param image 分享的圖片 可是是圖片base64，可以是圖片url地址
*/
wechatShare(scene = 0, text = null, image = null) {
if (!text && !image) {
this.alert('分享內(nèi)容不能為空');
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('分享失敗');
});
}
- 調(diào)用分享方法及效果演示
- 現(xiàn)在微信分享已搞定肢础，下面提供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/
