一、前端是什么？

前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

（核心技术：HTML、CSS、JavaScript）

核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

二、前端都需要学什么（可以分为八个阶段）？

1、第一阶段：

▪ HTML+CSS:

HTML进阶、 CSS进阶、p+CSS布局、HTML+CSS整站开发、

▪ JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

▪ JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

▪ JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

▪ JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

2、第二阶段：HTML5和移动Web开发

▪ HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

▪ CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、flex布局、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

▪ Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

▪ 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机聚划算页面、手机滚屏。

3、第三阶段：HTTP服务和AJAX编程

▪ WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

▪ AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用、会处理简单的GET或者POST请求、

▪ AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

本人在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 自己根据
多年来的开发经验总结录制的一套web前端精讲视频和学习方法，以及一些前端学习手册，前端面试题，
端开发工具，PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

4、第四阶段：面向对象进阶

▪ 面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、ES6中变量的作用域（let ，const(声明变量只读)，块级作用域），ES6中函数新特性。

▪ 面向对象三大特征：

继承性、多态性、封装性。

▪ 面向对象中创建对象的五种方法：

自定义对象 、工厂模式创建对象、构造函数、 混合模式创造对象、JSO格式创建对象。

5、第五阶段：封装一个属于自己的框架

▪ 框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

▪ 框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

▪ 框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

6、第六阶段：模块化组件开发

▪ 面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

▪ 面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

7、第七阶段：主流的流行框架

▪ Web开发工作流：

GIT/SVN、Vue-cli脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

▪ 前端主流框架：

Vue.js、Angular.js、React.JS、Bootstrap。

▪ 常用库：

React.js、Vue.js、JQuery.js。

8、第八阶段:Node.js全栈开发：

▪ 快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

▪ 核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

▪ Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

▪ 快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

▪ Node.js开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

以上就是前端都需要学习什么？的详细内容

前端开发需要学习什么？web前端相对于编程语言Java、C++等来说相对要更容易入门，更适合新手学习。所以有越来越多的人想要学习web前端开发，那么我们学习web前端开发需要学习什么呢？

web前端都要学习哪些内容呢?

1、HTML5+CSS3，需要掌握的知识点是我们常用的浏览器和浏览器内核是什么，和HTML语法和使用技巧并将常用标签掌握。还需要学习的就是CSS的语法和使用技巧等。学完后能够完成基础静态页面的制作。

2、JavaScript，需要掌握JavaScript语法和相应的算法，如：BOM、DOM、用户界面交互、变量提升及变量作用域、定时对象、cookie原理解析、正则表达式、面向对象原型继承、http协议、Ajax前后台数据交互等等也是需要大家学习的。

3、Node.JS，需要掌握的知识点主要是，webpack模块打包器、客户端服务器交互模型、JavaScript异步编程模型、JavaScript模块化编程方式、能够使用Node.js操作MongoDB数据库、能够独立开发基于后台接口的动态网站、Ajax数据交互的项目、能够独立完成企业网站从前台到后台的基本开发工作。

4、前端框架的学习，这个阶段需要掌握的知识点主要是，D3.js数据可视化、Vue技术栈进行项目开发、React技术栈进行项目开发、源代码管理工具的使用、web项目的部署与发布模式学习，可以对常见网站业务模块进行开发等等。

5、移动端开发，这个阶段需要学习的知识点主要是，React Native、Flutter、PWA、小程序开发基础并独立开发小程序项目、Canvas、小程序开发框架mpvue的使用等。

 web前端开发的学习时间和学习效果和大家选择的学习方式有关，如果选择了自学前端开发，要达到企业要求，脱产学习可能需要学习7、8个月以上的时间。有的人利用工作空余时间学习，那所学习的时间会更久。如果是报名web前端开发培训班有专人辅导的学习，一般培训时间在4-6个月。

易牛云朗沃专注IT教育15年。

本文主要讲解

一、小程序优势有哪些？

二、学习微信小程序，需要什么基础？

三、如何学习小程序？

四、小程序项目的基本文件类型

五、总结

前言

微信小程序作为近几年“微服务”的杰出代表，应用十分广泛。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

说的通俗一些，微信小程序就是微信中非常小巧的程序（这不废话......），我们打开自己手机中的微信，向下一拉，就可以看到小程序列表了。比如“腾讯QQ”这个小程序，我们可以利用它，接收QQ的消息；再入“跳一跳”，“天天象棋”这些小游戏，我们可以利用学习工作之余的短暂空闲时间玩上一把小游戏......那么，为什么微信小程序能够有如此大的发展呢？现在就来谈谈我的看法。

笔者曾经在运维微信公众号的时候，发现了小程序的存在，后来就申请了一个，尝试着开发出了第一个属于自己的小程序。从无到有，再到现在的实战开发，虽然敲的代码都是套模板，思路也很暴力，但平时还是会积累很多小程序相关的实践经验和做一些基于微信小程序的开源项目，所以说总结微信小程序的项目经验，我觉得是我最好的成长，也希望给今年想接触微信小程序或者想从事微信小程序工作的朋友带来一些经验和思考。

一、小程序优势有哪些？

1、几乎不占用手机内存

如果你的电脑是低配的话，那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验，我给电脑安装若干杀毒软件，然后同时开始体检、木马扫描操作。实验结论：只需两个杀毒软件同时体检、杀毒操作就会导致死机，2分钟内鼠标键盘无响应且电脑无法正常工作；四个杀毒软件同时体检，电脑大概率蓝屏。

电脑为什么会死机，会蓝屏？就是因为电脑资源耗尽。同理，你如果给自己的手机装上几十个APP，效果可想而知。微信小程序几乎不占用系统内存，能给用户，尤其是低配手机用户一个良好的体验。

2、无需安装，用完即走

最近因为新型冠状病毒，全国大多数学生都在参与网上教学，这个时候会涉及到很多APP。当然常用的APP，安装在手机，完全没问题，但是那些不常用的、不太需要的如何是好？比如在大学，充饭卡一个APP，冲热水卡一个APP，跑步一个APP，看新闻做题也是一个APP，要请个假也是一个APP，可能还是学校强制要求安装的，大家是否吐槽过这种行为？

而微信小程序是建立在微信这个大平台的应用，使用时被打开，使用完毕就消失，而且随时都可被使用，做到了“用时打开，用完即走”。当然小程序还有其他优点，这里不再一一叙述。

继续阅读，你将会了解到这些

1、微信小程序需要的基础 2、微信小程序优势以及设计思想 3、如何学习微信小程序 4、微信小程序开发流程

二、学习微信小程序，需要什么基础？

阅读本文之前，建议大家最好要有以下基础知识，会写小程序的代码不一定能很好的实现业务需求和功能，要想实现不同项目需求下不同复杂度的逻辑，一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识，好好研究一下。

1、HTML：至少常用的标签要学会使用，比如按钮标签，文本标签，要知道一些标签是干什么用的。 2、CSS：了解类选择器、标签选择器定义和用法；了解常用的属性，比如height高度,width宽度，font-size字体大小等。 3、熟练一种编程语言：java/js/c++皆可，这里主要是要熟练变量定义、if条件判断、字符数组。 4、其他：相对/绝对路径，了解JSON格式，生命周期函数

三、如何学习小程序？

1、我个人认为，学习最快的方式就是实践，根据官方文档，多写几个demo是就是学习微信小程序最好的方式。 2、学习前端基础，包括但不限于HTML + CSS + JS + JQ。 3、学习小程序基础语法，了解小程序基本结构（JS、JSON、WXML、WXSS）。 4、实战，写项目。

初学者需要注意几点：

（1）小程序不像vue那样，修改代码按下保存后，网页上会立刻见效。每一次修改代码后，如需看效果，必须重新编译或者按Ctrl + S 保存，然后等待模拟器重新加载主页，才可查看修改后的效果。 （2）要善于调用模板或者接口，切忌大片自行编程。如果需要实现某个功能，先查询一下官网文档，是否有相应的模板或库。 （3）如果是需要对接数据库的项目，必须在开发前购买服务器，实名认证且备案，小程序开发时间一般少于服务器审核时间（对于小项目来讲），小程序请求的地址必须是已备案的域名。 （4）不要使用传统编程思想来看待小程序开发，小程序不像Java那样可以随心应手的写，其部分功能未必能够实现。

四、小程序项目的基本文件类型

首先是开发工具！磨刀不误砍材工，要想高效率的开发，必须要熟练使用开发工具（IDE）。下面我们先来了解一下微信小程序的专属开发工具。

官网下载地址： developers.weixin.qq.com/miniprogram…

第一块区域是模拟器区域，是我们代码效果的直接显示，按下CTRL + S 或者编译键，模拟器区域会刷新显示我们的界面。

第二块区域是项目结构页面，一个小程序主体部分由三个文件组成，必须放在项目的根目录，分别是：JS（小程序逻辑）、JSON（小程序公共配置）、WXSS（小程序公共样式表）。每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，且描述页面的四个文件必须具有相同的路径与文件名。

第三块区域就是我们编写代码的区域，占用了大部分的屏幕。

第四块区域是调试区域，小程序可以通过console.log()向控制台输出临时的信息，就相当于C++的cout<<"hello zwz"<<endl; 也相当于Java的syso。这时候这些临时信息会在这个区域显示，方便我们调试程序。

第五块区域就是常用的功能模块，这里点击编辑，代码区会自动保存，模拟器会重新加载界面；点击上传代码，会发送到微信公众平台上，然后用于发布小程序。

其中第二块区域的项目结构，我们重点介绍

第一块：JSON

上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。

比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

第二块：WXML

WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

比如最常用的双向数据绑定：

index.wxml

index.js

这样，我们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。 这时，我们按下CTRL + S（保存，重新编译），我们会发现前台会渲染出 hello zwz。 这就是传说中的双向数据绑定，你把JS后台的 hello zwz 改成 hi zwz，那么前台也会显示 hi zwz，以此类推。

同理，如果是数组：

在JS页面的Page的data下，加上array变量，作为普通数组

接着将WXML界面的msg替换成array，界面则会显示如下：

本文原创首发CSDN，链接  blog.csdn.net/qq_41464123… ，作者博客blog.csdn.net/qq_41464123

第三块：WXSS

WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。 那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。 具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。

第四块：JS

这一块毫无疑问，就是用来存放后端逻辑代码的，我们需要掌握几个常用的生命周期函数，

然后就是自定义方法，注意是和onLoad()平级。

比如，我们在WXML内定义一个按钮

接着，在JS页面编写响应事件

那么，我们在点击这个按钮之后，就会触发run()这个方法。

五、总结

总而言之，本文讲解了微信小程序项目的基本架构，以及如何学习微信小程序，以及学习微信小程序所需要的基础，还有前台渲染的基本代码。

                                                                             👇🏻 添加 博主 获取源码资料👇🏻