微信小程序（應(yīng)用號）實戰(zhàn)課程之記賬軟件開發(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>
如圖
從圖中可以看出：
于是我們需要在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ù)端的取值方式，由_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)
明白了上述關(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之前生成并緩存到本地 |
#步驟
