index.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. // #ifdef APP-PLUS
  2. let alphaBg, shareMenu, showState = false;
  3. // 关闭弹窗
  4. export const closeShare = function(){
  5. alphaBg && alphaBg.close();
  6. alphaBg && shareMenu.close();
  7. if(showState){
  8. showState = false;
  9. return true
  10. } else {
  11. showState = false;
  12. return false
  13. }
  14. }
  15. // 复制
  16. function onCopy(item, shareInfo,callback) {
  17. let copyInfo = shareInfo.shareUrl || shareInfo.shareContent || shareInfo.shareImg;
  18. if (copyInfo) {
  19. uni.setClipboardData({
  20. data: copyInfo,
  21. success:() => {
  22. uni.showToast({
  23. title: "已复制到剪贴板",
  24. icon: "none"
  25. });
  26. callback && callback(item);
  27. }
  28. });
  29. }
  30. }
  31. // 更多
  32. function onMore(item, shareInfo,callback) {
  33. plus.share.sendWithSystem({
  34. type: "text",
  35. title: shareInfo.shareTitle || "",
  36. href: shareInfo.shareUrl || "",
  37. content: shareInfo.shareContent || "",
  38. },function(res){
  39. callback && callback(item);
  40. },function(err){
  41. console.log(err);
  42. });
  43. }
  44. // 分享
  45. function onShare(item, shareInfo,callback) {
  46. if (shareInfo.type == undefined) {
  47. shareInfo.type = item.type;
  48. }
  49. let shareObj = {
  50. provider: item.provider,
  51. type: shareInfo.type,
  52. success: (res) => {
  53. callback && callback(item);
  54. console.log("success:" + JSON.stringify(res));
  55. },
  56. fail: (err) => {
  57. console.log("分享失败,参数缺失 fail:" + JSON.stringify(err));
  58. }
  59. };
  60. if (shareInfo.shareTitle) {
  61. shareObj.title = shareInfo.shareTitle;
  62. }else if(item.provider == "qq"){
  63. uni.showToast({
  64. title: "缺失分享的标题",
  65. icon: "none"
  66. });
  67. return;
  68. }
  69. if(shareInfo.type == 0 || item.provider == "qq"){
  70. if (shareInfo.shareUrl) {
  71. shareObj.href = shareInfo.shareUrl;
  72. }else{
  73. uni.showToast({
  74. title: "缺失分享的地址",
  75. icon: "none"
  76. });
  77. return;
  78. }
  79. }
  80. if([0,1,3,4].includes(shareInfo.type)){
  81. if (shareInfo.shareContent) {
  82. shareObj.summary = shareInfo.shareContent;
  83. }else{
  84. uni.showToast({
  85. title: "缺失分享的描述",
  86. icon: "none"
  87. });
  88. return;
  89. }
  90. }
  91. if([0,2,5].includes(shareInfo.type)){
  92. if (shareInfo.shareImg) {
  93. shareObj.imageUrl = shareInfo.shareImg;
  94. }else{
  95. uni.showToast({
  96. title: "缺失分享的图片",
  97. icon: "none"
  98. });
  99. return;
  100. }
  101. }
  102. if([3,4].includes(shareInfo.type)){
  103. if (shareInfo.mediaUrl) {
  104. shareObj.mediaUrl = shareInfo.mediaUrl;
  105. }else{
  106. uni.showToast({
  107. title: "缺失分享的音视频地址",
  108. icon: "none"
  109. });
  110. return;
  111. }
  112. }
  113. if(shareInfo.type == 5){
  114. if (shareInfo.appId && shareInfo.appPath && shareInfo.appWebUrl) {
  115. shareObj.miniProgram = {
  116. id:shareInfo.appId,
  117. path:shareInfo.appPath,
  118. webUrl:shareInfo.appWebUrl,
  119. };
  120. if(shareInfo.appType){
  121. shareObj.miniProgram.type = shareInfo.appType;
  122. }
  123. }else{
  124. uni.showToast({
  125. title: "缺失分享小程序的参数",
  126. icon: "none"
  127. });
  128. return;
  129. }
  130. }
  131. if (item.scene) {
  132. shareObj.scene = item.scene;
  133. }
  134. uni.share(shareObj);
  135. }
  136. let otherShareList = [
  137. {
  138. icon: "/static/share/icon_copy.png",
  139. text: "复制",
  140. provider: "copy",
  141. onClick: onCopy
  142. },
  143. {
  144. icon: "/static/share/icon_more.png",
  145. text: "更多",
  146. provider: "more",
  147. onClick: onMore
  148. }
  149. ];
  150. let platformShareList = [];
  151. // 获取服务商支持的分享
  152. uni.getProvider({
  153. service: 'share',
  154. success: function (res) {
  155. if (res.provider.includes('sinaweibo')) {
  156. platformShareList = [{
  157. icon: "/static/share/icon_weibo.png",
  158. text: "新浪微博",
  159. onClick: onShare,
  160. provider: "sinaweibo",
  161. type: 0
  162. }].concat(platformShareList);
  163. }
  164. if (res.provider.includes('qq')) {
  165. platformShareList = [{
  166. icon: "/static/share/icon_qq.png",
  167. text: "QQ",
  168. onClick: onShare,
  169. provider: "qq",
  170. type: 1
  171. }].concat(platformShareList);
  172. }
  173. if (res.provider.includes('weixin')) {
  174. platformShareList = [{
  175. icon: "/static/share/icon_weixin.png",
  176. text: "微信好友",
  177. onClick: onShare,
  178. provider: "weixin",
  179. scene: "WXSceneSession",
  180. type: 0
  181. },
  182. {
  183. icon: "/static/share/icon_pengyouquan.png",
  184. text: "朋友圈",
  185. onClick: onShare,
  186. provider: "weixin",
  187. scene: "WXSenceTimeline",
  188. type: 0
  189. },
  190. {
  191. icon: "/static/share/ic_xiaochengxu.png",
  192. text: "小程序",
  193. onClick: onShare,
  194. provider: "weixin",
  195. scene: "WXSceneSession",
  196. type: 5
  197. }].concat(platformShareList);
  198. }
  199. }
  200. });
  201. // 根据type类型过滤掉不支持的平台
  202. function platformFilter(data){
  203. let platformList = [];
  204. let supportList = [
  205. ["weixin","sinaweibo"],
  206. ["weixin","sinaweibo","qq"],
  207. ["weixin","sinaweibo","qq"],
  208. ["weixin","qq"],
  209. ["weixin","sinaweibo"],
  210. ["weixin"],
  211. ];
  212. let currentSupport = [];
  213. if(data.type >= 0 && data.type <= 5){
  214. currentSupport = supportList[data.type];
  215. }
  216. platformShareList.forEach((item,index) => {
  217. if(data.type >= 0 && data.type <= 5){
  218. if(currentSupport.includes(item.provider)){
  219. if(item.provider == "weixin"){
  220. if(item.text == "小程序"){
  221. if(data.type == 5){
  222. platformList.push(item);
  223. }
  224. }else if(data.type !== 5){
  225. platformList.push(item);
  226. }
  227. } else {
  228. platformList.push(item);
  229. }
  230. }
  231. }else{
  232. if(item.provider == "weixin"){
  233. if(item.text == "小程序"){
  234. if(data.appId && data.appPath){
  235. platformList.push(item);
  236. }
  237. }else {
  238. platformList.push(item);
  239. }
  240. } else {
  241. platformList.push(item);
  242. }
  243. }
  244. });
  245. return platformList.concat(otherShareList);
  246. }
  247. // 数据处理
  248. function dataFactory(shareInfo = {}) {
  249. let config = {
  250. ...shareInfo
  251. };
  252. config.shareTitle = shareInfo.shareTitle || "";
  253. config.shareUrl = shareInfo.shareUrl || "";
  254. config.shareContent = shareInfo.shareContent || "分享的描述";
  255. config.shareImg = shareInfo.shareImg || "分享的图片";
  256. return config;
  257. }
  258. export default function (shareInfo, callback) {
  259. shareInfo = dataFactory(shareInfo);
  260. // 以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心
  261. let screenWidth = plus.screen.resolutionWidth
  262. //以360px宽度屏幕为例,上下左右边距及2排按钮边距留25像素,图标宽度55像素,同行图标间的间距在360宽的屏幕是30px,但需要动态计算,以此原则计算4列图标分别的left位置
  263. //图标下的按钮文字距离图标5像素,文字大小12像素
  264. //底部取消按钮高度固定为44px
  265. //TODO 未处理横屏和pad,这些情况6个图标应该一排即可
  266. let marginTop = 25, //上间距
  267. marginLeft = 25, //左间距
  268. iconWidth = 55, //图标宽宽
  269. iconHeight = 55, //图标高度
  270. icontextSpace = 10, //图标与文字间距
  271. textHeight = 12 //文字大小
  272. let left1 = marginLeft / 360 * screenWidth;
  273. let colNumber = Math.floor(screenWidth / (iconWidth + marginLeft));
  274. let i = (screenWidth - (iconWidth + marginLeft) * colNumber - marginLeft) / (colNumber + 1);
  275. let initMargin = marginLeft + i;
  276. let itemWidth = iconWidth + initMargin;
  277. let itemHeight = iconHeight + icontextSpace + textHeight + marginTop;
  278. let textTop = iconHeight + icontextSpace;
  279. alphaBg = new plus.nativeObj.View("alphaBg", { //先创建遮罩层
  280. top: '0px',
  281. left: '0px',
  282. height: '100%',
  283. width: '100%',
  284. backgroundColor: 'rgba(0,0,0,0.5)'
  285. });
  286. alphaBg.addEventListener("click", function () { //处理遮罩层点击
  287. alphaBg.close();
  288. shareMenu.close();
  289. });
  290. let shareList = platformFilter(shareInfo);
  291. shareMenu = new plus.nativeObj.View("shareMenu", { //创建底部图标菜单
  292. bottom: '0px',
  293. left: '0px',
  294. height: Math.ceil(shareList.length / colNumber) * itemHeight + marginTop + 44 + 1 + 'px',
  295. width: '100%',
  296. backgroundColor: 'rgb(255,255,255)'
  297. });
  298. //绘制底部图标菜单的内容
  299. shareMenu.draw([{
  300. tag: 'rect', //菜单顶部的分割灰线
  301. color: '#e7e7e7',
  302. position: {
  303. top: '0px',
  304. height: '1px'
  305. }
  306. },
  307. {
  308. tag: 'font',
  309. id: 'sharecancel', //底部取消按钮的文字
  310. text: '取消分享',
  311. textStyles: {
  312. size: '14px'
  313. },
  314. position: {
  315. bottom: '0px',
  316. height: '44px'
  317. }
  318. },
  319. {
  320. tag: 'rect', //底部取消按钮的顶部边线
  321. color: '#e7e7e7',
  322. position: {
  323. bottom: '45px',
  324. height: '1px'
  325. }
  326. }
  327. ]);
  328. shareList.map((v, k) => {
  329. let time = new Date().getTime();
  330. let row = Math.floor(k / colNumber);
  331. let col = k % colNumber;
  332. let item = [{
  333. src: v.icon,
  334. id: Math.random() * 1000 + time,
  335. tag: "img",
  336. position: {
  337. top: row * itemHeight + marginTop,
  338. left: col * itemWidth + initMargin,
  339. width: iconWidth,
  340. height: iconWidth
  341. }
  342. }, {
  343. text: v.text,
  344. id: Math.random() * 1000 + time,
  345. tag: "font",
  346. textStyles: {
  347. size: textHeight
  348. },
  349. position: {
  350. top: row * itemHeight + textTop,
  351. left: col * itemWidth + initMargin,
  352. width: iconWidth,
  353. height: iconWidth
  354. }
  355. }];
  356. shareMenu.draw(item);
  357. });
  358. shareMenu.addEventListener("click", function (e) { //处理底部图标菜单的点击事件,根据点击位置触发不同的逻辑
  359. if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
  360. alphaBg.close();
  361. shareMenu.close();
  362. } else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
  363. //屏幕左右边缘5像素及菜单顶部5像素不处理点击
  364. } else { //点击了图标按钮
  365. let x = e.clientX;
  366. let y = e.clientY;
  367. let colIdx = Math.floor(x / itemWidth);
  368. let rowIdx = Math.floor(y / itemHeight);
  369. let tapIndex = colIdx + rowIdx * colNumber;
  370. shareList[tapIndex].onClick(shareList[tapIndex], shareInfo,callback);
  371. }
  372. });
  373. alphaBg.show();
  374. shareMenu.show();
  375. showState = true;
  376. return {
  377. close: function(){
  378. alphaBg && alphaBg.close();
  379. alphaBg && shareMenu.close();
  380. showState = false;
  381. }
  382. };
  383. };
  384. // #endif