因為小，所以簡單，適合新手；也因為小，所以它的界面很簡潔，在因為東北重工業(yè)死亡金屬風的洗禮，大家的表情包也從

變成了

最初國內(nèi)對前端的要求，是哎呀這個頁面里面好全哦什么功能都有很棒了雖然都在第一個頁面雖然有點亂的看不出來什么是主次怎么越看越暈啊呀好想吐嘔但是還是好棒

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

而小程序，受限于大小，被迫簡單（當然做得好就是簡潔），而又因為代碼復雜度低，滿足度高，因為小程序的這些特性，所以它適合新手練手。Lingvist 是一個AI智慧學習英語的app，十分簡潔，清爽。這也是我用小程序仿它的緣故。清爽即正義，簡潔即真理。

注：關于小程序的理解我不會比網(wǎng)上的更深刻，如果懶得看網(wǎng)上教程的，只要注意，html在小程序里面叫wxml；css叫wxss；html中的盒子也就是div，在小程序中叫view。

這是這個app的第一面，我用原生寫的，寫了斷斷續(xù)續(xù)6個小時左右，雖然在超市買好東西組裝很爽，但是要自己一點一點做才是自己的，別人的組件，終究是別人的東西。限于篇幅，最基本的東西大家可以去看w3school。

我有一個概念，比如html是你，那盒子就是你的身體的組成部分，css就是你的衣服首飾什么的，一個人可以穿很多件衣服，一件衣服也可以很多人穿。但是你戴隱形眼鏡加黑框眼鏡加3D眼鏡再帶VR眼鏡會被質(zhì)疑智力，盒子也一樣，約定俗成其中的css一般不超過三個。

一個css代碼，你用拼音來命名，這就是拿了片葉子遮羞，見不了人；你用英文命名，命名到后面掏出牛津字典想名字，這就是件你戴的你媽拿你爸褲子改的口罩，自己擱家里戴著得了。如何要把這件衣服賣別人，就涉及到代碼復用，因為第一頁是用原生做的，所以有意識的注意了代碼的復用，不過只是按我理解的，采用了BEM命名方法，讓代碼可以復用。

BEM：這是一大塊_這是一小塊_這是它的狀態(tài)

當然更正統(tǒng)的分析，可以看看這篇。

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

比如彈性布局：

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

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

要注意的有幾點：

使用Mark Man，獲得圖的距離，顏色等參數(shù)，再用網(wǎng)上一些在線識別圖中字體來獲取字體

里面的圖片，可以用去Iconfont里面下，或者用祖?zhèn)鞯膒s自己截，仿圖就是這樣的，熬出頭就會有可愛的會嚶嚶嚶的設計師小姐姐給你發(fā)素材了

中間那個國旗的盒子，用一個盒子，通過border-radious：50%弄成圓，然后外面套一個盒子做成這個效果。

   
             
          
  

.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;  
}

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

具體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步：創(chuàng)建動畫實例   
    var animation = wx.createAnimation({ 
      duration: 200,  //動畫時長  
      timingFunction: "linear", //線性  
      delay: 0  //0則不延遲  
    });  
       
    // 第2步：這個動畫實例賦給當前的動畫實例  
    this.animation = animation;  
   
   
    // 第3步：執(zhí)行第一組動畫  
    animation.opacity(0).rotateX(-100).step();  
   
    // 第4步：導出動畫對象賦給數(shù)據(jù)對象儲存  
    this.setData({ 
      animationData: animation.export() 
    }) 
       
    // 第5步：設置定時器到指定時候后，執(zhí)行第二組動畫  
    setTimeout(function () { 
      // 執(zhí)行第二組動畫  
      animation.opacity(1).rotateX(0).step();  
      // 給數(shù)據(jù)對象儲存的第一組動畫，更替為執(zhí)行完第二組動畫的動畫對象  
      this.setData({ 
        animationData: animation  
      }) 
         
      //關閉  
      if (currentStatu == "close") { 
        this.setData( 
          { 
            showModalStatus: false ,
            one:false
          } 
        );  
      } 
    }.bind(this), 200) 
     
    // 顯示  
    if (currentStatu == "open") { 
      this.setData( 
        { 
          showModalStatus: true 
        } 
      );  
    } 
  } ,

然后就是切換到已學單詞界面，重復的格式所以我選擇用循環(huán)來做。當然

    
{{itemName.word}}    
{{itemName.lasttime}}    
{{itemName.times}}  

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;}

在我仿完第一個界面之后，我意識到這個進度我圣誕節(jié)前都仿不完全部的（好像有借口為什么圣誕節(jié)沒人陪了），我選擇了小程序的組件，別被我前面貼的代碼打昏了，我們可是在超市??！全部買材料自己做是不是太傻了！

然后我給大家介紹一下，小程序的組件，里面有很多的效果，請大家自己看。

而且，前端并不要求，你在這家沃爾瑪，不能買家樂福的東西，所以你可以在小程序里面，使用weui這種框架（庫類？）。

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

又因為小程序的一部分組件和weui中的一樣，所以在weui.wxss中，就沒有寫。點這里是weui哦，點開這個·網(wǎng)址你會發(fā)現(xiàn)，為什么只有效果，沒有代碼？這個時候請你右鍵審查元素，通過代碼找到它的CSS類名，原樣放進你的盒子就好了。因為你已經(jīng)下好了衣服堆，所以你去看模特背后的牌子，回自己的衣服堆里翻出那件牌子的衣服穿上就好了。

然后，經(jīng)過很久很久的仿制，你就能做出這些效果

多插一句，那個被選中的效果，用偽元素做，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;
}

偽元素十分適合做這種類似符號的東西。

前面我只放了代碼還有效果以及造成這個效果的原因。沒有講解具體原因，因為我覺得自己還沒看透，不想誤人子弟。另一方面我想給大家搜索這些效果提供一個方向。

如果加一個數(shù)據(jù)庫，能夠把數(shù)據(jù)往后臺存儲，這個小程序就勉強完成了。難度不大，但是真的很好看！清爽即正義，簡潔即真理！
最后的一些提示：

關于顏色，用#000000而不是black，red這種，有些時候后者并不會被識別

css的開頭，最好在全局都寫一個margin: 0;padding: 0;position: relative;去除因為瀏覽器造成的問題

多看文檔，不需要你能打出來，只需要你再需要這個效果的時候知道百度什么關鍵詞

我寫了很多仿佛廢話的提示，因為作為一個0基礎，真真的哪里都是坑，很多大家知道的常識，我都不知道。所以我希望，通過這些廢話，能幫到哪怕一個人也好。還有里面可能有錯誤，改錯也是學習。有問題請聯(lián)系qq：940223872，備注掘金哦~
關于前端有什么問題，也可以聯(lián)系一直教我的兩個大佬，松松，超哥。我自己的githup

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

                                                             朱某人敬上