Ionic 3 微信分享

获取 wechatappid

首先，需要在 微信开放平台 创建应用获得 wechatappid。

安装 cordova-plugin-wechat 插件

cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID

如果没有 wechatappid，可暂时使用：wx7b22a8079fcd2f45

插件地址：https://github.com/xu-li/cordova-plugin-wechat

实现分享功能

在 src/app 目录下新建一个 app.share.ts 文件，封装 AppShare：

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

declare var Wechat;

@Injectable()
export class AppShare {
    //标题
    title: string = "";
    //描述
    description: string = "";
    //分享链接
    link: string = "";
    //分享图片
    image: string = "";

    constructor(public loadingCtrl: LoadingController, public toastCtrl: ToastController) { }

    wxShare(scene) {
        var loading = this.loadingCtrl.create({ showBackdrop: false });
        loading.present();
        try {
            Wechat.isInstalled((installed) => {
                if (installed) {
                    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
                    }, () => {
                        this.toastCtrl.create({
                            message: '分享成功！',
                            duration: 3000
                        }).present();
                    }, (reason) => {
                        this.toastCtrl.create({
                            message: '分享失败！',
                            duration: 3000
                        }).present();
                    });
                } else {
                    this.toastCtrl.create({
                        message: '没有安装微信',
                        duration: 3000
                    }).present();
                }
            }, function (reason) {
                console.log("Failed: " + reason);
            });
        } catch (error) {
            console.log(error);
        } finally {
            loading.dismiss();
        }
    }

}

添加引用

在 src/app/app.module.ts 文件中导入 AppShare，并将其添加到 providers 里：

import { AppShare } from './app.share';

providers: [
    ...
    AppShare
]

调用分享功能

接下来就需要在具体的页面中调用我们之前实现的分享功能：
share.html

<button ion-button (click)="doShare(0)">微信分享好友</button>

<button ion-button (click)="doShare(1)">微信分享朋友圈</button>

share.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AppShare } from '../../app/app.share';

@IonicPage()
@Component({
  selector: 'page-share',
  templateUrl: 'share.html',
})
export class SharePage {
 
  constructor(public appShare: AppShare) { }

  doShare(scene) {
    this.appShare.wxShare(scene);
  }

}