微信小程式專案開發總結經驗分享

2022-09-24 02:48:07 字數 1795 閱讀 2150

前言

微信小程式的開發,我應該算是趕上了第一波,所以,自然是一路踩坑而來 =。=

一月九日,小程式正式上線,早早地就到公司開始改bugs~

前不久,我又對這個專案重構了一版~

現在來做個專案總結剛好,就給我踩過的那些坑留點紀念吧~

開發時,切忌將小程式簡單地想象成我們web開發中的css、js、html,否則···

微信小程式的開發,實際上是在微信封裝下對專案的二次開發了。很多很多的規則我們必須要去遵守,其中很明顯的就是標籤元素。很多標籤會讓我們很自然地和html中的標籤元素對應起來,建立這種對應關係確實能夠幫助我們更快地入手小程式,但是一定要記得不要把它們等同起來,謹記它們是有區別的。還有,開發之前,記得看看官網文件上的q&a,預熱下。

注:1.以下標題是按照微信開發工具上的選項進行劃分的。

2.總結還在一步步地完善中,每天一點點~

3.歡迎留言指正錯誤,知識共享~

專案1.開發環境不校驗請求網域名稱以及tsl版本

小程式有嚴格的網域名稱檢查規則,規定使用https。

所以,當你的開發環境是http時,記得將這個選項勾上,不然你是無法請求到介面資料的。

2.開啟es6轉es5如果有用es6語法的話,記得勾上。

編輯編輯,也就是開發咯。

1.檔案引用

在小程式中,它引入了模組機制,我們可以在頁面中引入我們需要的模組,但是,這種引入是單向的。比如:

a檔案:

var b = require('../libs/b.js')

那我們在b檔案中如果這樣:

var a = require('../libs/a.js')

開發者工具是會報錯的,目前我的解決方案也只是避免這種引用,直接將自己需要的部分放在同乙個檔案中。

2.1)通過background屬性引用

沒錯,我們可以在開發工具上看到效果挺正常的,但是,開啟手機測試,ops,不見了。

在官方文件上有明確規定,本地資源是無法通過css獲取的。

所以,當你決定用background-image屬性的時候,你可以:

a=> 使用網路

b=> base64

2)通過image標籤src屬性引用這種方式的引用沒有資源**方式的限制,可以引用本地資源。

除錯除錯的時候最大的感悟是,無論是開發者工具上,還是手機上,記得先把快取刪乾淨再測。而且出現bugs的時候盡量多測幾次,進行反覆確定。不然的話,你可能會發現,本來測好的功能又出現問題了,或者是本來有問題的部分又沒有問題了,所以,測吧測吧,多測幾次。

1.頁面載入,前端向後台傳送資料請求。在開發階段,我們在進行對請求結果的業務處理時,自然是邊除錯邊修改的,有時候我們會遇到:statuscode沒處理好而導致前端不斷向後台傳送請求,然後,卡機了。當然,在微信開發者工具上,也是。不過,除此之外,它還會產生另外乙個***,就是可能連小程式本身api上的請求都請求不了了。發生這種情況的話,你就喝喝茶,做做眼保健操吧,給它點時間,它會好起來的。

2.**上傳報錯。

手機預覽小程式。在預覽之前,我們是需要在開發者工具上上傳**的,說說我遇到的報錯把:

1)明確提示我的**中哪乙個檔案有錯誤

這個比較好辦,就是直接找到對應檔案,結合控制台,改好之後再上傳**。

2)錯誤提示乙個不知道什麼原因的error

遇見這種情況,我的解決方案是:不用糾結,關掉我的開發者工具,開啟,再上傳。貌似有點無厘頭,但是成功機率很高,不信你可以試試。

其他1.開發過程中,記得時刻關注官方文件上的更新日誌,保持自己的開發工具是最新的。這是避免跳坑的一**寶,不過現在還好了,剛開始的時候是真坑~

2.學會在開發者社群上找答案,沒有答案就去提問,會有人回答你的。

微信小程式專案開發教程

1.目錄結構 test page index index.js index.json index.wxml index.wxss onlaunch function onshow function onhide function globaldata debug true page containe...

微信小程式開發 總結1

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

微信小程式小技巧分享

1.滾動載入資料方式 在滾動分頁載入資料的時候,通常做法是定義乙個資料arr,下滑觸發載入更改請求介面獲取分頁資料arr2,然後將arr2合併到arr,重新setdata到arr。這樣的操作方式是每次都全量覆蓋,當資料量過大時,會造成渲染載入卡頓問題。arr陣列結構為 舊方法 page 上拉觸底方法...