清爽即正義，簡潔即真理—lingvist

時間 2019-11-11

原文原文鏈接

前言

從11月開始學前端。在這以前連代碼都沒有碰過。掘金有不少的大牛分享本身對代碼的理解，都很高屋建瓴，可是沒有真正屬於咱們這些，還在新手村彷徨的人的代入感。這篇文章技術性可能不強，可是我想讓一些跟我同樣迷茫的小白，比他們還菜可是也不放棄甚至還敢發文章。我會努力學習下去，也但願看到這篇文章的人能堅持下去，大牛大佬大神，寧有種乎。css

如何當好一個截圖仔？

若是咱們要作一個檯燈出來，燈罩燈架什麼的就是html；燈罩上的花紋，燈架的彎折程度就是css；控制它發亮，就是js。你本身去買材料，作燈罩，作燈泡，而後通電發亮，這就叫原生js。你去店裏買燈泡，這就是組件，你去超市，不光給你賣燈泡，還給你賣燈罩，賣燈架，這個超市就叫框架。html

這個框架，若是在微信裏面，就叫小程序。

小程序這個名稱十分貼切，小：每一個小程序都小於2M，程序：界面風格仿造app。今天就跟你們分享一下，怎麼在這個叫小程序的超市裏面，買上燈泡，作一盞燈。前端

咱們爲何要作小程序

由於小，因此簡單，適合新手；也由於小，因此它的界面很簡潔，在由於東北重工業死亡金屬風的洗禮，你們的表情包也從git

變成了github

最初國內對前端的要求，是哎呀這個頁面裏面好全哦什麼功能都有很棒了雖然都在第一個頁面雖然有點亂的看不出來什麼是主次怎麼越看越暈啊呀好想吐嘔可是仍是好棒數據庫

後來有一家公司出現了，它的logo是一個被咬了一口的蘋果，它的公司的ceo是一個完美主義的暴君，它的手機砸爛了市場上的板磚機，它的app，轟開了人們的審美，讓你們知道了，簡單不等於簡潔，複雜也只是是簡單的堆積。重劍無鋒，大巧不工。小程序

而小程序，受限於大小，被迫簡單（固然作得好就是簡潔），而又由於代碼複雜度低，知足度高，由於小程序的這些特性，因此它適合新手練手。Lingvist 是一個AI智慧學習英語的app，十分簡潔，清爽。這也是我用小程序仿它的緣故。清爽即正義，簡潔即真理。瀏覽器

準備工做

如何下載

小程序須知

注：關於小程序的理解我不會比網上的更深入，若是懶得看網上教程的，只要注意，html在小程序裏面叫wxml；css叫wxss；html中的盒子也就是div，在小程序中叫view。微信

頁面仿製

這是這個app的第一面，我用原生寫的，寫了斷斷續續6個小時左右，雖然在超市買好東西組裝很爽，可是要本身一點一點作纔是本身的，別人的組件，終究是別人的東西。限於篇幅，最基本的東西你們能夠去看w3school。app

關於css

我有一個概念，好比html是你，那盒子就是你的身體的組成部分，css就是你的衣服首飾什麼的，一我的能夠穿不少件衣服，一件衣服也能夠不少人穿。可是你戴隱形眼鏡加黑框眼鏡加3D眼鏡再帶VR眼鏡會被質疑智力，盒子也同樣，約定俗成其中的css通常不超過三個。

一個css代碼，你用拼音來命名，這就是拿了片葉子遮羞，見不了人；你用英文命名，命名到後面掏出牛津字典想名字，這就是件你戴的你媽拿你爸褲子改的口罩，本身擱家裏戴着得了。如何要把這件衣服賣別人，就涉及到代碼複用，由於第一頁是用原生作的，因此有意識的注意了代碼的複用，不過只是按我理解的，採用了BEM命名方法，讓代碼能夠複用。

BEM：這是一大塊_這是一小塊_這是它的狀態

<view class="body">    
    <view class="title_hd"></view>    
    <view class="title_bd"></view>
  <view class="span_box">    
        <view class="span_box_pic">            
            <image src=""/>       
        </view>       
     <view class="span_box_hd_Explain"></view>        
     <view class="span_box_bd_Explain"></view>    
  <view class="box_ft">         
      <view class="span_ft left">            
      <view class="span_ft_title">
  </view>           
   <view class="span_ft_Explain"></view>        
  </view>           
    <vi-ew class="span_ft right">           
         <view class="span_ft_right_title"></view>           
         <view class="span_ft_right_Explain"></view>       
    </vi-ew>     
        </view>
        </view>
        <view class="end_box">
            <view class="end_box_hd">
            </view>
                <view class="end_box_bd">
                        <view class="end_box_bd_main left></view>        
                        <view class="end_box_bd_main middle"></view>        
                        <view class="end_box_bd_main right"></view>                                
      </view>    
                        <button class="btn"></button>
                        </view>
                        </view>

固然更正統的分析，能夠看看這篇。

固然不光是衣服，還有首飾，有些能夠被處處引用的就像一個鏈子，你帶脖子上叫項鍊，放手上叫手鍊，腳上放腳鏈。

好比彈性佈局：

display: flex;    
flex-direction:column;    
align-items:center;

更詳細的請看阮一峯大佬的這篇

要注意的有幾點：

使用Mark Man，得到圖的距離，顏色等參數，再用網上一些在線識別圖中字體來獲取字體
裏面的圖片，能夠用去Iconfont裏面下，或者用祖傳的ps本身截，仿圖就是這樣的，熬出頭就會有可愛的會嚶嚶嚶的設計師小姐姐給你發素材了
中間那個國旗的盒子，用一個盒子，經過border-radious：50%弄成圓，而後外面套一個盒子作成這個效果。

<view class="span_box">   
 <view class="span_box_pic">            
    <image src=""/>      
  </view>
</view>
.span_box{    
display: flex;    
flex-direction:column;    
align-items:center;    
width: 100%;   
height: 50vh;    
margin-top: 100rpx;   }
.span_box_pic image{    
border-radius: 50%;
width: 230rpx; 
height: 230rpx; 
 }
.span_box_pic{    
display: flex;    
flex-direction:row;    
align-items:center;    
justify-content: center;    
border: 2rpx solid #bbbbbb;    
border-radius: 50%;    
width: 240rpx;    
height: 240rpx;  
}

蒙版效果，就是兩個函數，一個讓圖彈出來，一個讓周圍變暗

具體js以下：

data: {
    one:false,
    showModalStatus: false,
    content:"",
    src:"",

  },
  powerDrawer: function (e) { 
    var currentStatu = e.currentTarget.dataset.statu;
    if(currentStatu=="open1"){
        this.setData({
          content:"每日目標：完成100張字卡",
          src:"../../images/aactive1.png"
        })
        currentStatu ="open"
    }
    if(currentStatu=="open2"){
      this.setData({
        content:"每日目標：增長20個生詞",
        src:"../../images/active2.png"
      })
      currentStatu ="open"
    }
    if(currentStatu=="open3"){
      this.setData({
        content:"每日目標：將複習答對率提高到80%",
        src:"../../images/active3.png"

      })
      currentStatu ="open"
    }
    this.util(currentStatu) 
    setTimeout(()=>{
      this.setData({
        one : true,

      })
    },150) 
  }, 
  util: function(currentStatu){ 
    /* 動畫部分 */ 
    // 第1步：建立動畫實例   
    var animation = wx.createAnimation({ 
      duration: 200,  //動畫時長  
      timingFunction: "linear", //線性  
      delay: 0  //0則不延遲  
    });  
       
    // 第2步：這個動畫實例賦給當前的動畫實例  
    this.animation = animation;  
   
   
    // 第3步：執行第一組動畫  
    animation.opacity(0).rotateX(-100).step();  
   
    // 第4步：導出動畫對象賦給數據對象儲存  
    this.setData({ 
      animationData: animation.export() 
    }) 
       
    // 第5步：設置定時器到指定時候後，執行第二組動畫  
    setTimeout(function () { 
      // 執行第二組動畫  
      animation.opacity(1).rotateX(0).step();  
      // 給數據對象儲存的第一組動畫，更替爲執行完第二組動畫的動畫對象  
      this.setData({ 
        animationData: animation  
      }) 
         
      //關閉  
      if (currentStatu == "close") { 
        this.setData( 
          { 
            showModalStatus: false ,
            one:false
          } 
        );  
      } 
    }.bind(this), 200) 
     
    // 顯示  
    if (currentStatu == "open") { 
      this.setData( 
        { 
          showModalStatus: true 
        } 
      );  
    } 
  } ,

wx：for 循環

而後就是切換到已學單詞界面，重複的格式因此我選擇用循環來作。固然

<view class="center" wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">    
<view class="word_hd">{{itemName.word}}</view>    
<view class="word_bd">{{itemName.lasttime}}</view>    
<view class="word_ft">{{itemName.times}}</view>  
</view>
array: [{
      word:"age",
      lasttime:"15",
      times:"1",
      message: 'foo',
          }, {     
           word:"anybody",      
           lasttime:"15",
           times:"2",      
           message: 'bar'    },

首行固定的效果用css中的fixed固定它。下面的滾動用scroll來作。

.fixed{    width: 100%;    position: fixed;    z-index: 9999;}
<scroll-view scroll-y style="height:80vh;padding-top: 200rpx;"></scroll-view>

其餘界面

衣服堆-組件

在我仿完第一個界面以後，我意識到這個進度我聖誕節前都仿不徹底部的（好像有藉口爲何聖誕節沒人陪了），我選擇了小程序的組件，別被我前面貼的代碼打昏了，咱們但是在超市啊！所有買材料本身作是否是太傻了！

而後我給你們介紹一下，小程序的組件，裏面有不少的效果，請你們本身看。

並且，前端並不要求，你在這家沃爾瑪，不能買家樂福的東西，因此你能夠在小程序裏面，使用weui這種框架（庫類？）。

weui其實就是衣服堆，裏面堆滿了別人寫好的衣服，你想要哪一件，把衣服的名字寫上去，就能穿了。可是你須要把這個衣服堆，完整的搬到你的小程序裏面來，才能使用。並且，weui在小程序裏面的名字是weui.wxss，你裝錯了並不能運行。

又由於小程序的一部分組件和weui中的同樣，因此在weui.wxss中，就沒有寫。點這裏是weui哦，點開這個·網址你會發現，爲何只有效果，沒有代碼？這個時候請你右鍵審查元素，經過代碼找到它的CSS類名，原樣放進你的盒子就行了。由於你已經下好了衣服堆，因此你去看模特背後的牌子，回本身的衣服堆裏翻出那件牌子的衣服穿上就行了。

而後，通過好久好久的仿製，你就能作出這些效果

多插一句，那個被選中的效果，用僞元素作，before作綠色的圓形背景，after作√。

.weui-cell__ft_in-access:after{
    height:10rpx;
    width:20rpx;
    transform:rotate(135deg);
    top:-50rpx;
    right:15rpx;
    border-color: #ffffff;
}
.weui-cell__ft_in-access:before{
    content: "";
    display: block;
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    background-color: #338499;
    border-radius: 50%;
    top:-72rpx;
    left: 488rpx;
}

僞元素十分適合作這種相似符號的東西。

前面我只放了代碼還有效果以及形成這個效果的緣由。沒有講解具體緣由，由於我以爲本身還沒看透，不想誤人子弟。另外一方面我想給你們搜索這些效果提供一個方向。

若是加一個數據庫，可以把數據日後臺存儲，這個小程序就勉強完成了。難度不大，可是真的很好看！清爽即正義，簡潔即真理！
最後的一些提示：

關於顏色，用#000000而不是black，red這種，有些時候後者並不會被識別
css的開頭，最好在全局都寫一個margin: 0;padding: 0;position: relative;去除由於瀏覽器形成的問題
多看文檔，不須要你能打出來，只須要你再須要這個效果的時候知道百度什麼關鍵詞

我寫了不少彷彿廢話的提示，由於做爲一個0基礎，真真的哪裏都是坑，不少你們知道的常識，我都不知道。因此我但願，經過這些廢話，能幫到哪怕一我的也好。還有裏面可能有錯誤，改錯也是學習。有問題請聯繫qq：940223872，備註掘金哦~
關於前端有什麼問題，也能夠聯繫一直教個人兩個大佬，鬆鬆，超哥。我本身的githup

諸君加油，大神大牛大佬，寧有種乎。保持學習，一直學習~

朱某人敬上

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。