微信小程序开发之二 —— 主页面布局与app.json的全局配置

学习前后

上一篇：微信小程序开发之一 —— 准备工作
下一篇：微信小程序开发之三 —— wxml与wxss

小程序目录结构

小程序包含整体的app文件和多个各自页面的page,主体结构控制着整个小程序得到页面布局，如果其他page页面没有设置样式结构，将会沿用主体结构里面的配置。

主体结构

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

页面结构

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

全局配置

app.json文件就是对整个小程序进行全局配置的，我们先来看一下json的语法。
API文档：全局配置

json语法

• 大括号{}为对象，大括号包含的内容表示一个对象
• 中括号[]为数组，保存一系列的数组元素
• 数据之间使用英文逗号,隔开，最后一个不用加逗号
• 使用键值对的方式存储值，即key:value的形式
• key的值要用双引号包含""

注意：.json文件里面不能写注释

页面创建

页面创建直接在app.json文件的pages里面添加即可，当然也可以右键创建文件。

"pages": [
    "pages/first/first"
    "pages/second/second",
    "pages/three/three"
  ],

这样我们就创建了三个页面first，second，three，可以看到左边就多了三个这样的文件夹,每个文件夹都有四个文件js、json、wxml、wxss,前面说过页面的js与wxml文件是必要，所以另外两个删掉也不会影响运行，当然还是留着好，毕竟是用来重设布局渲染美化的（上一篇新建看到的那一堆pages文件我全删了，就是重新开始写）。