Moustache：我的微信小程序入門(mén)踩坑之旅
前言
小程序出來(lái)也有一段日子了，剛出來(lái)時(shí)也留意了一下。不過(guò)趕上生病，加上公司里也有別的事，主要是自己犯懶，就一直沒(méi)做。這星期一，趕緊趁著這股熱乎勁，也不是很忙，終于磨磨唧唧的寫(xiě)了個(gè)小demo，（當(dāng)然還有好多接口沒(méi)有使用）。
預(yù)計(jì)閱讀時(shí)間：5min
正文
介紹
小程序的框架，挺像Vue的。
wxml
|
1
2
|
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
|
js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
}
// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})
|
開(kāi)發(fā)者通過(guò)框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進(jìn)行了綁定，所以在頁(yè)面一打開(kāi)的時(shí)候會(huì)顯示 Hello WeChat! 當(dāng)點(diǎn)擊按鈕的時(shí)候，視圖層會(huì)發(fā)送 changeName 的事件給邏輯層，邏輯層找到對(duì)應(yīng)的事件處理函數(shù) 邏輯層執(zhí)行了 setData 的操作，將 name 從 WeChat 變?yōu)?MINA，因?yàn)樵摂?shù)據(jù)和視圖層已經(jīng)綁定了，從而視圖層會(huì)自動(dòng)改變?yōu)?Hello MINA!
工具： 微信 web 開(kāi)發(fā)者工具 我一般在這里只預(yù)覽效果用。
app.json
app.json文件來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
改變pages里配置，會(huì)更改啟動(dòng)程序時(shí)的主頁(yè)面。 window是設(shè)置頁(yè)面的窗口表現(xiàn)，包括狀態(tài)欄，導(dǎo)航欄顏色 等等。 tarbar是底部tab欄的表現(xiàn)。 官方還有 networkTimeout和 debug選項(xiàng)，在這里沒(méi)有配置。 networkTimeout可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
{
"pages": [
"pages/index/other",
"pages/other/index",
"pages/logs/logs",
"pages/login/login",
"pages/douban/douban",
"pages/douban/user",
"pages/other/comment"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3CB371",
"navigationBarTitleText": "Ed Glayxe",
"navigationBarTextStyle": "light",
"backgroundColor": "#3CB371"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "images/tabList/my_a.png",
"selectedIconPath": "images/tabList/my_b.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/tabList/log_a.png",
"selectedIconPath": "images/tabList/log_b.png"
}, {
"pagePath": "pages/other/other",
"text": "段子",
"iconPath": "images/tabList/joke_a.png",
"selectedIconPath": "images/tabList/joke_b.png"
}, {
"pagePath": "pages/login/login",
"text": "登錄",
"iconPath": "images/tabList/Login_a.png",
"selectedIconPath": "images/tabList/Login_b.png"
}, {
"pagePath": "pages/douban/douban",
"text": "用戶列表",
"iconPath": "images/tabList/user_a.png",
"selectedIconPath": "images/tabList/user_b.png"
}]
}
}
|
頁(yè)面文件
app.js、app.json、app.wxss這三個(gè)文件是必不可少的文件。.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會(huì)讀取這些文件，并生成小程序?qū)嵗＿@些都是公共文件。 在我的wxss里引入了weui的wxss 有的頁(yè)面使用了它的UI。
Pages 里面是對(duì)應(yīng)的頁(yè)面。每個(gè)對(duì)應(yīng)的頁(yè)面里都有 相應(yīng)的js wxml wxss文件。對(duì)文件進(jìn)行配置。
在common文件夾了 寫(xiě)了一個(gè)評(píng)論template 嘗試了一下引入模板。 在utils里封裝了一下內(nèi)部的方法。
問(wèn)題
在小程序里支持flex布局，還是挺不錯(cuò)的。 我有時(shí)布局的時(shí)候都給寫(xiě)個(gè)html文件，在瀏覽器里看看樣式。然后照搬到微信小程序里。但是我寫(xiě)的頁(yè)面并不復(fù)雜。并不能完全的發(fā)現(xiàn)更多的不同。 在小程序里試圖層為view ，但它并不像div一樣，view 和text在一起會(huì)重疊。我覺(jué)得相當(dāng)于 div和span。 還有一些CSS樣式并不支持。
數(shù)據(jù)渲染：
這個(gè)用flex布局寫(xiě)的，頁(yè)面比較簡(jiǎn)單。
我記得昨天有個(gè)東西我找了好久，就是 “enablePullDownRefresh”: true。允許用戶下拉。 一開(kāi)始我以為這是自己寫(xiě)的。這是配置在json文件里。官方的文件幾乎沒(méi)怎么看。。然后就尷尬了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
var util = require("../../utils/util.js");
var app = getApp();
Page({
data: {
textDataList: [],
tempid: 0,
lastid: 0
},
onLoad: function() {
util.alertLoading('數(shù)據(jù)加載中', 2000);
this.loadData();
},
refreshData: function() {
util.alertLoading('刷新中', 2000);
this.loadData();
},
loadData: function() {
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
tempid: newData.list[0].id
})
console.log(that.data.tempid);
})
},
onReachBottom: function() {
util.alertLoading("加載中!", 2000);
console.log("加載這個(gè)沒(méi)做 = =！");
},
onPullDownRefresh: function() {
util.alertLoading("刷新中！", 1000);
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
lastid: newData.list[0].id
})
console.log(that.data.lastid);
});
if (this.data.lastid === this.data.tempid) {
util.alertSuccess("已經(jīng)是最新了", 1000);
}
}
})
|
微信小程序思維導(dǎo)圖（來(lái)源于網(wǎng)絡(luò)）
后續(xù)
快下班了，其實(shí)寫(xiě)之前我想寫(xiě)的更詳細(xì)一點(diǎn)，但更多的介紹我想沒(méi)有比官方更清楚的。
我覺(jué)得最好的學(xué)習(xí)方式就是擼一遍代碼，比看10個(gè)demo有用的多。
時(shí)間倉(cāng)促，頁(yè)面很簡(jiǎn)單。也希望把你的demo分享給我互相學(xué)習(xí)。感謝你的閱讀，
Bye。
