美文网首页ionic2实战
ionic实战-app添加分享功能

ionic实战-app添加分享功能

作者: 昵称已被使用_ | 来源:发表于2019-01-08 14:46 被阅读426次

前言

  • 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('分享失败');
    });
  }

相关文章

网友评论

    本文标题:ionic实战-app添加分享功能

    本文链接:https://www.haomeiwen.com/subject/mmfvrqtx.html