微信小程式半周開發問題總結

2022-09-24 02:30:09 字數 1886 閱讀 8894

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

1. 資源路徑

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

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

2. 富文字需求

業務需要使用富文字的,目前找不到完美使用富文字的辦法,只好改用截圖來呈現。

3. 樣式編輯

每個頁面都有自己的wxss,用來編輯本頁的樣式,其中相當於,每個頁面的底色以及底層尺寸都哦定義到page{}裡就好。

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

view是個比較通用的標籤,拿來代替div。

4. swiper元件

可以用來實現輪播元件。這個比較順利因為不會有什麼高階需求顯示能滑動切換就足夠

用來做支援左右滑動切換的介面時會有一些問題

5. 介面的事件互動

wxml裡不能通過資料繫結來觸發函式了,那介面要如何與指令碼互動呢。微信給出的方案是通過其提供的很多個事件,包括bindtap,bindchange這些東西,這些事件節點傳入自己定義的函式,在指令碼中再從自帶的event引數中獲取本次事件觸發的一系列引數。尷尬的事情就是不能很自由的繫結引數,全都得通過event引數來獲取。比如介面上有乙個節點:

繫結了makeorder函式後並不能直接傳入引數,只能在指令碼中定義makeorder函式時在其自帶的引數中獲取資料,獲取的辦法就是在節點上多加乙個data-字首的屬性,此屬性會被視為引數傳遞給這個事件**。就像下圖這樣:

讓我感覺自己在寫jquery。

6. scroll-view元件

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

只能感受到垂直方向的滑動,通過scroll-x或scroll-y節點決定是橫向滾動還是縱向滾動,但目前的真實效果是scroll-x下並不能橫向滾動,下級的每個view同時只會顯示乙個,並可以更改scroll-into-view節點來滾動到指定id的下級view中,這種場景下還算完美實用,相當於不支援手勢滑動的縱向swiper。

scroll-y下滾動仍是縱向的,但是不再是只有乙個view能被顯示,而是所有view都能自由的滾上滾下,更改scroll-into-view則可以直接滾動到對應id的view,這種情況下這個元件也就很長的介紹網頁會用用吧想不到其他合適的場景。

還有就是scroll-view下的overflow、height等屬性也值得調整。

7. 資料繫結

有幾個蛋疼的點。比如說很多節點比如wx:for這些裡面繫結的資料也都必須使用}包圍,否則視為字串。

比如說即使是}包圍了,也不能繫結函式,這直接導致資料在試圖層面的格式化稱為不可能的事情,想要格式化乙個時間資料的話,就必須在js裡遍歷資料先格式化好時間字串。。。這實在是不太舒服,可能是angular的pipe能力用爽習慣了。

資料的更新給出的方案是手動呼叫this.setdata。。。雖說this.setdata()這樣詭異的方式也可以,還是感覺自己在用jquery,從無限dom操作改為無限js操作了。

8. 訊息提示api

目前的訊息提示框型別就只有一種,即使圖示可以自定義,好歹把模擬安卓原生的toast給提供了嘛。

微信小程式開發 總結1

開放平台和公眾平台的區別 開放平台 介面的平台 開放的api呼叫 後端程式設計師是開放平台開發的主力軍 公眾平台 前端程式設計師是公眾平台開發的主力軍 小程式出現的目的 小程式適合的業務場景 適合做 用完即走 的應用 如 點外賣,打車,代價,共享單車,購物等 小程式的基本元件 乙個元件通常包括 開始...

微信小程式開發

一 開發準備 二 開發工具的使用 編碼目錄結構 1 wxml的功能 資料繫結 資料繫結使用 mustache 語法 雙大括號 將變數包起來。列表渲染 wx for 在元件上使用 wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。block wx for 類似 block w...

微信小程式開發 微信繫結

官方api提供的request請求的url wx.login 請求引數 傳送請求 解析相應內容 換成json物件 jsonobject json jsonobject.fromobject sr 獲取會話金鑰 session key string session key json.get sessi...