小程序模板網(wǎng)

微信小程序(應(yīng)用號)實戰(zhàn)課程之記賬軟件開發(fā)

發(fā)布時間:2018-05-09 15:58 所屬欄目:小程序開發(fā)教程

[2016-10-12] 更新

緣起:昨天官方開發(fā)有了更新v0.10.101100,Picker的mode屬性已經(jīng)支持date以及time(background-image的bug也修復(fù)),于是來更新此實例。

##目標(biāo):實現(xiàn)集成日期組件

如圖

官方文檔出處:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步驟,在item.wxml文件中增加一個picker組件,如下:


    <view class="section">
        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
		    <view class="section__title">
		      日期: {{date}}
		    </view>
		</picker>
    </view>

如圖

從圖中可以看出:

1.日期后面是空白的,應(yīng)該默認顯示今天日期; 2.點擊確定也沒有顯示到組件上,需要實現(xiàn)bindDateChange方法。

于是我們需要在item.js文件中,聲明一個data值date與wxml中的{{date}}綁定關(guān)聯(lián)

然后在onLoad中初始化字符串格式的日期值,詳細說明見注釋:


//    獲取當(dāng)前日期
    var date = new Date();
//    格式化日期為"YYYY-mm-dd"
    var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//    存回data,以渲染到頁面
    this.setData({
    	date: dateStr
    })

經(jīng)過如上處理,日期組件已經(jīng)顯示為當(dāng)前日期

如圖

處理到此,我們還需要修復(fù)一個邏輯錯誤,即組件的結(jié)束日期應(yīng)該不超過當(dāng)日,做法也很簡單,只需要在wxml文件中對picker的日期屬性end由2017-09-01改為{{date}}即可


<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">

吐槽一下,官方的picker的還是有bug的,完全不聽start與end使喚,仍可以選任意日期,暫時不去理會,代碼就這么寫著,什么時候開發(fā)工具修復(fù)了自然可以了,畢竟是現(xiàn)在還只是內(nèi)測,就將就用著。

接下來處理日期組件點擊確認事件bindDateChange

回到item.js文件

聲明一個bindDateChange方法,添加如下代碼以寫回data中的date值


//  點擊日期組件確定事件
  bindDateChange: function(e) {
    this.setData({
        date: e.detail.value
    })
  }

至此,已經(jīng)實現(xiàn)集成日期picker組件。剩下的就是將它同之前的標(biāo)題、類型、金額字段那樣存在json再本地setStorage存儲即可,這里不作贅述,具體可以參考本人公眾號之前發(fā)的文章《微信小程序(應(yīng)用號)實戰(zhàn)課程之記賬應(yīng)用開發(fā)》。#步驟

#1.小程序端通過微信第三方登錄,取出nickname向服務(wù)端請求登錄,成功后本地并緩存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) {
          //發(fā)起網(wǎng)絡(luò)請求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('獲取用戶登錄態(tài)失??!' + res.errMsg)
        }
      }
    });
  }
})

緩存用戶的基本信息

index.js


  onLoad: function(){
	    var that = this
	    //調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
	    app.getUserInfo(function(userInfo){
	      //請求登錄
	    	console.log(userInfo.nickName);
	    	app.httpService(
	    			'user/login',
	    			{
	    				openid: userInfo.nickName
	    			}, 
	    			function(response){
			    		//成功回調(diào)
			    		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

定義一個通用的網(wǎng)絡(luò)訪問函數(shù):


  httpService:function(uri, param, cb) {
//	  分別對應(yīng)相應(yīng)路徑,參數(shù),回調(diào)
	  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,如果設(shè)置為其他,比如post,那么服務(wù)端怎么也取不到值,于是改動了服務(wù)端的取值方式,由POST_GET。

在Storage面板中,檢查到數(shù)據(jù)已成功存入

[2016-10-25]

#由單機版升級為網(wǎng)絡(luò)版

##1.緩存accessToken,以后作為令牌使用,uid不必緩存,由服務(wù)端完成映射,user/login接口

先來回顧一下app.js封裝的httpService的代碼實現(xiàn):


  httpService:function(uri, param, cb) {
//	  分別對應(yīng)相應(yīng)路徑,參數(shù),回調(diào)
	  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('接口錯誤');
		    }
		})  
  }

調(diào)用的是wx.request接口,返回res.data即為我們服務(wù)器返回的數(shù)據(jù),結(jié)構(gòu)與wx.request返回的類似,這里多一層結(jié)構(gòu),不可混淆。

response.code,response.msg,response.data是我自己服務(wù)端定義的結(jié)構(gòu)

res.statusCode,res.errMsg,res.data是微信給我們定義的結(jié)構(gòu)

而我們的response又是包在res.data中的,所以正常不加封裝的情況下,要取得我們自己服務(wù)端返回的目標(biāo)數(shù)據(jù)應(yīng)該是寫成,res.data.data.accessToken;好在已經(jīng)作了封裝,不會那么迷惑人了,今后調(diào)用者只認response.data就可以拿到自己想要的數(shù)據(jù)了。

明白了上述關(guān)系與作了封裝后,我們調(diào)用起來就方便了,index.js中onShow寫上如下代碼


app.httpService(
	    			'user/login',
	    			{
	    				openid: userInfo.nickName
	    			}, 
	    			function(response){
			    		//成功回調(diào),本地緩存accessToken
              var accessToken = response.data.accessToken;
			    		wx.setStorageSync('accessToken', accessToken);
		    		}
	    	);

app.js onLaunch調(diào)用如下代碼,在程序啟動就登錄與緩存accessToken。

之所以不在index.js中調(diào)用登錄,是因為app launch生命周期較前者更前,accessToken保證要加載item/all之前生成并緩存到本地



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24415.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢