因?yàn)樾?，所以簡單，適合新手；也因?yàn)樾?，所以它的界面很簡潔，在因?yàn)闁|北重工業(yè)死亡金屬風(fēng)的洗禮，大家的表情包也從

變成了

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

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

而小程序，受限于大小，被迫簡單（當(dāng)然做得好就是簡潔），而又因?yàn)榇a復(fù)雜度低，滿足度高，因?yàn)樾〕绦虻倪@些特性，所以它適合新手練手。Lingvist 是一個(gè)AI智慧學(xué)習(xí)英語的app，十分簡潔，清爽。這也是我用小程序仿它的緣故。清爽即正義，簡潔即真理。

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

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

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

一個(gè)css代碼，你用拼音來命名，這就是拿了片葉子遮羞，見不了人；你用英文命名，命名到后面掏出牛津字典想名字，這就是件你戴的你媽拿你爸褲子改的口罩，自己擱家里戴著得了。如何要把這件衣服賣別人，就涉及到代碼復(fù)用，因?yàn)榈谝豁撌怯迷龅?，所以有意識的注意了代碼的復(fù)用，不過只是按我理解的，采用了BEM命名方法，讓代碼可以復(fù)用。

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

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

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

比如彈性布局：

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

更詳細(xì)的請看阮一峰大佬的這篇

要注意的有幾點(diǎn)：

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

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

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

   
             
          
  

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

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

具體js如下：

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

  },
  powerDrawer: function (e) { 
    var currentStatu = e.currentTarget.dataset.statu;
    if(currentStatu=="open1"){
        this.setData({
          content:"每日目標(biāo)：完成100張字卡",
          src:"../../images/aactive1.png"
        })
        currentStatu ="open"
    }
    if(currentStatu=="open2"){
      this.setData({
        content:"每日目標(biāo)：增加20個(gè)生詞",
        src:"../../images/active2.png"
      })
      currentStatu ="open"
    }
    if(currentStatu=="open3"){
      this.setData({
        content:"每日目標(biāo)：將復(fù)習(xí)答對率提升到80%",
        src:"../../images/active3.png"

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

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

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

    
{{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固定它。下面的滾動(dòng)用scroll來做。

.fixed{    width: 100%;    position: fixed;    z-index: 9999;}

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

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

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

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

又因?yàn)樾〕绦虻囊徊糠纸M件和weui中的一樣，所以在weui.wxss中，就沒有寫。點(diǎn)這里是weui哦，點(diǎn)開這個(gè)·網(wǎng)址你會發(fā)現(xiàn)，為什么只有效果，沒有代碼？這個(gè)時(shí)候請你右鍵審查元素，通過代碼找到它的CSS類名，原樣放進(jìn)你的盒子就好了。因?yàn)槟阋呀?jīng)下好了衣服堆，所以你去看模特背后的牌子，回自己的衣服堆里翻出那件牌子的衣服穿上就好了。

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

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

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

前面我只放了代碼還有效果以及造成這個(gè)效果的原因。沒有講解具體原因，因?yàn)槲矣X得自己還沒看透，不想誤人子弟。另一方面我想給大家搜索這些效果提供一個(gè)方向。

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

關(guān)于顏色，用#000000而不是black，red這種，有些時(shí)候后者并不會被識別

css的開頭，最好在全局都寫一個(gè)margin: 0;padding: 0;position: relative;去除因?yàn)闉g覽器造成的問題

多看文檔，不需要你能打出來，只需要你再需要這個(gè)效果的時(shí)候知道百度什么關(guān)鍵詞

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

諸君加油，大神大牛大佬，寧有種乎。保持學(xué)習(xí)，一直學(xué)習(xí)~

                                                             朱某人敬上