一.创建小程序
参考微信小程序开发零基础——必须得了解的入门知识（一）
新建
二.形成空白文件
点击打开目录，删除除了project.config.json以外所有文件
新建’app.json’接下来我们在app.json中写入配置
{}
保存，我们可以看到编译器报错，因为目前文件为空
三.小程序页面路径配置
都是在英文输入法中输入
首先在app.json中写入
{
"pages": [
"pages/index/index"
]
}
第一个pages项目里面有哪些页面
第二个pages指的是
保存，一定要先保存要不然建好回车没有反应
右击pages新建目录，命名为index
在index下新建pages命名为index
现在微信小程序改版了，需要在pages下新建目录才能新建页面
现在可以看到开发者工具以及自动的在我们的pages文件夹下的index目录中新建index页面路径，放入pages数组中
在 app.json 中，pages 数组是必填的。它规定小程序中所有页面的地址，同时规定了小程序启动时的首页，就是 pages 数组的首位所指的页面。
当 pages 成功配置后，小程序就可以正常运行了（新建页面文件后，小程序已经正常运行无报错了）。但如果想要一些个性化配置，我们依然可以继续修改 app.json。在 app.json 中，pages 数组是必填的。它规定小程序中所有页面的地址，同时规定了小程序启动时的首页，就是 pages 数组的首位所指的页面。
四.修改小程序页面
代码如下
{
"pages": [
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTitleText": "周偏偏",
"navigationBarTextStyle": "white"
}
}
是不是看到变化了！
在app.json中,window用于设置小程序的状态栏，导航条，标题，窗口，背景色。下面归类一下，有兴趣的小朋友可以挨个试一下
五.与WXML玩耍
插入文字
当我们打开index文件夹下面的index.wxml文件，可以看到开发者工具在自动生成页面的时候，默认生成代码如下。
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
第一行是注释，对代码解释说明。计算机执行程序会自动跳过注释编译。第二行代码前后都是由尖括号阔起来部分中间即是pages/index/index.wxml
当然，要是我们不喜欢就加点个性化内容趴
把中间改成hello China!保存运行
<text>Hello China</text>
是不是与这个红还挺搭！
在小程序中，
插入图片
下面我们在小程序中插入一张图片
首先在index页面下打开目录
新建image文件夹，根目录下创建
拖一张自己喜欢的图片进去，再回到开发者工具就回看到文件夹和图片都出现在目录下，与根目录平行，一定要注意别建错文件夹。
接下来我们在wxml中插入代码
<image src='/image/a.jpg'></image>
效果如下：
与 < text > 一样， 也是小程序的一个视觉组件，它代表在小程序里插入一张图片。
分割代码
在开发过程中把屏幕元素分割成不同部分，用独立的样式代码提高编码效率
例如我们用对元素部分进行区分
这样我们就可以统一处理图片的样式和其他操作。
