微信小程序：小程序基本目录结构讲解
当我们打开一个微信小程序项目后，点击进入“编辑”菜单，我们可以看到有以下5个文件/文件夹）：pages文件夹，utils文件夹，全局文件app.js文件，全局文件app.json文件，图片编辑文件工具app.wxss文件。
小程序目录结构的整体结构如下：
我们详细介绍下小程序目录中每个文件和文件夹的功能，以及注意事项。
1.pages目录介绍
pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件：
index.js
.js是小程序的逻辑文件，也称事件交互文件和脚本文件，用于处理界面的点击事件等功能，像设置初始数据，定义事件，数据的交互，逻辑的运算，变量的声明，数组，对象，函数，注释的方式等，其语法与javascript相同。我们可以打开仔细查看index.js里面的代码。
首先，我们可以在data里面，motto是显示hello word,改变成hello微信小程序。如下图所示：
其次，我们看一下bindViewTap: function()的功能，是点击跳转到日志页面。我们可以点击头像看一下演示效果，如下图所示：
最后，我们看一下onLoad函数，是设置页面启动时的动作。我们可以修改页面启动时显示页面，也可以新增函数，如下图所示：
常用的用.js函数如下所示：
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
console.log('App onLoad')
},
onReady:function(){
// 页面渲染完成
console.log('App onReady')
},
onShow:function(){
// 页面显示
console.log('App onShow')
},
onHide:function(){
// 页面隐藏
console.log('App onHide')
},
onUnload:function(){
// 页面关闭
console.log('App onUnload')
}
})index.json.json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序的配置效果。我们可以在index目录下创建.json为配置文件，如下所示：
index.json该配置文件只能配置本级目录下的页面配置文件，并且只能对导航栏的相关文件进行配置修改，如用于修改导航栏显示样式，如导航的文字，背景颜色，文字颜色等。其语法跟json语法相同。我们举例修改一下导航栏的背景颜色为红色，如下图所示：
我们可以看到背景颜色变成的红色。。(这颜色真是惨不忍睹啊！)
index.wxml
.wxml文件是界面文件，是页面结构文件，用于构建页面，在页面上增加控件。全称是weixin markup lanuage的缩写，微信标记语言。跟其他一般标记语言一样，标签成对， 标签名小写。可以通过引用class来控制外观，也可以通过绑定事件来进行逻辑的处理，通过渲染来完成我们需要的列表等。是连接用户操作和后端逻辑的纽带桥梁。我们在页面的看到的元素，都可以在这里编辑。例如，我们在页面上放一个按钮，如下图所示：
在.wxml中如何对不需要的程序代码进行注释呢？如下：
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}000</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<!--<button type="primary">按钮</button>-->
</view>
