ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
这一讲主要包含以下几个部分：
- 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平台发布到应用市场。
