項目結構：（分為全局結構和局部結構）
微信自動生成項目
==>全局結構：
上述結構是微信小程序創建項目時，自動生成的項目結構，其中的app.json、app.js和app.wxss都是全局文件，即在上述三個文件不管修改的是樣式還是動作，都可以在全局中調用。
app.js：為動作文件，定義相關js函數
app.json：為環境文件，配置相關環境（注：app.json文件內容即使為空，也必須加" { ?} "符號，否則報錯）
app.wxss：為樣式文件，相當于css文件
utils文件：可以理解為時間插件文件，輸出相關時間格式
==>局部結構：（創建單頁）
快速創建單頁結構的方法：在全局的app.json文件中，定義如下變量然后保存，即可自動創建單頁結構。
上述pages數組中，單頁的申明（哪個路徑排在第一，刷新后呈現的為這個路徑文件）
單頁結構
sign.wxml：為結構文件，相當于html文件
js、json、wxml、wxss：
==>js：
狀態機
==>app.json（全局環境配置）：
定義頁面底部目錄欄目
...,
"tabBar": {
"list": [{
"pagePath": "pages/index/index",//路徑文件
"text": "效果圖",//目錄名稱
"iconPath": "../../images/icon_API.png",//圖標（未被選中）
"selectedIconPath": "../../images/icon_API_HL.png"http://圖標（被選中）
},{
"pagePath": "pages/todos/todos",
"text": "TodoApp",
"iconPath": "../../images/icon_API.png",
"selectedIconPath": "../../images/icon_API_HL.png"
},{
"pagePath": "pages/Me/index",
"text": "Me",
"iconPath": "../../images/icon_API.png",
"selectedIconPath": "../../images/icon_API_HL.png"
}]
}
}
列表渲染 wx:for
官網手冊
index.js
index.wxml
效果圖
條件渲染 wx:if
wx:if
wx:elif
wx:else
5}} >1
2
3
...
app.json
"networkTimeout":設置超時時間
"debug":設置是否開啟debug模式(調試信息以info的形式給出)
注:page.json只能設置window相關配置項目，無需鞋window這個關鍵字
app.js(邏輯層)
1.添加app和page方法，進行程序和頁面的注冊
2.增加getApp和getCurrentPage方法，分別用來獲取App實例和當前頁面棧
App({ })只能存在一個(在app.js文件里面)
getApp( )在其它js文件上調用獲取上述App內定義的方法或變量
常用api
wx.navigateTo()
wx.redirectTo()
wx.setNavigationBarTitle()
wx.navigateBack()
wx.stopPullDownRefresh()
wx.showNavigationBarLoading()
wx.hideNavigationBarLoading()
wx.showToast()
wx.getStorageSync()
數據請求匯總
get請求
function fetchGet(url, callback) {
// return callback(null, top250)
wx.request({
url: url,
header: { 'Content-Type': 'application/json' },
success (res) {
callback(null, res.data)
},
fail (e) {
console.error(e)
callback(e)
}
})
}
post請求
function fetchPost(url, data, callback) {
wx.request({
method: 'POST',
url: url,
data: data,
success (res) {
callback(null, res.data)
},
fail (e) {
console.error(e)
callback(e)
}
})
}
下拉刷新：
getData: function() {
var that = this;
var tab = that.data.tab;
var page = that.data.page;
var limit = that.data.limit;
var ApiUrl = Api.topics +'?tab='+ tab +'&page='+ page +'&limit='+ limit;
that.setData({ hidden: false });
Api.fetchGet(ApiUrl, (err, res) => {
//更新數據
that.setData({
postsList: that.data.postsList.concat(res.data.map(function (item) {
item.last_reply_at = util.getDateDiff(new Date(item.last_reply_at));
return item;
}))
});
setTimeout(function () {
that.setData({ hidden: true });
}, 300);
})
}
上拉加載：
lower: function() {
console.log('滑動底部加載', new Date());
var that = this;
that.setData({
page: that.data.page + 1
});
if (that.data.tab !== 'all') {
this.getData({tab: that.data.tab, page: that.data.page});
} else {
this.getData({page: that.data.page});
}
}
})
關鍵詞匯總
this.data.變量名
this指向page({ ?})
.data指向內部的data : { }
變量名指向聲明的變量名
e.detail.value
指向控件input的值
e.target.dataset.變量名
e.currentTarget.dataset.變量名
注意：上述的target和currentTarget存在區別，currentTarget指向當前控件，target可能指向向上冒泡的控件
