小程序模板網(wǎng)

微信小程序半周開發(fā)問題總結(jié)

發(fā)布時間:2018-04-18 09:58 所屬欄目:小程序開發(fā)教程
作者:Yitim,來自原文地址

新產(chǎn)品要做一個微信小程序,不想吐槽老板沒給任何準(zhǔn)備就給出了需求和原型圖,好像默認小程序閉著眼睛就可以很順利開發(fā)好。現(xiàn)在半周下來(五一結(jié)束開始到今天)完成了差不多所有的界面,網(wǎng)絡(luò)請求部分還跟服務(wù)端兄弟耗著:) 。總結(jié)下來小程序的開發(fā)速度肯定不會慢,門檻不高,缺點則在于限制非常多,并且其本質(zhì)終究是換了毛皮的web開發(fā),或多或少存在很多web app的通病,即使微信幫助提供了很多原生支持,這還是犧牲了很多開發(fā)自由度換來的。寫本文的目的不在小程序開發(fā)的學(xué)習(xí)上,畢竟筆者一直都只聽聞小程序大名,使用起來不過三四日,心得與教學(xué)談不上,坑多少是踩了一些,下面主要還是列出目前遇到的一些問題點和吐槽。

1. 資源路徑

之前出現(xiàn)過 開發(fā)工具中在wxss內(nèi)定義元素的背景圖background-image使用url('')路徑時只能使用相對路徑否則會找不到資源,但其實只有使用絕對路徑'/'開頭才能正確在手機上顯示。

在頁面的腳本中引入其他js腳本時只能使用相對路徑。

2. 富文本需求

業(yè)務(wù)需要使用富文本的,目前找不到完美使用富文本的辦法,只好改用截圖來呈現(xiàn)。

3. 樣式編輯

每個頁面都有自己的wxss,用來編輯本頁的樣式,其中<page>相當(dāng)于<body>,每個頁面的底色以及底層尺寸都哦定義到page{}里就好。

并且目前用的尺寸單位都是rpx,這尺寸有點小,750rpx才等于iphone6的屏幕寬度。

view是個比較通用的標(biāo)簽,拿來代替div。

4. swiper組件
可以用來實現(xiàn)輪播圖片組件。這個比較順利因為不會有什么高級需求顯示圖片能滑動切換就足夠
用來做支持左右滑動切換的界面時會有一些問題

  • swiper-item內(nèi)部的滾動需要注意 普通的view標(biāo)簽小程序天然實現(xiàn)了safiri下的平滑滾動,但在swiper中則無效,手動給swiper-item加上 -webkit-overflow-scrolling: touch 且還必須加上overflow-y: auto
  • swiper有兩種改變選項卡的方式,一是用手滑來滑去,二是動態(tài)更改current節(jié)點的值為需要滾動到的選項卡的索引
  • 選項卡更改流程為: 用手左右滑動,滑動結(jié)束后能觸發(fā)更改事件,在這里可以執(zhí)行新選項卡的數(shù)據(jù)渲染邏輯。
  • 手動點擊某個切換按鈕,觸發(fā)選項卡切換,切換完成后也會觸發(fā)更改事件。更改事件都是在切換動畫完全結(jié)束才會觸發(fā),也就是說手一直拖著不放則不會觸發(fā)。
  • 數(shù)據(jù)量比較多時至少開發(fā)工具上會有極大性能問題,卡到爆炸,手機端還好點,但是還是擔(dān)憂,給wx:for渲染的節(jié)點再加個wx:key安慰一下自己。

5. 界面的事件交互

wxml里不能通過數(shù)據(jù)綁定來觸發(fā)函數(shù)了,那界面要如何與腳本交互呢。微信給出的方案是通過其提供的很多個事件,包括bindtap,bindchange這些東西,這些事件節(jié)點傳入自己定義的函數(shù),在腳本中再從自帶的event參數(shù)中獲取本次事件觸發(fā)的一系列參數(shù)。尷尬的事情就是不能很自由的綁定參數(shù),全都得通過event參數(shù)來獲取。比如界面上有一個節(jié)點:

綁定了makeOrder函數(shù)后并不能直接傳入?yún)?shù),只能在腳本中定義makeOrder函數(shù)時在其自帶的參數(shù)中獲取數(shù)據(jù),獲取的辦法就是在節(jié)點上多加一個data-前綴的屬性,此屬性會被視為參數(shù)傳遞給這個事件回調(diào)。就像下圖這樣:

讓我感覺自己在寫jQuery。

 

6. scroll-view組件

至今沒看懂真實完美用法。

只能感受到垂直方向的滑動,通過scroll-x或scroll-y節(jié)點決定是橫向滾動還是縱向滾動,但目前的真實效果是scroll-x下并不能橫向滾動,下級的每個view同時只會顯示一個,并可以更改scroll-into-view節(jié)點來滾動到指定id的下級view中,這種場景下還算完美實用,相當(dāng)于不支持手勢滑動的縱向swiper。
scroll-y下滾動仍是縱向的,但是不再是只有一個view能被顯示,而是所有view都能自由的滾上滾下,更改scroll-into-view則可以直接滾動到對應(yīng)id的view,這種情況下這個組件也就很長的介紹網(wǎng)頁會用用吧想不到其他合適的場景。
還有就是scroll-view下的overflow、height等屬性也值得調(diào)整。

 

7. 數(shù)據(jù)綁定
有幾個蛋疼的點。比如說很多節(jié)點比如wx:for這些里面綁定的數(shù)據(jù)也都必須使用{{}}包圍,否則視為字符串。
比如說即使是{{}}包圍了,也不能綁定函數(shù),這直接導(dǎo)致數(shù)據(jù)在試圖層面的格式化稱為不可能的事情,想要格式化一個時間數(shù)據(jù)的話,就必須在js里遍歷數(shù)據(jù)先格式化好時間字符串。。。這實在是不太舒服,可能是angular的pipe能力用爽習(xí)慣了。
數(shù)據(jù)的更新給出的方案是手動調(diào)用this.setData。。。雖說this.setData({'key1.key2', value})這樣詭異的方式也可以,還是感覺自己在用jQuery,從無限D(zhuǎn)OM操作改為無限JS操作了。

 

8. 消息提示API

目前的消息提示框類型就只有一種,即使圖標(biāo)可以自定義,好歹把模擬安卓原生的Toast給提供了嘛。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23631.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢