喜馬拉雅小程式

沉睡的名偵探發表於2018-06-19

很多新手都喜歡一個人完成專案,從專案的規劃、搭建,到實施、debug、驗收,一整套流程都是自己純手完成,當然,對於提高自己的整體開發能力和自適應能力很有幫助。ok,不廢話,下面開始介紹小白如何快速完成一個微信小程式。

  • 首先喜馬拉雅App比較大,這裡只完成部分重要功能。。。

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

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

  • 選擇專案需要的合適工具
  • 如何快速分析專案功能並組成列表
  • 如何快速完成並搭建一張頁面,併為複用提供良好的介面
  • 如何應對短時間內無法解決的bug
  • 如何規劃每一天的工作量和調整工作心態

提前準備工具

工具是非常重要的,當然,也是很簡單的。。。

  • 編輯器(我使用的是vscode):@Visual Studio Code
  • 微信web開發者工具下載: @微信web開發者工具
  • 筆記(我使用的有道雲): @有道雲筆記
  • github(每日提交一下): @github
  • mark Man(基本的頁面樣式標註,大公司都有專門的ps設計師,這裡將就一下)mark Man
  • iconfont(阿里巴巴字型圖示庫)@iconfont
  • weui(微信樣式框架/這專案中css純手寫,新手建議純手寫,實在無法寫出可採用部分框架中的樣式)@WEUI

專案分析列表

  • 在這個例子中,我們只分析其中的一個小小的模組:基本頁面及其簡單功能
    • 首先,前提,喜馬拉雅電臺是一個音訊分享有聲讀物的app,由於微信小程式的限制2M,我們這個模組不可能太大,功能也不可能齊全,所以我們要適當的縮減部分功能,--->> 縮減功能
    • 然後,由於人數、時間、精力有限(單人完成),所以我們需要一個系統的流程來保證專案的順利實施。--->> 資源控制
    • 專案的提升空間和後續維護提供良好介面,--->>易於維護和升級

頁面模組流水

  • 分類頁面

    喜馬拉雅APP分類頁面原圖

    手機喜馬拉雅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裡結構最好細分模版

        <!--歷史記錄-->
        <view class="history"></view>
        <!--列表頂部,三個列表使用js迴圈-->
        <view class="list list-bottom"></view> 
        <!--細節列表,多個列表,可以使用js和easyMock獲取,不過經過多天觀察,該頁面的資料基本是靜態,為了防止過度https請求,直接靜態寫死-->
        <view class="entertainment"></view>
        <!--底部swiper-->
        <swiper>
         <swiper-item autoplay="true" interval="4000" duration="400">
            ...巴拉巴拉
         </swiper-item>
        </swiper>
    複製程式碼

mark Man設計師

喜馬拉雅小程式
小程式最終效果圖:
小程式頁面

  • 精選頁面----由於頁面過多就不演示過多不重要的流程了,如果想進一步瞭解的話可以去app直接觀看原圖

精選頁面小程式

細節:

  • 分類欄採用的的wx:for迴圈了數量、顏色、圖片、如果需要,可以動態膝蓋資料庫中資料,無需修改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>
複製程式碼
  • 為所有的文字留下足夠的空間,如果空間不足:
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

  • 所有的圖片都預留位置,並且優化邊框和預留小圖示,如果需要直接引用class或者增加一個模組,當然,使用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;}
    複製程式碼
  • 所有的迴圈都是用block塊標籤包裹迴圈,便於測試和維護

  • 每個模組之間沒有直接聯絡,解耦方便

  • 半畫素問題:

        <!--    基本流程:樣式放大倆倍,邊框一畫素,選擇縮放點,scale縮放,確定盒子模型大小 -->
        <!--    一般用於偽元素設定邊框分開上下內容 -->
        .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的使用者體驗不是很好,看圖說明:

原圖

喜馬拉雅小程式

小程式

喜馬拉雅小程式
是不是發現了什麼,沒錯,底部的線滑動出現不同,在app中,當你滑動一點點的時候,導航底部線就會發生滾動,可以看出同時進行,而在微信小程式中,由於是資料為中心,我直接設定滑動後產生的效果就是增加一個資料關聯current在繫結bindChange事件而已,但是中間的過度無法實現。當然實現也不是不可能,自己使用外部外掛swiper,這樣你的程式碼量和複雜度又得增加了好多,還有微信直接禁用了css多種選擇器,你不得不增加很多class,哎..麻煩

後期優化空間:

  • 圖片區域如果未載入成功可以顯示背景圖,使用js控制每張圖片的載入,如果未成功載入則顯示一張未顯示圖片或者icon

  • 其餘頁面

喜馬拉雅小程式
當然了,每日筆記必不可少呦...

喜馬拉雅小程式

更多頁面就不多顯示了,懶...

總結

  • 頁面就是一個基本結構和一堆模組外加js互動組合起來的。快速完成一張複雜的頁面只需要:繪製基本架構、增加功能模組、js互動三部就能完成。1. 繪製基本架構:拿到設計稿,第一步看頁面的基本構造,這時細節不重要,看總體架構,增加合適的class命名格式,這樣可以為內部的模組提供合理的class命名格式,避免class混亂而造成頁面樣式混亂,維護css樣式麻煩
  • 一定要打標註,在大的模組中一定要註明標註,css,html,js,都需要標註特定功能提示。如果需要,你可以繪製一張樹形圖,我認為圖可以把一切複雜繁瑣的事情抽絲剝繭成小小的步驟,而樹形圖是最直觀的體現。
  • 微信小程式的各種限制阻遏了小程式的發展前景,css多種選擇器、最大容量,使用者許可權、資料為中心的缺陷...以前一直認為微信這樣做很吃虧。明明小程式很火,快速完成及其功能簡潔開發成本低的優勢使得它在這幾年風生水起,既然這樣,何不降低限制增加功能??真的是這樣麼??當然,以前接觸不是很深,不懂太多道理,經濟學,經融學太高深,現在也是模模糊糊的,涉及太深,感興趣的請看大佬文章微信小程式,大多數人誤解的8個問題
  • 在寫這個小程式的時候,我覺得最大的感悟是頁面的css重構和html頁面結構的設計,他們都有一個共同點,就是有自己的思想。我必須在動手之前先在腦中描繪一幅影像,然後在用積木模組堆疊起來,堆疊中會有一些共同點,你可以選擇合併樣式,還是分割樣式,這些都是經過思考後才動手的,想想建房子就明白了。一般的切圖仔不會像那麼多,只會從上到下直接敲,這是最耗時,也最累的,真心不建議這樣做。
  • 當然,學無止境,還要學的東西還有好多,技術是一方面,更重要的是交流。這裡我也不發表什麼建議,自行體會吧...

最後聊聊js。c++ 看不起java,java看不起python,python看不起js,js看不起php,php是最好的語言....,所以嘍,我們們去學php吧!!!咳咳,開個玩笑,莫介意。怎麼說,js在我看來其實也不難,也許我學的不深吧,但至少我自我感覺js不是很差。我是這麼認為滴,首先js是一門工具,如果我要實現某個功能,比如對資料的懶載入,首先完成懶載入實現功能函式,然後封裝程式碼防止汙染、然後擴充套件功能增加錯誤處理解決預處理引數問題、然後提供使用者介面、最後多次測試push提交。如果有時間的話,我可能會嘗試完成架構,在使用者使用和功能模組之間提供一個甚至多個過度嫁接,這個很耗時間,有興趣的朋友可以私信我哦,畢竟我也是剛剛接觸,一起學習吧,最後奉上我的原始碼,歡迎各位使用。

相關文章