清爽即正义，简洁即真理—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

诸君加油，大神大牛大佬，宁有种乎。保持学习，一直学习~

朱某人敬上