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

图片发自简书App

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

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

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

• 3.安装QQ分享插件cordova-plugin-qqsdk;

• 4.安装微信分享cordova-plugin-wechat；

• 5.ionic3分享功能的实现；

准备工作

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

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

提示：没有这两个平台开发者账号的请直接跳到第3步，已经准备好�了wechatappid和QQ_APP_ID

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：1105786989

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

$ cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=1105786989 --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插件

这里准备好了wechatappid：wx7b22a8079fcd2f45

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

$ cordova plugin add https://github.com/wowgeeker/cordova-plugin-wechat --variable wechatappid=wx7b22a8079fcd2f45 --saveInstalling "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空间，微信好友，微信朋友圈。还可以分享到微信收藏，有兴趣的试试。

作者：IonicBlog
链接：https://www.jianshu.com/p/6b40b4731d99