1、安装微信插件
ionic cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID
注意这里wechat版本有可能会报错,wechat后面跟版本号2.3.0如果报错,就用[email protected]
ionic cordova plugin add [email protected] --variable wechatappid=YOUR_WECHAT_APPID
2、组件中引入微信服务,定义。
import { Component } from "@angular/core";
import { App, LoadingController, Nav, IonicPage, NavController, NavParams, ModalController } from "ionic-angular";
import { StudentPage } from "../student/tabs/student";
import { StorageService } from "../../providers/StorageService";
import { BrowserService } from "../../providers/BrowserService";
import { HttpService } from "../../providers/HttpService";
import { commonUtils } from "../../providers/common-utils";
import { UserInfoData } from "../../model/UserInfoData";
import { Keyboard } from '@ionic-native/keyboard';
import { Content } from 'ionic-angular';
import { TeacherPage } from '../teacher/teacher';
import { SystemService } from '../../providers/system-service';
import { BindAccountPage } from './bind-account/bind-account';
import { Platform } from 'ionic-angular';
import { AppConfig } from '../../app/app.config';
// import { QQSDK, QQShareOptions } from '@ionic-native/qqsdk';
// 引入微信服务--就是这里引入,上面的是自己导入的模块
// declare let Wechat;
declare var Wechat: any;
后面就可以使用Wechat来调用微信里面的服务了。
3.具体代码-微信登录
wxLogin() {
Wechat.isInstalled(isInstalled => {
if (!isInstalled) {
if (this.plt.is('ios')) {
this.bs.launchOutter('https://itunes.apple.com/cn/app/%E5%BE%AE%E4%BF%A1/id414478124?mt=8');
}
else if (this.plt.is('android')) {
this.bs.launchOutter('https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&t=weixin_download_method&sys=android&loc=weixin,android,web,0');
}
else {
this.utils.showLoading({ message: '请先安装微信客户端' });
}
}
else {
let loading = this.ld.create({
content: "跳转微信登录中...",//loading框显示的内容
dismissOnPageChange: true, // 是否在切换页面之后关闭loading框
showBackdrop: true //是否显示遮罩层
});
loading.present();
try {
let scope = "snsapi_userinfo";//snsapi_userinfo
let state = "_" + (+new Date());
//获取code
Wechat.auth(scope, state, (response) => {
//获取openid
let url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + AppConfig.APPID + "&secret=" + AppConfig.APPSECRET + "&code=" + response.code + "&grant_type=authorization_code";
this.utils.showLoading();
this.httpService.httpGetNoAuth(url, null, res => {
let openid = res.openid;
// alert("openid==="+openid);
if (openid) {
this.httpService.httpGetNoAuth("http://passport.cqzuxia.com/api/Authorize/GetAccountByWechatID", { openid: openid, type: this.loginInfo.type }, res => {
this.utils.hideLoading();
if (res.Success) {
if (res.Data.Type == 0) {
//未绑定
let modal = this.modalCtrl.create(BindAccountPage, {
openid: openid,
type: this.loginInfo.type
});
modal.onDidDismiss(data => {
if (data) {
this.loginInfo.LoginID = data.username;
this.loginInfo.LoginPwd = data.password;
this.login(this.loginInfo);
}
});
modal.present();
}
else if (res.Data.Type == 1) {
//已绑定
this.loginInfo.LoginID = res.Data.Username;
this.loginInfo.LoginPwd = res.Data.Password;
this.login(this.loginInfo, true);
}
}
else {
this.utils.showToastWithOptions({ message: res.Message });
}
}, err => {
this.utils.hideLoading();
this.utils.showToastWithOptions({ message: JSON.stringify(err) });
});
}
else {
this.utils.showToastWithOptions({ message: '微信授权信息出错' });
}
//获取用户信息
// let url2 = "https://api.weixin.qq.com/sns/userinfo?access_token=" + res.access_token + "&openid=" + res.openid + "&lang=zh_CN"
// this.httpService.httpGetNoAuth(url2, null, res2 => {
// alert(JSON.stringify(res2));
// });
});
}, (reason) => {
this.utils.showToastWithOptions({ message: reason });
});
} catch (error) {
console.log(error);
} finally {
loading.dismiss();
}
}
}, reason => {
this.utils.showLoading({ message: reason });
});
}
关于APPID和APPSECRET存在全局变量里,引入模块AppConfig 即可
import { ImageData } from '../model/ImageModel';
import { MenuData } from '../model/MenuData';
import { InfoData } from '../model/InfoData';
export class AppConfig {
//全局loading
public static loading: Loading;
//全局image
public static image_data: Array;
//全局image
public static menu_data: Array;
//学生基本信息
public static info_data: InfoData;
//微信appid
public static APPID: string = 'leyif0ec24a823068f2';
//微信secret
public static APPSECRET: string = 'leyie7b903b8ad82aa921a7336a42483e133';
}
4.获取用户信息,
其中有了第一步的操作,得到openid ,access_token 后获取用户信息就很容易了.就是一个请求搞得.
//获取用户信息
// let url2 = "https://api.weixin.qq.com/sns/userinfo?access_token=" + res.access_token + "&openid=" + res.openid + "&lang=zh_CN"
// this.httpService.httpGetNoAuth(url2, null, res2 => {
// alert(JSON.stringify(res2));
// });
以下都能通过请求返回值得到:
// openid 普通用户的标识,对当前开发者帐号唯一
// nickname 普通用户昵称
// sex 普通用户性别,1为男性,2为女性
// province 普通用户个人资料填写的省份
// city 普通用户个人资料填写的城市
// country 国家,如中国为CN
// headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
// privilege 用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
// unionid 用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。
5.注意事项
1.微信开放平台https://open.weixin.qq.com/申请APPID和APPSECRET
1.要包名,包应用签名
包名地址:platforms/android/AndroidManifest.xml–>package
应用签名:通过ionic cordova run android --release 打包生成android-release.apk文件,注意,不是android-debug.apk.安装android-release.apk到手机上,使用微信开发平台给的签名查看工具,链接:[https://res.wx.qq.com/open/zh_CN/htmledition/res/dev/download/sdk/Gen_Signature_Android2.apk]点击下载后安装到手机,运行它。输入你要查看的应用的包名,点击get Signature,即可生成应用签名,填到开发平台上.
2.签名很重要,不然会出现闪退,报未知错误等.
3.不清楚的请留言,评论.谢谢.
签名问题解决链接地址:
https://blog.csdn.net/fxjzzyo/article/details/51408043
微信授权登录模块链接地址:和我的请求有差别,这个参考地址是个模块
https://segmentfault.com/a/1190000014341825
感谢.