微信小程序实战教程
前言
小程序到如今已经发展了几年了，几乎变成前端人员必备的知识。最近重温了微信小程序的文档，决定使用原生微信小程序语法写一个仿制知乎的项目练手，下面的教程分为两块，分别是：css
- 微信小程序实战教程之1.基础知识。
- 微信小程序实战教程之2.仿制知乎项目。
对微信小程序的目录结构、语法等基础知识还不了解的伙伴建议从1.基础知识看起。前端
准备工做
- CSS采用SCSS编写，对SCSS不熟悉的同窗也能够直接使用CSS编写样式。
- 布局采用弹性布局 。
- JS使用ES6语法。
- 该项目主要写前端部分，因此不写后端接口，使用MockJS模拟后端接口返回数据。
下面的教程我主要讲代码结构与思路，不会无脑堆代码。使用面向对象的设计模式，经过ES6提供的类与模块概念，合理的组织/分离代码。git
在看教程以前，能够先将个人 项目下载下来放到微信开发者工具中运行，一边看源代码和效果一边看教程。github
使用vscode开发微信小程序
使用什么IDE是开发者本身的选择，微信开发者工具使用起来总有一些不顺手，因此我使用我比较熟悉的vscode进行开发，顺便在这里给使用vscode的伙伴推荐几个实用插件：json
-
minapp小程序
提供微信小程序标签、属性的智能补全，同时会提供中文文档的智能提示。后端
-
wechat-snippet微信小程序
提供微信小程序中代码的智能补全，能够做为上一个插件的补充设计模式
-
wxmlbash
提供wxml文件的代码高亮以及格式化代码功能
-
Live Sass Compiler
提供scss文件转换为wxss文件的功能。这个插件默认是将scss文件转换为css文件，须要改成scss文件装换为wxss文件须要修改配置文件，在项目根目录中找到.vscode文件夹（没有的话直接建立一个），而后找到setting.json文件（没有的话建立一个），修改文件内容为：
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".wxss",
"savePath": null
}
]
}
复制代码
效果
教程
交流
若是这篇文章帮到你了，以为不错的话来点个Star吧。 github.com/lizijie123