小程序1月9正式發(fā)布了，我手機朋友圈被各種關(guān)于小程序的消息霸屏了。說實話我也不知道小程序以后會是怎么樣，不過出于好奇，恰巧今天有時間去簡單了的把公司的項目用小程序簡單實現(xiàn)了，只是實現(xiàn)了列表，就當(dāng)試試水。
參考
小程序簡易教程
先來張效果圖
不得不說實現(xiàn)起來還是非常方便的
實現(xiàn)
簡單說明：小程序中app.js 和app.json是必須要的，在app.js中處理程序的生命周期相關(guān)，app.jaon 頁面配置。頁面也是有.wxml、.json 為必須有.wxss相當(dāng)于h5中.css，在.js中處理頁面交互邏輯和數(shù)據(jù)更新
1、我們首先搭建簡單的tab框架，在app.jason中實現(xiàn)
首先設(shè)置頁面的路徑，我們有三個頁面首頁、視頻、我的
"pages": [
"pages/home/home",
"pages/video/video",
"pages/mine/mine"
],
然后是對tabBar的設(shè)置
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首頁",
"iconPath": "images/home .png",
"selectedIconPath": "images/reload.png"
},{
"pagePath": "pages/video/video",
"text": "視頻",
"iconPath": "images/playn.png",
"selectedIconPath": "images/home_play.png"
},{
"pagePath": "pages/mine/mine",
"text" : "我的",
"iconPath": "images/mine.png",
"selectedIconPath": "images/selectedMine.png"
}],
"selectedColor": "#AF262A",
"borderStyle": "white"
}
tabBar屬性的介紹
list中屬性的介紹
然后就是各個頁面的實現(xiàn)的，先看下基本的結(jié)構(gòu)圖
推薦，文件命名和文件夾命名保持一致。
2、首頁新聞列表的實現(xiàn)
首先要獲取到新聞數(shù)據(jù)，然后把數(shù)據(jù)展示出來。
問題1：怎么發(fā)網(wǎng)絡(luò)請求？
使用微信的API，他都封裝好了，返回都是解析好的數(shù)據(jù)，直接就能用非常方便。
loadOriginData:function(isLoadMore){
var _this = this;
_this.setData({
hiddenLoading:false
})
wx.request({
url: 'http://api.myxianwen.cn/1/news/getlist',
data: {
"app_id":"104",
"equip_type":"1",
"num":"10",
"start":"0",
"t_login":"0",
"timestamp":"0",
"type_id":"0",
"uid":"60",
"updown":"0",
"uuid":"6E00C8BD-50D3-4672-8641-D45B3081E3B4",
"version":"3.7.0"
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 設(shè)置請求的 header
success: function(res){
// success
console.log(res.data)
if (isLoadMore) {
_this.setData({
newsList : _this.data.newsList.concat(res.data.data),
})
console.log("這是上拉加載更多的調(diào)用")
}else {
_this.setData({
newsList : res.data.data,
})
}
},
fail: function() {
// fail
_this.setData({
hiddenLoading:false
})
wx.stopPullDownRefresh()
},
complete: function() {
// complete
console.log("掉用完成了")
_this.setData({
hiddenLoading:true
})
wx.stopPullDownRefresh()
}
})
}
簡單說明：a、url即請求的url
b、data中請求需要拼接的一些參數(shù)
c、method是請求的方法GET、POST等
d、success 請求成功回調(diào)
e、fail 請求失敗回調(diào)
f、complete請求完成回調(diào)
這里我開始寫的時候遇到一個坑，就是this在網(wǎng)絡(luò)請求成功回調(diào)中直接使用，data也不能直接賦值要用setData方法。
后面就是列表的實現(xiàn)，小程序的<block>標(biāo)簽實現(xiàn)和iOS中的tabview類似，這里就不貼代碼了。實現(xiàn)起來也是比較簡單。
作為一個開發(fā)者，我想說說我對小程序的看法，我們用安卓手機分析它的實現(xiàn)其實是個webview，然后微信對html5進(jìn)行了一些他們封裝，盡管也可以調(diào)用相冊相機錄音等功能，但時間最多為60s.不過微信也提供很多Api，封裝了一些常用的組件，讓開發(fā)更加簡單和快捷。還有可能微信也做了些優(yōu)化，是它體驗比html5要好。所以它和原生的體驗還是差距還是有的，個人覺得大家都這么熱捧小程序主要是看重微信的巨大流量。可以問題來了，每次我要用個服務(wù)我都要打開微信，掃一掃或者搜索，本來我可以一步完成的操作完成硬是要我兩步操作，這里面是有很多時間成本的。我反正暫時不習(xí)慣，除非小程序真的滲透到生活的各個角落，那可能會是另外一說。
似乎扯多了，還是打卡下班，祝大家周末愉快！！
