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

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

图片发自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天审核。

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: "", // dotalist
                    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为：

    
        首页
        
        
            
        
        
    

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平台发布到应用市场。