最近微信的小程序也是火的的不行，畢竟那潛在的8億用戶影響還是巨大的。想起了小程序剛開始時傳爆朋友圈的那張長截圖。哈哈，博主本身就是Android開發(fā)，現(xiàn)在也研究了一段時間的小程序，現(xiàn)在把學(xué)習(xí)中的成果和經(jīng)驗分享一下。
先來張效果圖吧
項目的數(shù)據(jù)使用的是在聚合數(shù)據(jù)上申請的影視資訊接口。分享是件好事兒源碼github地址
影訊
資源鏈接
分享一下學(xué)習(xí)中用到的工具和資料，建議大家先了解微信的官方文檔，沒有js和css開發(fā)經(jīng)驗的同學(xué)可以上W3School了解一些基本的語法(博主也是邊寫demo邊上網(wǎng)站查詢的)。界面設(shè)計可以學(xué)習(xí)下flex布局，有點像Android中的線性布局,但更強大一點。彈窗效果可以了解一下css中的定位。
官方文檔
開發(fā)工具下載
官方Demo源碼下載
設(shè)計指南
flex布局介紹
項目中遇到的問題
這是博主開發(fā)中遇到的一些問題，很多都是一些細節(jié)，開發(fā)中多注意一點。
js代碼的引入
引入模塊化的js代碼使用的是相對目錄，
../類似于cd ..返回上一層目錄
var netUtils = require('../../../utils/netUtils.js')
事件的響應(yīng)處理和傳值
事件列表
| 類型 | 觸發(fā)條件 |
|---|---|
| touchstart | 手指觸摸 |
| touchmove | 手指觸摸后移動 |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動作結(jié)束 |
| tap | 手指觸摸后離開 |
| longtap | 手指觸摸后，超過350ms再離開 |
事件分類
| 事件 | 聲明方法 | 作用 |
|---|---|---|
| 冒泡事件 | bind+事件 | 當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞 |
| 非冒泡事件 | catch+事件 | 當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞 |
data的數(shù)據(jù)設(shè)置
- 直接修改 this.data 無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。
- 單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。
that.setData({
categoryList: that.data.categoryList.concat(categoryList),
hideLoading: true,
isLoadingMore:false
})
控件使用問題
| 控件 | 注意點 | |
|---|---|---|
| scroll-view | 如果縱向滑動，請設(shè)置固定高度 | field3 |
| swiper | swiper只識別swiper-item，其他控件將忽略 |
動態(tài)style設(shè)置
在.wxss中寫style時屬性之間注意使用
；分隔
style="color:{{item.bColor}}; width: {{lineWidth}}%"
