前言11月开始学习前端。在此之前我什至没有接触过代码。有很多掘金分享自己对代码的理解，都非常有谋略，但并不真正属于我们这些还在新手村徘徊的人。这篇文章可能不是很技术，但我希望一些像我一样迷茫的菜鸟比他们更好但不要放弃，甚至敢于发文章。我会好好学习的，希望看到这篇文章的人能够坚持下去，大牛大哥大神们，宁愿仁慈。如何做一个优秀的截图男孩？如果要做台灯，灯罩和灯架是html；灯罩上的图案和灯框的弯曲度是css；控制它发光是js。你自己买材料，做灯罩，做灯泡，然后通电点亮。这叫做原生js。你去商店买灯泡，这是组件。当你去超市时，他们不仅卖给你灯泡，还卖给你灯罩和灯座。这个超市叫一个框架。这个框架，如果是在微信里面，就叫小程序。小程序的名字很贴切，small：每个小程序不到2M，program：界面风格模仿一个app。今天给大家分享一下如何在这个叫小程序的超市里买灯泡做灯。我们为什么要做小程序？因为体积小，所以简单，适合新手；它也很小，所以它的界面非常简单。因为东北重工死亡金属风的洗礼，大家的表情包也从原来的国产前端变了。需求，是的，这个页面很齐全，所有的功能都很棒。虽然都在第一页，虽然有点乱，分不清主次，但是越看越晕，不过还是很棒的。后来出现了一家公司，它的logo是一个咬了一口的苹果，它的CEO是一个完美主义的暴君，它的手机砸了市场上的砖头机，它的app火爆了人们的审美，让大家知道简单并不意味着简单，复杂只是简单的积累。重剑无锋，一技之长。而小程序，受限于体积，被迫简单（当然，做得好也是简单的），而且由于代码复杂度低，满足度高，因为小程序的这些特点，适合供初学者练习。Lingvist是一款AI智慧英语学习APP，非常简洁清爽。这就是为什么我用小程序模仿它的原因。新鲜就是正义，简单就是真理。如何下载小程序做准备注：小程序的了解不比网上的多。如果懒得看网上的教程，注意一下，html在小程序中调用的是wxml；css称为wxss；html中的boxes也称为div，在小程序中称为view。页面复制这是此应用程序的第一面。我是原生写的。断断续续写了大概6个小时。虽然在超市买东西组装起来很爽，但是还是得自己动手。别人的组件，终究是别人的东西。由于篇幅限制，你可以去w3school了解最基本的东西。我有一个关于css的概念，比如html是你，盒子是你身体的一部分，css是你的衣服和首饰，一个人可以穿很多衣服，一件衣服可以被很多人穿。但如果戴隐形眼镜、黑框眼镜、3D眼镜、VR眼镜，你的智商就会受到质疑，盒子也是一样。里面的css一般不超过三个是约定俗成的。一个css代码，你用拼音来命名，这是拿叶子来遮羞布，谁也看不见；你用英文命名，命名之后，你拿出牛津词典想一个名字，这是你妈妈用你爸爸的裤子换的一件衣服面具，我可以在家里戴上它。怎么把这件衣服卖给别人，涉及到代码复用，因为第一页是用native做的，所以有意识地注意代码复用，但只是按照我的理解，采用了BEM的命名方式，这样才能实现代码复用。BEM：这是一大块_这是一个小块_这是它的状态<视图类="end_box">class="end_box_bd_mainright">当然更正统的分析可以看这篇文章，当然不止是衣服，还有一些随处可见的首饰，比如链子，戴在脖子上叫项链，戴在手上叫手链，戴在脚上叫脚链.比如灵活布局：display:flex;弹性方向：列；对齐项目：居中；详情请参考阮一峰先生的这篇文章。有几点需要注意：使用MarkMan获取地图的距离和颜色等参数，然后使用一些在线识别图片中的字体获取图片中的字体，可以用它来下载在iconfont里面，或者用祖传的PS自己剪，仿图是这样的，出来的时候还有可爱的，公司设计师给你发了里面国旗盒子的素材中间。用一个盒子，把它做成一个border-radiious:50%的圆，然后在外面放一个盒子，做出这个效果。.span_box{显示：flex;弹性方向：列；对齐项目：居中；宽度：100%；高度：50vh；保证金顶部：100rpx；}.span_box_pic图片{border-radius:50%;width:230rpx;高度：230rpx；}.span_box_pic{显示：flex；对齐项目：居中；证明内容：居中；边框：2rpx实心#bbbbbb；边界半径：50%；宽度：240rpx；高度：240rpx；具体将周围区域变暗的js如下：状态；if(currentStatu=="open1"){this.setData({content:"每日目标：完成100张单词卡",src:"../../images/aactive1.png"})currentStatu="open"}如果（currentStatu==“open2”）{this.setData({content:"Dailygoal:add20newwords",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){/*动画部分*///第一步：创建动画实例varanimation=wx.createAnimation({duration:200,//动画时长timingFunction:"linear",//lineardelay:0//0表示无延迟});//Step2:将这个动画实例赋值给当前的动画实例this.动画=动画；//第三步：执行第一组动画animation.opacity(0).rotateX(-100).step();//第四步：导出动画对象赋值给数据对象存储this.setData({animationData:animation.export()})//第五步：设置定时器到指定时间后，执行第二个setofanimationsetTimeout(function(){//执行第二组动画animation.opacity(1).rotateX(0）。步（）;//数据对象中存储的第一组动画被执行过第二组动画的动画对象替换this.setData({animationData:animation})//Closeif(currentStatu=="close"){this.setData({showModalStatus:false,one:false});}}.bind(this),200)//显示if(currentStatu=="open"){this.setData({showModalStatus:true});}},wx:for循环然后切换到学词界面，重复格式所以我选择用循环来做当然{{itemName.word}}{{itemName.lasttime}}{{itemName.times}}数组:[{word:"age",lasttime:"15",times:"1",message:'foo',},{word:"anybody",lasttime:"15",times:"2",message:'bar'},第一行的固定效果是通过css中的fixed固定的。下面的滚动是用scroll完成的。.fixed{宽度：100%；位置：固定；z-index:9999;其他界面装Heap-Components第一个界面我模仿完之后，意识到我无法在圣诞节前模仿所有这些进步（好像有借口为什么没有人陪圣诞节），我选择了小程序的组件，不要被我之前发布的代码惊呆了，但是我们在超市！把所有的材料都买来自己做，这不是傻吗！那我就给大家介绍一下，小程序的组件，有很多作用，大家自己看吧。而且前端不要求不能在这个沃尔玛买乐福的东西，所以可以在小程序中使用weui之类的框架（库类？）。weui其实就是一堆衣服，里面全是别人写的衣服。想要哪一件，只要在上面写上衣服的名字，就可以穿了。但是你需要把这堆衣服完全搬进你的小程序中，才能使用。而且，小程序中weui的名称是weui.wxss，如果安装错误，是无法运行的。又因为小程序的部分组件和weui中的相同，所以没有在weui.wxss中写。点这里是weui，点这个网站你会发现为什么只有效果没有代码？这时，请右键检查该元素，通过代码找到它的CSS类名，按原样放入你的框中。因为你已经把那堆衣服放好了，所以你去模特后面的牌子，回到你的那堆衣服把那个牌子的衣服翻出来穿上。然后，经过很长很长一段时间的模仿，你就能做出这些效果。多说一句，选中的效果是伪元素做的，before是绿色圆形背景做的，after是√做的。.weui-cell__ft_in-access:after{height:10rpx;宽度：20rpx；变换：旋转（135度）；顶部：-50rpx；右：15rpx；border-color:#ffffff;}.weui-cell__ft_in-access:before{content:"";显示：块；位置：绝对；宽度：50rpx；高度：50rpx；背景色：#338499；边界半径：50%；顶部：-72rpx；left:488rpx;}伪元素很适合Somethinglikeasymbol。前面我只放代码和效果以及这个效果的原因。具体原因我没有解释，因为我觉得自己没有看透，不想误导孩子。另一方面，我想给大家提供一个搜索这些效果的方向。如果在后台加个数据库存储数据，这个小程序就勉强完成了。不太难，但真的很美！新鲜就是正义，简单就是真理！一些最后的提示：关于颜色，使用#000000而不是黑色、红色等。有时后者在css开头不会被识别。全局最好写一个margin:0;padding:0;position:relative;排除浏览器带来的问题，多看文档。您不需要能够将其键入。需要这个效果的时候只需要知道百度有哪些关键词就可以了。写了一大堆乱七八糟的tips，因为作为一个0基础，真的是处处都是坑，很多大家都知道的常识我也不知道。所以我希望通过这个废话，能帮助到哪怕一个人。这里面可能有错误，改正错误也是学习。有问题可以联系qq：940223872，注意掘金~前端有什么问题也可以联系一直教我的两位大哥松松和超哥。我自己的github，大家加油，大神大哥，宁可厚道。继续学习，继续学习~真诚的，朱
