您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

秀杰实战教程系列《九》:应用实例教程服务端登录篇

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-02-10 12:14热度:

步骤

1.小程序端通过微信第三方登录,取出nickname向服务端请求登录,成功后本地并缓存uid,accessToken

接口出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html


App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('获取用户登录态失败!' + res.errMsg)
        }
      }
    });
  }
})

缓存用户的基本信息


index.js

  onLoad: function(){
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //请求登录
            console.log(userInfo.nickName);
            app.httpService(
                    'user/login',
                    {
                        openid: userInfo.nickName
                    }, 
                    function(response){
                        //成功回调
                        console.log(response);
//                        本地缓存uid以及accessToken
                        var userinfo = wx.getStorageSync('userinfo') || {};
                        userinfo['uid'] = response.data.uid;
                        userinfo['accessToken'] = response.data.accessToken;
                        console.log(userinfo);
                        wx.setStorageSync('userinfo', userinfo);
                    }
            );
        })
  }

app.js

定义一个通用的网络访问函数:


  
httpService:function(uri, param, cb) {
//      分别对应相应路径,参数,回调
      wx.request({
            url: 'http://financeapi.applinzi.com/index.php/' + uri,
            data: param,
            header: {
                'Content-Type': 'application/json'
            },
            success: function(res) {
                cb(res.data)
            },
            fail: function() {
                console.log('接口错误');
            }
        })  
  },

这里method默认为get,如果设置为其他,比如post,那么服务端怎么也取不到值,于是改动了服务端的取值方式,由$_POST改为$_GET。

在Storage面板中,检查到数据已成功存入