微信小程序（應用號）實戰課程之記賬軟件開發
|
[2016-10-12] 更新 緣起：昨天(tian)官方開發有了(le)更(geng)新v0.10.101100，Picker的mode屬(shu)性已(yi)經(jing)支持date以及time（background-image的bug也(ye)修復），于(yu)是(shi)來更(geng)新此實例。 ##目(mu)標：實現集成日(ri)期組(zu)件 如圖
官方文檔出處：//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>
如圖
從圖中(zhong)可(ke)以看出：
于是(shi)我(wo)們需要在(zai)item.js文件中，聲明一(yi)個data值date與wxml中的{{date}}綁定關聯 然(ran)后在onLoad中初始(shi)化(hua)字符串(chuan)格(ge)式的(de)日期值，詳細說明見注釋(shi)：
// 獲取當前日期
var date = new Date();
// 格式化日期為"YYYY-mm-dd"
var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
// 存回data，以渲染到頁面
this.setData({
date: dateStr
})
經過如上處理，日(ri)(ri)期組件(jian)已經顯(xian)示為(wei)當前日(ri)(ri)期 如圖
處理到此，我們還需要(yao)修復(fu)一(yi)個邏輯錯誤，即(ji)(ji)組件的結(jie)束日期(qi)應該不超過(guo)當日，做法也很(hen)簡單(dan)，只需要(yao)在wxml文件中對picker的日期(qi)屬(shu)性end由(you)2017-09-01改為{{date}}即(ji)(ji)可
<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">
吐(tu)槽一下，官方(fang)的picker的還是(shi)有bug的，完全不聽start與end使喚(huan)，仍可(ke)以選任意日期，暫時(shi)不去理(li)會(hui)，代碼(ma)就(jiu)這么寫著，什么時(shi)候開發工具修復了自然(ran)可(ke)以了，畢竟是(shi)現在(zai)還只是(shi)內測(ce)，就(jiu)將就(jiu)用(yong)著。 接下來處理(li)日(ri)期組件(jian)點擊確(que)認(ren)事件(jian)bindDateChange 回到item.js文件(jian) 聲(sheng)明一個bindDateChange方法，添加如下代碼以寫(xie)回(hui)data中的date值
// 點擊日期組件確定事件
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
}
至此，已經實現集成日期picker組件。剩下的就是將它同之前的標題、類型、金額字段那樣存在json再本地setStorage存儲即可，這里不作贅述，具體可以參考本人公眾號之前發的文章《微信小程序（應用號）實戰課程之記賬應用開發》。 #1.小程序端(duan)通(tong)過微信第三方登(deng)錄，取出nickname向服務端(duan)請求登(deng)錄，成功后本(ben)地并緩存uid,accessToken 接口出處：//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: '//test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('獲取用戶登錄態失敗！' + res.errMsg)
}
}
});
}
})
緩存用戶的基本(ben)信(xin)息 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 定義一個通用的網絡(luo)訪問函數：
httpService:function(uri, param, cb) {
// 分別對應相應路徑，參數，回調
wx.request({
url: '//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，那么服務端怎么也取不到值，于是改動了服務端的取值方式，由_GET。
在Storage面板中，檢查到數據已成功存入 [2016-10-25]
#由單機版(ban)升(sheng)級為網絡(luo)版(ban) ##1.緩存accessToken，以后作(zuo)為令牌(pai)使(shi)用，uid不必緩存，由(you)服務(wu)端完成映射(she)，user/login接口(kou) 先來回顧一下(xia)app.js封裝的(de)httpService的(de)代碼(ma)實(shi)現：
httpService:function(uri, param, cb) {
// 分別對應相應路徑，參數，回調
wx.request({
url: '//financeapi.applinzi.com/index.php/' + uri,
data: param,
header: {
'Content-Type': 'application/json'
},
success: function(res) {
cb(res.data)
},
fail: function() {
console.log('接口錯誤');
}
})
}
調用的(de)是(shi)wx.request接口，返(fan)回(hui)(hui)(hui)res.data即為我(wo)們服務器返(fan)回(hui)(hui)(hui)的(de)數據，結(jie)構(gou)與wx.request返(fan)回(hui)(hui)(hui)的(de)類似，這里多一層(ceng)結(jie)構(gou)，不可混(hun)淆。 response.code,response.msg,response.data是我(wo)自己服務端定(ding)義的結構 res.statusCode,res.errMsg,res.data是微(wei)信給我們定(ding)義(yi)的結構
明白了上(shang)述(shu)關系與作了封裝后，我們調用起來就方(fang)便了，index.js中onShow寫上(shang)如下代碼
app.httpService(
'user/login',
{
openid: userInfo.nickName
},
function(response){
//成功回調，本地緩存accessToken
var accessToken = response.data.accessToken;
wx.setStorageSync('accessToken', accessToken);
}
);
app.js onLaunch調用如下代碼，在(zai)程序啟動(dong)就登(deng)錄與緩(huan)存accessToken。 之(zhi)所以不在index.js中(zhong)調用(yong)登錄，是因為app launch生(sheng)命周期(qi)較前者更前，accessToken保證要加載(zai)item/all之(zhi)前生(sheng)成并緩(huan)存到本地 |
#步驟
