喜馬拉雅小程序

不少新手都喜歡一我的完成項目，從項目的規劃、搭建，到實施、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分類頁面原圖：

  
  思考：該頁面採用頂部的固定搜索欄和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提交。若是有時間的話，我可能會嘗試完成架構，在用戶使用和功能模塊之間提供一個甚至多個過分嫁接，這個很耗時間，有興趣的朋友能夠私信我哦，畢竟我也是剛剛接觸，一塊兒學習吧，最後奉上個人源碼，歡迎各位使用。