ionic3微信登陆完整版

一、准备工作

    1、cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID --save;

   2、wechatappid 需要去微信开发平台申请https://open.weixin.qq.com/;

  3、在创建app时最好检测自己的签名! 里面有签名生成工具。https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319167&token=b4bd0b2fb13624fda29509f1866a2fc365489303&lang=zh_CN

    ionic3微信登陆完整版_第1张图片

    4、审核通过就可以得到appid,下载插件了(要交300块软妹币哦)

二、开始开发

       1、创建一个服务thirdPartLogin.ts 

       2、声明Wechat: declare var Wechat ;

                为什么直接声明Wechat就可以调用里面的方法和属性了呢?因为我们在下载插件时在config.xml中已经集成了。

                

       3、开始写代码喽

            WeChatAuth() {
                  let loading = this.loadingCtrl.create({
                      content: "跳转微信登录中...",//loading框显示的内容
                      dismissOnPageChange: true, // 是否在切换页面之后关闭loading框
                      showBackdrop: true  //是否显示遮罩层
                  });
                 loading.present();
                 try {
                    let scope = "snsapi_userinfo",
                    state = "_" + (+new Date());

                    Wechat.auth(scope, state, (response) => {

                        this.thirdPartLoginService.WechatLoginGetAccess_token(response.code) //response.code就是你获取的code,后面获取access_token,openid 就需要后台人员来做了。我们把code传给后台即可。
                          .then((data) => {

                        

                            }, (err) => {

                          })
                    }, (reason) => {
                            alert("Failed: " + reason);
                        });
                   } catch (error) {
                        console.log(error);
                    } finally {

                           loading.dismiss();

                    }

            }

    注释: this.thirdPartLoginService.WechatLoginGetAccess_token()这个方法是我请求后台接口,将code传给后台。

    4、因为我之前试图在前段直接从微信api取是不可行的。token和openid,用户信息都是要后台去请求微信接口

    5、这个插件登陆方法只支持获取code的值。

    6、微信登陆一定要在真机上测试哦,并且在浏览器中打log 是无效的。

    不喜勿喷,红色都是小白需要注意!

你可能感兴趣的:(ionic3)