前言

• 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/