很多新手都喜歡一個人完成項目，從項目的規劃、搭建，到實施、debug、驗收，一整套流程都是自己純手完成，當然，對于提高自己的整體開發能力和自適應能力很有幫助。愛掏網 - it200.comok,不廢話，下面開始介紹小白如何快速完成一個微信小程序。愛掏網 - it200.com
- 首先喜馬拉雅App比較大，這里只完成部分重要功能。愛掏網 - it200.com。愛掏網 - it200.com。愛掏網 - it200.com
本文章使用的是以喜馬拉雅電臺App防成微信小程序的栗子。愛掏網 - it200.com
您可以從這篇文章中獲得以下技能點：
- 選擇項目需要的合適工具
- 如何快速分析項目功能并組成列表
- 如何快速完成并搭建一張頁面，并為復用提供良好的接口
- 如何應對短時間內無法解決的bug
- 如何規劃每一天的工作量和調整工作心態
工具是非常重要的，當然，也是很簡單的。愛掏網 - it200.com。愛掏網 - it200.com。愛掏網 - it200.com
- 編輯器（我使用的是vscode）：@Visual Studio Code
- 微信web開發者工具下載： @微信web開發者工具
- 筆記（我使用的有道云）: @有道云筆記
- github（每日提交一下）: @github
- mark Man（基本的頁面樣式標注，大公司都有專門的ps設計師，這里將就一下）mark Man
- iconfont（阿里巴巴字體圖標庫）@iconfont
- weui（微信樣式框架/這項目中css純手寫，新手建議純手寫，實在無法寫出可采用部分框架中的樣式）@WEUI
- 在這個例子中,我們只分析其中的一個小小的模塊：基本頁面及其簡單功能
- 首先，前提，喜馬拉雅電臺是一個音頻分享有聲讀物的app，由于微信小程序的限制2M，我們這個模塊不可能太大，功能也不可能齊全，所以我們要適當的縮減部分功能，--->> 縮減功能
- 然后，由于人數、時間、精力有限（單人完成），所以我們需要一個系統的流程來保證項目的順利實施。愛掏網 - it200.com--->> 資源控制
- 項目的提升空間和后續維護提供良好接口，--->>易于維護和升級
-
分類頁面
喜馬拉雅APP分類頁面原圖：
思考：該頁面采用頂部的固定搜索欄和swiper內容區倆個模塊，倆個模塊均可采用絕對定位，搜索欄flex布局，swiper內容區內swiper-item有分類，推薦，精品，直播和廣播3.1分類模塊：
- 最近瀏覽：
- flex布局，固定位置，動態更改最近瀏覽數據，初始隱藏
- 頂部推薦：
- 固定數據，固定圖片
- 娛樂、知識、生活、特色
- 相同布局，flex布局，采用wx:for循環，減少耦合和增加復用性
- swiper輪播圖
- 橫向滑動，無縫滑動
細節：
1. 整個頁面的滾動條優化：::-webkit-scrollbar { width: 0;height: 0;color: transparent; }
2. 所有文字都不能貼邊page{ width:100vh;height:100vh;overflow:hidden;background-color:#f8f8f8;padding:0 20rpx;}
3. icon采用統一樣式，增加class提供color更改顏色，提高復用、維護、可讀性 --（不過我這里使用的是圖片，初始想用圖標，但是微信引用是在無法引用http，頁面由于是靜態，所以可以使用圖片）.iconfont {width:45rpx;height:45rpx;overflow:hidden;display:inline-block;color:#fff;} .iconfont-enjoy { color:#xxx;} 自定義顏色 .iconfont-knowl { color:#xx;} 自定義顏色 .iconfont-knowl { color:#xx;} 自定義顏色
4. 字體：簡書字體，平滑抗鋸齒、font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;-webkit-font-smoothing: subpixel-antialiase;
5. swiper-item里結構最好細分模版...巴拉巴拉 - 最近瀏覽：
mark Man設計師
-
精選頁面----由于頁面過多就不演示過多不重要的流程了，如果想進一步了解的話可以去app直接觀看原圖
細節：
- 分類欄采用的的wx:for循環了數量、顏色、圖片、如果需要，可以動態膝蓋數據庫中數據，無需修改html
for="{{choiceIcon1}}" class="choice-menu__block" wx:for-item="item" wx:key="*this">
"menu-warpper__nav" url="{{item.navUrl}}">
"menu-image" style="background-color:{{item.backgroundColor}}">
"{{item.imageUrl}}" class="icon2"> {{item.title}} 復制代碼-
為所有的文字留下足夠的空間，如果空間不足：
overflow: hidden;white-space: nowrap;text-overflow: ellipsis; -
所有的圖片都預留位置，并且優化邊框和預留小圖標，如果需要直接引用class或者增加一個模塊，當然，使用vue時可以把它直接封裝template模塊
"FineQualityBac"> .FineQuality-icon{width: 18rpx; height: 18rpx; position: absolute; left: -35rpx; top:5rpx; transform: rotate(-45deg);} .FineQualityBac{width: 0; height: 0; border-left:40rpx solid #ff4612; border-bottom:40rpx solid transparent; position: absolute; left: 0; top: 10rpx;} 復制代碼"FineQuality-icon" src="../images/recommend/皇冠.png"> -
所有的循環都是用block塊標簽包裹循環，便于測試和維護
-
每個模塊之間沒有直接聯系，解耦方便
-
半像素問題：
.xxx:after{ content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid #888; top:1px; left:-1px; -webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0; -webkit-transform: scale(0.5, 0.5);-ms-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } 復制代碼 -
以數據為中心的微信小程序缺陷：css的用戶體驗不是很好，看圖說明：
原圖
小程序
后期優化空間：
-
圖片區域如果未加載成功可以顯示背景圖，使用js控制每張圖片的加載，如果未成功加載則顯示一張未顯示圖片或者icon
-
其余頁面
更多頁面就不多顯示了，懶...
- 頁面就是一個基本結構和一堆模塊外加js交互組合起來的。愛掏網 - it200.com快速完成一張復雜的頁面只需要：繪制基本架構、增加功能模塊、js交互三部就能完成。愛掏網 - it200.com1. 繪制基本架構：拿到設計稿，第一步看頁面的基本構造，這時細節不重要，看總體架構，增加合適的class命名格式，這樣可以為內部的模塊提供合理的class命名格式，避免class混亂而造成頁面樣式混亂，維護css樣式麻煩
- 一定要打標注，在大的模塊中一定要注明標注，css,html,js,都需要標注特定功能提示。愛掏網 - it200.com如果需要，你可以繪制一張樹形圖，我認為圖可以把一切復雜繁瑣的事情抽絲剝繭成小小的步驟，而樹形圖是最直觀的體現。愛掏網 - it200.com
- 微信小程序的各種限制阻遏了小程序的發展前景，css多種選擇器、最大容量，用戶權限、數據為中心的缺陷...以前一直認為微信這樣做很吃虧。愛掏網 - it200.com明明小程序很火，快速完成及其功能簡潔開發成本低的優勢使得它在這幾年風生水起，既然這樣，何不降低限制增加功能？？真的是這樣么？？當然，以前接觸不是很深，不懂太多道理，經濟學，經融學太高深，現在也是模模糊糊的，涉及太深，感興趣的請看大佬文章微信小程序，大多數人誤解的8個問題
- 在寫這個小程序的時候，我覺得最大的感悟是頁面的css重構和html頁面結構的設計，他們都有一個共同點，就是有自己的思想。愛掏網 - it200.com我必須在動手之前先在腦中描繪一幅圖像，然后在用積木模塊堆疊起來，堆疊中會有一些共同點，你可以選擇合并樣式，還是分割樣式，這些都是經過思考后才動手的，想想建房子就明白了。愛掏網 - it200.com一般的切圖仔不會像那么多，只會從上到下直接敲，這是最耗時，也最累的，真心不建議這樣做。愛掏網 - it200.com
- 當然，學無止境，還要學的東西還有好多，技術是一方面，更重要的是交流。愛掏網 - it200.com這里我也不發表什么建議，自行體會吧...
最后聊聊js。愛掏網 - it200.comc++ 看不起java,java看不起python,python看不起js，js看不起php,php是最好的語言....,所以嘍，咱們去學php吧！！！咳咳，開個玩笑，莫介意。愛掏網 - it200.com怎么說，js在我看來其實也不難，也許我學的不深吧，但至少我自我感覺js不是很差。愛掏網 - it200.com我是這么認為滴，首先js是一門工具，如果我要實現某個功能，比如對數據的懶加載,首先完成懶加載實現功能函數，然后封裝代碼防止污染、然后擴展功能增加錯誤處理解決預處理參數問題、然后提供用戶接口、最后多次測試push提交。愛掏網 - it200.com如果有時間的話，我可能會嘗試完成架構，在用戶使用和功能模塊之間提供一個甚至多個過度嫁接，這個很耗時間，有興趣的朋友可以私信我哦，畢竟我也是剛剛接觸，一起學習吧，最后奉上我的源碼，歡迎各位使用
作者：沉睡的名偵探
鏈接：https://juejin.im/post/5b20558b5188257d86688a36
來源：掘金
著作權歸作者所有。愛掏網 - it200.com商業轉載請聯系作者獲得授權，非商業轉載請注明出處。愛掏網 - it200.com