基本框架：
.wxml ：页面骨架
.wxss ：页面样式
.js ：页面逻辑 描述一些行为
.json ：页面配置
创建一个小程序之后，app.js,app.json,app.wxss是必须的，而且名字也不能随意更改，这些是作用于APP全局的，而用户创建的一些目录，这些可以看做一个个页面，这些目录下面也包含上面所说的.wxml文件，.wxss文件，.js文件，.json文件。这些文件和目录的名字是可以随意取的。有的文件不是必须的，可以参考微信小程序官方文档。如下：
就近关系：对于一个样式来说，如果既在全局里配置了，也在某个页面配置了，那么以离页面最近的样式为准。比如在全局样式表里配置文本颜色是红色，在某个页面的样式表配置了文本颜色是黑色。那么当打开这个页面的时候，文本颜色是黑色，而不是红色。这对于.json文件也是一样。
应用程序和页面之间的关系：
微信小程序允许纵向级数最高五级，后面会介绍导航组件，设置几级页面以及之间的跳转。
代码实例：
程序目录为：
app.json：
1 /*app.json是全局配置文件，在这里不能随意添加注释*/ 2 { 3 "pages": [ 4 "pages/welcome/welcome" /*设置页面路径，一定要按照先后顺序来写，不然会报错。*/ 5 /*会自动关联以welcome开头的所有类型文件*/ 6 7 ], 8 9 "window":{10 "navigationBarBackgroundColor":"#b3d4db" /*设置导航栏颜色*/11 } }
app.wxss：
1 text{2 font-family: MicroSoft Yahei; /*配置全局文本字体，通用的配置放在这里*/3 4 }
welcome.wxml：
1 <!--wxml是编写小程序骨架的文件-->2 <view class="container">3 <image class="userinfo-avatar" 4 src="/images/头像.jpeg"></image> <text class="user-name"><text style="color:red">hello</text>,morning</text> 5 <!-- style="" 这样的样式可以写在wxss里，然后用class调用--> 6 <!--如果是静态的样式，写在wxss里然后用class调用；如果需要动态修改样式， 用style实现-->7 <!--在<text></text> 组件之中的文本，才可以在手机上长按选中复制；text可以嵌套使用；在text里\n是换行而不是字符-->8 <view class="moto-container"> <text class="moto">开启小程序之旅</text> </view> </view>
welcome.wxss：
1 /*CSS要有一个整体布局的思想，把页面看做一个整体，然后对它进行样式的配置。而不是把一个页面中，每个部分独立分开排布。*/ 2 .container{ 3 display: flex; /*将容器变成弹性模型*/ 4 flex-direction: column; /*列方向排列*/ 5 align-items: center; /*居中*/ 6 } 7 8 .userinfo-avatar { 9 width: 200rpx; /*开发建议以iphone6，750rpx：1334rpx为例设计，单位是rpx可以自适应各种移动端分辨率。*/10 height: 200rpx; /*设置宽，高。*/11 margin-top: 160rpx;/*设置距离顶部的距离*/12 }13 14 .user-name{15 margin-top: 100rpx;16 font-size: 32rpx; /*字体大小*/17 font-weight: bold; /*字体加粗*/18 19 }20 21 .moto-container{22 margin-top: 200rpx;23 border: 1px solid #405f80; /*外边矩形*/24 width: 200rpx;25 height: 80rpx;26 border-radius: 5px; /*圆角矩形*/27 text-align: center; /*水平居中*/28 }29 30 .moto{31 font-size: 22rpx;32 font-weight: bold;33 line-height: 80rpx; /*垂直居中，让文字高度等于容器高度*/34 color: #405f80;35 }36 37 page{ /*小程序自动在页面的最外层加了一层<page></page>标签，我们的所有组件的标签都是写在 这里面的。所以，如果我们要对整个页面进行操作，需要修改page的样式。*/ 38 height: 100%; /*整个页面的高度*/39 background-color: #b3d4db; /*设置整个页面的颜色，这样就算把页面向下滑动，
整个页面的背景也是这个颜色的。*/40 41 }
整个页面显示如图：
