1. 程式人生 > >微信小程式前端開發踩坑(一)

微信小程式前端開發踩坑(一)

之前由於不瞭解微信小程式的整個的執行開發機制,走了很多的彎路,腦子靈光的可能不會遇到,這個主題系列的帖子希望可以幫助到像我一樣理解能力慢的孩子。

不論是開發微信小程式還是說學習任何一門程式語言,最重要的一點是要夯實基礎,不是隻是去看看概念,從hello word開始就要好好的去對待每一行程式碼,軟工是工科,工科就要多動手,每一位走的長遠的程式設計師都不會缺少匠心精神。

1.Q:一個appid只能建立一個小程式專案嗎?我寫毀了怎麼辦?我把小程式開發者工具自動建立的快速啟動模板不小心刪掉了怎麼辦??

   A:一個appid是可以用來建立多個本地工程的,如果你在本地建立的工程是一個空的工程(也就是一個空的資料夾)的話,小程式開發者工具將會進行自動識別,在下方會出現預設勾選快速啟動模板,或者是雲啟動模板,當然你也可以選擇照著開發文件去擼程式碼,前者是提高工作效率,後者是鞏固自身專業素質。

放幾個有用的連結:

微信開放社群:https://developers.weixin.qq.com/community

微信小程式官方開發文件:https://developers.weixin.qq.com/miniprogram/dev/

知乎小程式社群專欄:https://zhuanlan.zhihu.com/wxapp-union

如果說看不懂官方文件(這種情況真的有)當然只是一開始,網上有很多別人理解過後轉化成他的理解 並且很形象的文章也很多,簡書上很多好的開發者,這裡我放一個我很喜歡的CSDN博主的文章:https://blog.csdn.net/aoaoxiexie/article/details/53670236他的教程是最詳細的了,我相信你一定可以看得懂,起步完成了,後面的官方文件你一定能看的懂。

做程式設計師必備的素養是面向谷歌和百度程式設計,不僅要一開始學會使用搜索引擎快速的找到對我們最有用的資訊,對於前端開發者來說,控制檯部分也很重要,

Chrome開發者工具中文文件:http://www.css88.com/doc/chrome-devtools/

掘金的前端開發文章很多很精:https://juejin.im/

segmentfault:https://segmentfault.com/(這個社群大佬能力很強且在裡面問一些伸手黨的問題一定會被隱藏,所以一定要有自己先解決問題,再問其他人的習慣。)

還有就是在公司工作的時候,大家每個人的時間經歷都有限,如果你是萌新實習生,想要請教前輩問題可怎麼辦??

第一點你必須要明確的是,沒有人有義務去幫助你,職場不是水滸傳,不講義氣,只講實力。

第二點你要學會怎麼問問題,你可能一開始沒辦法完全表達出來你想問的,那先打個草稿,我想要什麼樣子的結果,我用什麼樣的方式去實現了它,結果與預想的哪裡不一樣,我為了和預想一樣我做了什麼樣的改正,最終沒有成功,在這個過程全程要看控制檯的部分,小程式和靜態頁面不同的是,很有可能快速開發模板給你建立了一系列的“現成”的東西,也包括一個全域性的樣式:app.wxss這個檔案你一定要注意,把不需要的樣式在開發前就刪減掉,以免之後開發過程中出現各種奇怪的詭異頁面效果。

與後端溝通的時候,一般是後端為我們前端提供一個https介面,需要我們去請求它並且拿到一個我們想要的資料出來,這個時候後端會告訴你,我需要你前端來給我提供什麼樣子的資料,我返回給你200OK,以及我返回給你前端你前端需要的資料,這個過程和Ajax是一樣的,但是如果你不明白的話,先去上網搜尋資源,然後去查詢原因,你要用console.log(res.statusCode)來首先看一下請求是否成功,如果成功了介面繼續報錯,你就要考慮以下你的appid和後端的appid是否一致了。

2.Q:我在util.js裡面想寫一些適用於全域性的函式,但是在其他的頁面中去使用util.方法名 卻告訴我:Function is not defined 怎麼辦???

A:這個情況十有八九就是你忘記在moudle.exports這個用來對外暴露接口裡忘記進行函式的介面暴露了,你不暴露別人怎麼訪問的到?? 這也是一個值得注意的地方。

3.如果你的程式碼結構還不能寫的清晰明瞭,要多加註釋,一方面是方便你多年之後的codeReview 就像你看你小時候賊醜的照片一樣,更重要的是,你是在一個團隊裡工作,你需要讓別人看懂你的程式碼,前輩想幫你check的時候,雖然程式碼寫的很噁心,但是有了註釋,會降低一些不適感·····

4.寫CSS的時候不要死扣用一種方法,不要覺得會了一種方法就哪哪都用,一定要靈活,層級結構要從一開始給你美術圖之後就規劃正確。以及要多與你的產品經理進行溝通。

5.如果我們的專案需要寫一個海報分享功能怎麼辦?

網上的 幾乎教程都是用canvas標籤來畫,這是正確的路子,但是你如果是新手,數學還不是很好,canvas就會降低工作效率了,這個時候你的解決辦法是:用HTML寫出一個靜態頁面給到後端,後端把你的資料進行繫結,也就是把資料變活(每天的海報都不一樣的情況),這個時候你就用他給你的圖片連結介面去做儲存到相簿的邏輯,與此同時,你在前端把分享圖用css寫出來,這個目的是為了提高使用者的使用感受,載入的時候會很快。