从零到一，你也可以做小程序（2）
如果你有html页面开发经验，小程序应该不会有任何难度，看一下官方文档即可。
这篇文章主要写给零基础的跨行小伙伴，如何开始一步一步制作自己的小程序。
上篇咱们体验了几个小程序，应该对小程序有了一个初步的了解。今天我们来看看，开发小程序，是个怎么一回事。
文中所使用的截图、工具，来自Mac系统，Windows系统下基本也是相似的。
一、项目创建
首先，打开上一篇提到的 “微信开发者工具”，
首次打开
扫码之后
我们要开发小程序，所以点左边的“小程序项目”
出现的界面如下，右侧是项目历史纪录，如果第一次打开，会是空白的。我们新建一个项目，点击新建按钮。
新建项目
之后出现界面：
创建新项目
1、项目目录，就是想要把文件存放在什么目录，点进去任意选择一个空的目录即可。
2、AppID，在上一篇让大家注册小程序帐号，是不是已经准备好了呢？没有注册的话，点击下方的体验“小程序”，也可以创建项目，但只能在开发工具的模拟器上查看，手机上是不能预览的，所以还是希望提前注册一个帐号，链接在这里 小程序注册 。
已经注册可以登录到小程序的系统，https://mp.weixin.qq.com/ 进行登录，查看自己的AppID
查找AppID
填写到AppID的框中
3、项目名称，随意起一个就可以，比如 “xxx第一个小程序”
完整展示
没有AppID的完整界面
含有AppID的完整界面
建立普通快速启动模板，选中就好，2个基础页面在里面。
这样，一个新的项目就建好了。
完整的开发工具界面
如果可以做到这一步，恭喜你，可以开始制作自己的小程序了。
二、简单认识小程序的页面组成
在开发工具中的文件目录中，点击 pages/index/index.wxml 打开，看到右侧的代码了吗？
总体认识一下
通过下图里的标注，我们看看代码都有什么作用。
标注图
看左侧区域 “获取头像昵称” 是个按钮，右侧红线框起来的代码 <button ...>获取头像昵称</button>，也就是说页面里需要一个按钮的时候，就用 <button>按钮文字</button>来写。
你可以试着，随便写点什么，感受一下。
下面的“Hello World”，代码里是 <text>{{motto}}</text>，{{motto}}是个什么东东？这个咱们急需要打开index.js文件了
Hello World
看到“Hello World”了吗？他怎么会在这里呢。没有做过前端的同学，一定会蒙圈的，我们来解释一下。
小程序的页面，有四种类型组成，分别是：.wxml、.js、.wxss、.json，以首页的index为例，是 index.wxml index.js index.wxss 这里缺少了 index.json。
.wxml： WXML(WeiXin Markup language)微信开发的一套标签语言，对应网页里的html
.wxss：WXSS(WeiXin Style Sheet) 用于描述页面的样式，对应网页里的css
.js：js脚本逻辑
.json：JSON格式的配置文件
更多介绍，可以查看这里 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html 。
最好的基础文档，都是官方的文档。
其他的文章，都是便于更好的理解，也包括这篇文章。
三、小程序WXML的组件
其实，这部分还是看看官方文档最好，https://developers.weixin.qq.com/miniprogram/dev/component/。先大概有个印象，之后咱们在开发使用过程中，慢慢熟悉他们的使用方式。
为了便于理解，举个例子来说明一下。
页面里最常用的是view标签，可以把view想象为一张透明的纸。
默认情况：宽度和手机屏幕一样宽，高度是0，也就是如果里面没有内容，是没有高度的，如果里面放内容，高度可以无限增大。
view标签里面再嵌套一个view，可以假想为，透明的纸上面，又放了一张透明的纸。就像小朋友玩剪纸，大圆是人的脑袋，放在最底层，小圆当做眼睛，放在大圆的上面，眼睛的位置。
小程序页面里，可以用wxss来设置位置、大小、颜色、背景。。。
好的，这篇先到这里，下一篇咱们直接用“个人介绍模板”做讲解，改造成你自己的个人介绍。
