【uniapp】微信小程序登录流程篇

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

今天来学习的是使用uni-app开发微信小程序登录注册的流程 大概思路是：首先获取code，拿到code去获取openi，有了openid就可以对该微信用户进行登录或注册用户等操作。

首先我们要知道在开发微信小程序的过程中，不管使用uniapp这种的跨平台框架开发还是使用微信小程序原生语言开发，有两个参数是必不可少的，在调用一些微信官方接口的时候的必传参数：

• AppID 小程序ID

• AppSecret小程序密钥

AppId与AppSecret的获取方法： 登录微信公众平台，在【开发】-【开发管理】-【开发设置】菜单，找到AppID和AppSecret。这里要注意的是现在微信为了安全考虑，AppSecret不再被明文保存，如果忘记密钥只能点击重置后再次获取一个新的密钥。

有了这两个参数，就可以进行登录流程了。

1. 小程序端通过调用uni.login()方法获取code。

// 获取openid
postLoginCheck() {
        uni.login({
                provider: 'weixin',
                success: loginRes => {
                        console.log(loginRes);
                        this.$u.api
                                .postGetWechatOpenId({
                                        code: loginRes.code
                                })
                                .then(res => {
                                        console.log(res, '[登录页-获取openid]');
                                        this.params.openId = res.data;
                                })
                                .catch(err => {
                                        console.log(err);
                                });
                }
        });
},

2. 拿到获取到的code去调用服务端接口 api.weixin.qq.com/sns/jscode2… 这里就用到了AppId和AppSecret，该接口会返回用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。

/**
 * 方法描述: 登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程<br>
 *
 * @return String <br>
 */
public static JSONObject code2Session(String code) {
    String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + AppId + "&secret=" + AppSecret + "&js_code=" + code + "&grant_type=authorization_code";
    JSONObject jsonTexts = new JSONObject();
    try {
        jsonTexts = (JSONObject) JSON.parse(MyPubUtil.sendGet(url));
        System.out.println(jsonTexts);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return jsonTexts;
}

3. 拿到小程序用户openid就可以调用自己的业务代码接口进行登录或注册操作。

uni.getUserProfile获取微信用户头像、昵称等信息

uni.getUserProfile({
   desc: '登录',
   success: res => {
                this.params.avatarUrl = res.userInfo.avatarUrl;
                this.params.nickName = res.userInfo.nickName;
                this.params.gender = res.userInfo.gender;

                this.$u.api
                        .postLoginCheck(this.params)
                        .then(res => {
                                console.log(res, '[登录页-登录]');
                                // 存储token
                                uni.setStorageSync('JW-Token', res.data.token);
                        })
                        .catch(err => {
                                console.log(err);
                });
   },
   fail:(err)=>{
                console.log(err);
                return false;
        }
 })

总结：

涉及到微信小程序开发，openId用到的地方非常多，这里可以将openId作为用户表里面的一个属性存储起来，相当于用户的一个唯一标识字段，在调用微信的一些接口时候可以直接拿过来使用。