微信小程序从0-1（前端篇）

本文主要介绍一个程序人员如何从0-1开始编程小程序。原本我也是一名新媒体运营人员，机缘巧合转战小程序。

前期准备：（入门初级前端）

（已具备html+css+js的同学可以忽略此步骤）

把一个项目的完成比作造房子，HTML就是你的基础结构，而决定你的房子是否好看的则是CSS样式，最终配合上JS就是你的水电设施。

1.HTML学习

1.1首先用编辑器或者至直接用text文本保存index.html（注：需要另存为utf-8，否则会出现中文乱码）
1.2 实例操作（动手能力很重要）
学习网站：http://www.runoob.com/html/html-tutorial.html

左侧的列表都要一次点击，对所有的实例在本地敲一遍，有标识【注意】的实例需要将该话重复看三遍，【尝试一下】都是在线操作实现，需要实操。
1.3 完成指标
完成周期8-12小时
相关任务，思考问题：什么是行列元素？什么是块级元素？并罗列出来。

2.CSS学习

2.1 CSS的引入方式（行内样式、内部样式表、外部样式表）一般使用第三种，初学测试阶段可以使用第二种
2.1.1行内样式
使用style属性引入CSS样式。
示例：

  
  


     
     
Leaping Above The Water
     
我是p标签

2.1.2在style标签中书写CSS代码。style标签写在head标签中。
示例：

  
  
  
  


     
我是DIV

Tips：实际在写页面时不提倡使用，在测试的时候可以使用。
2.1.3CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
示例：

  
  
  
   
  
  


     

         
1
         
2
     

2.2 实例操作（动手能力很重要）
学习网站：http://www.runoob.com/css/css-tutorial.html
联系对象及要求参照HTML的学习
着重学习：类表样式、表格、盒子模型、边框、外边距、填充、显示、定位、浮动、对齐、伪元素、媒体类型、渐变、2D转换、过渡、动画
2.3 完成指标
完成周期5-7天（一天按8小时计算）
2.4阶段任务I
结合所学HTML+CSS实现第一个网站的静态页面 http://www.bootcss.com/ （完成指标1天，可请专业人士审核评价，精简代码，并反思）

2.4阶段任务II
结合所学HTML+CSS实现第二个网站的静态页面 https://www.jd.com/?cu=true&utm_source=www.linkhaitao.com&utm_medium=tuiguang&utm_campaign=t_1000039483_lh_zc8kq1&utm_term=3ebfe36f55b74e74aee31e443671fe7f （完成指标2-3天，可请专业人士审核评价，精简代码，并反思）

2.5 巩固进阶
慕课网学习实操： https://www.imooc.com/learn/33 （完成指标3-5天）


2.6阶段任务III
结合所学HTML+CSS实现第一个网站的静态页面 https://m.jd.com/ （完成指标2-3天）

3.JavaScript学习

3.1实操（完成指标2-3天）
学习网站 http://www.runoob.com/js/js-tutorial.html
3.2视频学习（建议先掌握基础的知识再看视频教学）
https://study.163.com/course/courseMain.htm?courseId=224014 （完成指标15-20天）
3.3恭喜你已经成为一名前端工程师了。

小程序进行时：

1.学会看API文档
https://developers.weixin.qq.com/miniprogram/dev/index.html
2.视频教学
http://coding.imooc.com/class/75.html （完成列表详情的位置部分，你就可以独立，不过这个视频要付费是目前初学者比较适合的一门课）
3.如有其它以后请留言或者翻阅我的其它文档，仅供参考。