微信小程序记帐应用实例教程(续二)

图0 #步骤php

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

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

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.jsapi

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面板中,检查到数据已成功存入app

图1

源码下载:关注下方的公众号->回复数字1002函数

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多做品。

公众号

相关文章
相关标签/搜索