ionic3 微信授权登录,APP微信分享功能 开发平台签名解决等 笔记

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
感谢.

你可能感兴趣的:(技术分享,三方登录)