开发者社区> tonge> 正文

ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)

简介: ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
+关注继续查看

ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)

img_2d5933745382df8c7dab1dc64eada94e.jpe
图片发自简书App

这一讲主要包含以下几个部分:

  • 1.在微信开放平台创建应用获得wechatappid;
  • 2.在腾讯开放平台创建应用获得QQ_APP_ID;
  • 3.安装QQ分享插件cordova-plugin-qqsdk;
  • 4.安装微信分享cordova-plugin-wechat;
  • 5.ionic3分享功能的实现;

准备工作

  • 微信开放平台开发者账号
  • 腾讯开放平台开发者账号

1.在微信开放平台创建应用获得wechatappid

微信开放平台官方地址:https://open.weixin.qq.com/, 创建步骤按照官方一步一步来就行了,需要注意的是android包名和iOS的Bundle Id需要与config.xml中的widget节点的id属性一致,这里使用的是cn.tongedev.dress。创建成功之后需要等1-2天审核。

<widget id="cn.tongedev.dress" version="0.0.1" >  

2.在腾讯开放平台创建应用获得QQ_APP_ID;

腾讯开放平台官方地址:http://open.qq.com/,申请成功之后也同样需要等待审核。

3.安装cordova-plugin-qqsdk插件

从找到控制台的QQ_APP_ID:

cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=xxxxxxxxxxx --save

$ cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=xxxxxxxxxxx --save
Installing "cordova-plugin-qqsdk" for android
Subproject Path: CordovaLib
Adding cordova-plugin-qqsdk to package.json
Saved plugin info for "cordova-plugin-qqsdk" to config.xml

4.安装cordova-plugin-wechat插件

cordova plugin add https://github.com/wowgeeker/cordova-plugin-wechat --variable wechatappid=xxxxxxxxxxxx

$ cordova plugin add https://github.com/wowgeeker/cordova-plugin-wechat --variable wechatappid=xxxxxxxxxxxxxx --save
Installing "cordova-plugin-wechat" for android
Running android-install.Hook: after_plugin_install, Package: cn.tongedev.dress, Path: /Users/eliteenergy/Repos/ionic3-dress.
Adding cordova-plugin-wechat to package.json
Saved plugin info for "cordova-plugin-wechat" to config.xml

5.ionic3分享功能的实现;

5.1 封装AppShare

src/app/目录下新建一个app.share.ts

import { LoadingController, Platform } from 'ionic-angular';
import { Injectable } from '@angular/core';

declare var Wechat;
declare var QQSDK;


@Injectable()
export class AppShare {

    //标题
    title: string = "女装尖货 - 单件月销1.8万"
    //描述
    description: string = "行业精选女装 好货任你挑";
    //分享链接
    link: string = "http://dress.tongedev.cn";
    //分享图片
    image: string = "https://mmbiz.qlogo.cn/mmbiz_png/khImeKLbVF7u5qdXdicpapLl9diadj5db6xHxdlVgxmYPxkYOR8WyVgOw4tn3EHEsvd9hlfu7zEpgVLYkLh28Nibg/0?wx_fmt=png";

    constructor(public loadingCtrl: LoadingController, platform: Platform) {
        if (platform.is('ios')) {
            this.link = "https://itunes.apple.com/cn/app/女装尖货-单件月销1-8万/id1194942857?mt=8";
        }
        else if (platform.is('android')) {
            this.link = "http://a.app.qq.com/o/simple.jsp?pkgname=cn.tongedev.dress";
        } else {
            this.link = "http://dress.tongedev.cn";
        }
    }

    wxShare(scene) {
        var loading = this.loadingCtrl.create({ showBackdrop: false });
        loading.present();
        try {
            Wechat.share({
                message: {
                    title: this.title,
                    description: this.description,
                    thumb: this.image,
                    mediaTagName: "TEST-TAG-001",
                    messageExt: "",  // 这是第三方带的测试字段
                    messageAction: "", // <action>dotalist</action>
                    media: {
                        type: Wechat.Type.WEBPAGE,
                        webpageUrl: this.link
                    }
                },
                scene: scene == 0 ? Wechat.Scene.SESSION : Wechat.Scene.Timeline  // share to Timeline
            }, function () {
                // alert("分享成功!");
            }, function (reason) {
                // alert("Failed: " + reason);
            });
        } catch (error) {
            console.log(error);
        } finally {
            loading.dismiss();
        }
    }

    qqShare(scene) {
        var loading = this.loadingCtrl.create({ showBackdrop: false });
        loading.present();
        try {
            var args: any = {};
            if (scene == 0) {
                args.scene = QQSDK.Scene.QQ;//QQSDK.Scene.QQZone,QQSDK.Scene.Favorite
            }
            else {
                args.scene = QQSDK.Scene.QQZone;
            }
            args.url = this.link;
            args.title = this.title;
            args.description = this.description;
            args.image = this.image;
            QQSDK.shareNews(function () {
                loading.dismiss();
            }, function (failReason) {
                loading.dismiss();
            }, args);
        } catch (error) {
            console.log(error);
        } finally {
            loading.dismiss();
        }
    }
}

5.2 添加引用

在app.module.ts的providers里引入AppShare

5.3 在首页的右上角添加分享按钮

更改home.html的ion-header为:

<ion-header>
    <ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
        <ion-title>首页</ion-title>
        <ion-buttons end>
        <button ion-button (click)="share($event)">
            <ion-icon name="share"></ion-icon>
        </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

5.4 分享按钮事件的实现

在home.ts顶部导入AppShare:
import { AppShare } from './../../app/app.share';

在home.ts的构造函数种依赖注入AppShare:
constructor(public appShare:AppShare,... ){}

在home.ts新增share函数

share(event) {
    let actionSheet = this.actionSheetCtrl.create({
    title: '分享',
    buttons: [
        {
        text: 'QQ好友',
        handler: () => {
            this.appShare.qqShare(0)
        }
        },
        {
        text: 'QQ空间',
        handler: () => {
            this.appShare.qqShare(1)
        }
        },
        {
        text: '微信好友',
        handler: () => {
            this.appShare.wxShare(0)
        }
        },
        {
        text: '朋友圈',
        handler: () => {
            this.appShare.wxShare(1)
        }
        },
        {
        text: '取消',
        role: 'cancel',
        handler: () => {
            console.log('Cancel clicked');
        }
        }
    ]
    });
    actionSheet.present();
}

这里主要实现了分享到QQ好友,QQ空间,微信好友,微信朋友圈。还可以分享到微信收藏,有兴趣的试试。

微信分享文档:https://github.com/wowgeeker/cordova-plugin-wechat.git
QQ分享文档:https://www.npmjs.com/package/cordova-plugin-qqsdk

好了,这一讲就到这里了,下一讲将介绍如何打包android平台发布到应用市场。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用SSM为学校教研室开发技能大赛评分系统
教师比赛系统总共分为三个阶段 第一个阶段是:教研室比赛阶段(同一个教研室的老师比赛),同一学院下多个教研室分别选取该教研室分数高的数人晋级到第二阶段:学院比赛。 第二个阶段是:学院比赛阶段:从第一阶段晋级过来的老师中选取分数最高的数名代表学院参加第三阶段(总决赛)比赛 第三个阶段是:总决赛:从第二阶段晋级来的选手比赛,排名,选出冠军、亚军、季军。
11 0
IDEA创建maven项目过慢,一直卡在resolving dependencies...的解决办法
作为一个从事 Java 开发的程序员,每天离不开ide的帮助。一开始学习java的时候基本都是使用eclipse进行开发, 后来接触了idea,发现是真的香,比eclipse好用太多了,能够大大提升开发的效率。
5 0
从零开始学设计模式(六):适配器模式(Adapter Pattern)
前面的几篇文章分别介绍了设计模式中的创建型设计模式,它们分别是:
5 0
Android 打包AAB+PAD(java篇)(上)
AAB Play Asset Delivery 分发模式 资源更新 纹理压缩格式定位 应用版本更新 下载大小上限 针对Java 代码构建
8 0
Android 开发规范(转载 Blankj 作品)
摘要 • 1 前言 • 2 AS 规范 • 3 命名规范 • 4 代码样式规范 • 5 资源文件规范 • 6 版本统一规范 • 7 第三方库规范 • 8 注释规范 • 9 测试规范 • 10 其他的一些规范 1 前言
7 0
Android 打包AAB+PAD(java篇)(下)
Play Core API 集成 安装时分发 快速跟进式分发和按需分发 查看状态 获取有关资源包的下载信息 安装 监控下载状态 下载内容较大 获取资源包 取消请求 移除资源包 获取多个资源包的位置 相关推荐 Android aab打包 Android App Bundle 已取代 APK
8 0
Android CheckedTextView 使用+实例
CheckedTextView是什么 主要XML属性 在点击事件里判断状态设置状态 第一次点击无效 实例 1.主界面CheckedTextViewActivity.java 2.主布局activity_textview_ctv.xml 3.复选框Adapter 4.复选框adapter对应布局 5.单选框adapter 6.单选框adapter对应布局 7.逻辑处理从adapter放在主界面处
9 0
Flutter笔记 01:Mac环境配置
Flutter笔记 01:Mac环境配置
4 0
Android 计时器Chronometer 使用及源码分析
Chronometer 主要XML属性如下: 常用方法 示例 主界面布局文件 主界面代码 Format格式修改 源码分析 setBase() dispatchChronometerTick() updateText() start() stop() updateRunning() setFormat(String) setCountDown()
4 0
+关注
tonge
热衷于移动开发技术的研究;对移动端后台架构、移动安全颇有研究;熟悉整个移动开发流程;写过移动跨平台开发技术系列教程
19
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载