[[234390]]

很多新手都喜歡一個人完成項目，從項目的規(guī)劃、搭建，到實施、debug、驗收，一整套流程都是自己純手完成，當(dāng)然，對于提高自己的整體開發(fā)能力和自適應(yīng)能力很有幫助。ok,不廢話，下面開始介紹小白如何快速完成一個微信小程序。

喜馬拉雅App比較大，這里只完成部分重要功能。。。

本文章使用的是以喜馬拉雅電臺App防成微信小程序的栗子。

您可以從這篇文章中獲得以下技能點：

• 選擇項目需要的合適工具
• 如何快速分析項目功能并組成列表
• 如何快速完成并搭建一張頁面，并為復(fù)用提供良好的接口
• 如何應(yīng)對短時間內(nèi)無法解決的bug
• 如何規(guī)劃每一天的工作量和調(diào)整工作心態(tài)

提前準備工具

工具是非常重要的，當(dāng)然，也是很簡單的。。。

• 編輯器（我使用的是vscode）：@Visual Studio Code
• 微信web開發(fā)者工具下載：@微信web開發(fā)者工具
• 筆記（我使用的有道云）：@有道云筆記
• github（每日提交一下）：@github
• mark Man（基本的頁面樣式標(biāo)注，大公司都有專門的ps設(shè)計師，這里將就一下）：mark Man
• iconfont（阿里巴巴字體圖標(biāo)庫）：@iconfont
• weui（微信樣式框架/這項目中css純手寫，新手建議純手寫，實在無法寫出可采用部分框架中的樣式）：@WEUI

項目分析列表

在這個例子中,我們只分析其中的一個小小的模塊：基本頁面及其簡單功能。

首先，前提，喜馬拉雅電臺是一個音頻分享有聲讀物的app，由于微信小程序的限制2M，我們這個模塊不可能太大，功能也不可能齊全，所以我們要適當(dāng)?shù)目s減部分功能--->>縮減功能。

然后，由于人數(shù)、時間、精力有限（單人完成），所以我們需要一個系統(tǒng)的流程來保證項目的順利實施--->>資源控制。

項目的提升空間和后續(xù)維護提供良好接口--->>易于維護和升級。

頁面模塊流水

分類頁面

喜馬拉雅APP分類頁面原圖：

思考：該頁面采用頂部的固定搜索欄和swiper內(nèi)容區(qū)倆個模塊，倆個模塊均可采用絕對定位，搜索欄flex布局，swiper內(nèi)容區(qū)內(nèi)swiper-item有分類，推薦，精品，直播和廣播。

分類模塊

• 最近瀏覽：
  • flex布局，固定位置，動態(tài)更改最近瀏覽數(shù)據(jù)，初始隱藏
• 頂部推薦：
  • 固定數(shù)據(jù)，固定圖片
• 娛樂、知識、生活、特色
  • 相同布局，flex布局，采用wx:for循環(huán)，減少耦合和增加復(fù)用性
• swiper輪播圖
  • 橫向滑動，無縫滑動

細節(jié)：

1、整個頁面的滾動條優(yōu)化： 

::-webkit-scrollbar {  width: 0;height: 0;color: transparent; } 

2、所有文字都不能貼邊 

page { width:100vh;height:100vh;overflow:hidden;background-color:#f8f8f8;padding:0 20rpx;} 

3、icon采用統(tǒng)一樣式，增加class提供color更改顏色，提高復(fù)用、維護、可讀性 --（不過我這里使用的是圖片，初始想用圖標(biāo)，但是微信引用是在無法引用http，頁面由于是靜態(tài)，所以可以使用圖片） 

.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里結(jié)構(gòu)最好細分模版             

<!--歷史記錄--> 
<view class="history"></view>  
<!--列表頂部,三個列表使用js循環(huán)-->  
<view class="list list-bottom"></view> 
<!--細節(jié)列表，多個列表，可以使用js和easyMock獲取，不過經(jīng)過多天觀察，該頁面的數(shù)據(jù)基本是靜態(tài)，為了防止過度https請求，直接靜態(tài)寫死-->   
<view class="entertainment"></view>       
<!--底部swiper-->      
<swiper>      
<swiper-item autoplay="true" interval="4000" duration="400"> 
                ...巴拉巴拉          
</swiper-item>         
</swiper>  

mark Man設(shè)計師：

小程序最終效果圖：

精選頁面

由于頁面過多就不演示過多不重要的流程了，如果想進一步了解的話可以去app直接觀看原圖。

細節(jié)

1、分類欄采用的的wx:for循環(huán)了數(shù)量、顏色、圖片、如果需要，可以動態(tài)膝蓋數(shù)據(jù)庫中數(shù)據(jù)，無需修改html。    

<block wx:for="{{choiceIcon1}}" class="choice-menu__block" wx:for-item="item" wx:key="*this">            
<navigator class="menu-warpper__nav" url ="{{item.navUrl}}">  
<view class="menu-image"  style="background-color:{{item.backgroundColor}}">  
<image src="{{item.imageUrl}}" class="icon2"></image>        
</view>             
<text>  
{{item.title}}  
</text>  
</navigator>     
</block>  

2、為所有的文字留下足夠的空間，如果空間不足： 

overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 

3、所有的圖片都預(yù)留位置，并且優(yōu)化邊框和預(yù)留小圖標(biāo)，如果需要直接引用class或者增加一個模塊，當(dāng)然，使用vue時可以把它直接封裝template模塊。    

<!--html-->      
<view class="FineQualityBac">  
<image class="FineQuality-icon" src="../images/recommend/皇冠.png"></image>   
</view>     
<!--css-->  
    .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;}  

4、所有的循環(huán)都是用block塊標(biāo)簽包裹循環(huán)，便于測試和維護。

5、每個模塊之間沒有直接聯(lián)系，解耦方便。

6、半像素問題：         

<!--    基本流程：樣式放大倆倍,邊框一像素，選擇縮放點，scale縮放,確定盒子模型大小 -->   
<!--    一般用于偽元素設(shè)置邊框分開上下內(nèi)容 --> 
        .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;  
        }  

7、以數(shù)據(jù)為中心的微信小程序缺陷：css的用戶體驗不是很好，看圖說明。

原圖：

小程序：

是不是發(fā)現(xiàn)了什么，沒錯，底部的線滑動出現(xiàn)不同，在app中，當(dāng)你滑動一點點的時候，導(dǎo)航底部線就會發(fā)生滾動，可以看出同時進行，而在微信小程序中，由于是數(shù)據(jù)為中心，我直接設(shè)置滑動后產(chǎn)生的效果就是增加一個數(shù)據(jù)關(guān)聯(lián)current在綁定bindChange事件而已，但是中間的過度無法實現(xiàn)。

當(dāng)然實現(xiàn)也不是不可能，自己使用外部插件swiper，這樣你的代碼量和復(fù)雜度又得增加了好多，還有微信直接禁用了css多種選擇器，你不得不增加很多class，哎..麻煩

后期優(yōu)化空間：

圖片區(qū)域如果未加載成功可以顯示背景圖，使用js控制每張圖片的加載，如果未成功加載則顯示一張未顯示圖片或者icon。

其余頁面

總結(jié)

頁面就是一個基本結(jié)構(gòu)和一堆模塊外加js交互組合起來的?？焖偻瓿梢粡垙?fù)雜的頁面只需要：繪制基本架構(gòu)、增加功能模塊、js交互三部就能完成。1. 繪制基本架構(gòu)：拿到設(shè)計稿，第一步看頁面的基本構(gòu)造，這時細節(jié)不重要，看總體架構(gòu)，增加合適的class命名格式，這樣可以為內(nèi)部的模塊提供合理的class命名格式，避免class混亂而造成頁面樣式混亂，維護css樣式麻煩

一定要打標(biāo)注，在大的模塊中一定要注明標(biāo)注，css,html,js,都需要標(biāo)注特定功能提示。如果需要，你可以繪制一張樹形圖，我認為圖可以把一切復(fù)雜繁瑣的事情抽絲剝繭成小小的步驟，而樹形圖是最直觀的體現(xiàn)。

微信小程序的各種限制阻遏了小程序的發(fā)展前景，css多種選擇器、最大容量，用戶權(quán)限、數(shù)據(jù)為中心的缺陷...以前一直認為微信這樣做很吃虧。明明小程序很火，快速完成及其功能簡潔開發(fā)成本低的優(yōu)勢使得它在這幾年風(fēng)生水起，既然這樣，何不降低限制增加功能？？真的是這樣么？？當(dāng)然，以前接觸不是很深，不懂太多道理，經(jīng)濟學(xué)，經(jīng)融學(xué)太高深，現(xiàn)在也是模模糊糊的，涉及太深，感興趣的請看大佬文章：微信小程序，大多數(shù)人誤解的8個問題

在寫這個小程序的時候，我覺得最大的感悟是頁面的css重構(gòu)和html頁面結(jié)構(gòu)的設(shè)計，他們都有一個共同點，就是有自己的思想。我必須在動手之前先在腦中描繪一幅圖像，然后在用積木模塊堆疊起來，堆疊中會有一些共同點，你可以選擇合并樣式，還是分割樣式，這些都是經(jīng)過思考后才動手的，想想建房子就明白了。一般的切圖仔不會像那么多，只會從上到下直接敲，這是最耗時，也最累的，真心不建議這樣做。

當(dāng)然，學(xué)無止境，還要學(xué)的東西還有好多，技術(shù)是一方面，更重要的是交流。這里我也不發(fā)表什么建議，自行體會吧...

最后聊聊js 

c++ 看不起java，java看不起python，python看不起js，js看不起php，php是最好的語言...所以嘍，咱們?nèi)W(xué)php吧?。。】瓤?，開個玩笑，莫介意。怎么說，js在我看來其實也不難，也許我學(xué)的不深吧，但至少我自我感覺js不是很差。我是這么認為滴，首先js是一門工具，如果我要實現(xiàn)某個功能，比如對數(shù)據(jù)的懶加載，首先完成懶加載實現(xiàn)功能函數(shù)，然后封裝代碼防止污染、然后擴展功能增加錯誤處理解決預(yù)處理參數(shù)問題、然后提供用戶接口、最后多次測試push提交。如果有時間的話，我可能會嘗試完成架構(gòu)，在用戶使用和功能模塊之間提供一個甚至多個過度嫁接，這個很耗時間，有興趣的朋友可以私信我哦，畢竟我也是剛剛接觸，一起學(xué)習(xí)吧，最后奉上我的源碼，歡迎各位使用。