第二章总结

（一）小程序的基本目录结构

1.在微信小程序开发基础中，小程序的基本目录结构有：app.js,  app.json,  app.wxss,  project.config.json

如下图：

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

2.页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。

（1） .js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件
  在每个小程序的页面中不可缺少。

（2） .wxml 文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文    件。该文件在页面中不可缺少。

（3） .wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件    时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss 中指定的样    式规则。该文件在页面中不可缺少。

（4） .json 文件页面配置文件。该文件在页面中不可缺少

3.主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

（1）app,js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页      面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少。

（2）app,json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

（3）app wass小程序主样式表文件，类似HTML 的.css文件。在主样式表文件中设置的样式在其    他页面文件中同样有效。该文件在项目中不是必需的。

（二）小程序的开发框架

微信团队为小程序的开发提供了MINA框架。如下图：

（三）配置文件

1.全局配置文件如图：

2.Windows配置项及其描述：

在app.js中设置如下window配置项

"window": {
     "navigationBarBack groundColor": "#fff",
     "navigationBarText Style": "black"，
     "navigationBarTitl eText":"小程序window功能演示"，
     "backgroundColor"	"#ccc"，	
     "backgroundTextSty le": "light"
}

3.tabBar配置项及其描述以及tabBar中list选项

在app.json文件中设置如下tabBar配置：

"tabBar":{
     "color": "#666666"，
     "selectedColor":"#ff0000"，
     "borderStyle": "black",
     "backgroundColor":"#ffffff"，
     "list":[
            {
            "pagePath": "pages /index/index",
            "iconPath"; "images/index1.png",
            "selectedIconPath": "images/index2.png",
            "text":"首页"
            }，
            {
              "pagePath": "pages /news /news",
              "iconPath": "images /news1.png",
              "selectedIconPath": "images/news2.png",
              "text":"新闻"
            }
        ]
      }
}

4.networkTimeout配置项

（四）逻辑层文件

1.项目逻辑文件配置项

我们在Demo的app.js代码如下：

App({
//当小程序初始化完成时，会触发onLaunch(全局只触发一次
onLaunch: function () {
  console.log(“小程序初始化完成......”)
},
//当小程序启动(或从后台进入前台显示),时会触发onShow 
onShow; function (options){
  console.log("小程序显示”);
  console.log( this.data); 
  console.log(this.fun())
},
//当小程序从前台进入后台，会触发onHide
onHide: function (){
  console.1og("小程序进入后台”)
},
// 当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息
onError; function (msg){
},
//自定义方法
fun; function (){
  console.log("在app,js中定义的方法");
},
//自定义属性
data:‘在app.js中定义的属性’
}）

2.页面逻辑文件配置项

（五）页面样式文件

WXSS常用属性