02.小程序结构分析

基本结构

 

一个最简单的小程序由app.json和index.wxml组成。下图是比较完整的demo

 

 

pages

具体的页面目录

 

app.js  （文件名必须是app.js）

全局js  

 

app.json （文件名必须是app.json）

页面配置文件，每增加一个新的wxml，需要在这个页面配置

 

app.wxss

全局样式表  （文件名必须是app.wxss）

 

project.config.json

项目配置文件

ps ：wxml和wxss即是html和css

 

 

 

例子

 

点击箭头所指出，控制台打印“hello world”

 

 

app.json配置

 

{
  "pages" : [
    "pages/index/index"
  ]
}

pages/index/index.wxml

<text bindtap="myClick">{{text}}</text> <!--bindtap相当于点击事件-->

pages/index/index.js

Page({
  data: {
    text: '点击',
  },
  myClick(){
    console.log('hello world');
  }
})

pages/index/index.wxss

text{
  color: red;
}

pages/index/index.json  （该json为当前页面的配置json文件，因为这个例子不需要配置index，所以默认至少需要给一个空对象，不然会报错）

{}

App.js

App({
  onLaunch(){
    console.log('小程序加载完毕！');
  }
})

app.json

{
  "pages" : [
    "pages/index/index"
  ]
}

app.wxss

page{
  background: #ccc; //这里的page相当于html的body
}

 

结构解析

1、 框架首先会解析配置文件 app.json ，通过 pages 设置找到默认页面 index.wxml ；

 

2、 然后再加载 index.wxss 、 index.js 、 index.json 这四个文件；

 

3、 一个完整的小程序中，文件主要包含框架程序主体文件和页面文件两种；

 

4、 框架主体包含： app.json 、 app.js 和 app.wxss ， 文件名必须是 app，而 app.json 和 app.js 是必须存在的，当然 app.json 缺失会报错；

 

5、 页面可能有一个或多个页面，由 .wxml 、 .wxss 、 .js 和 .json 四个文件组成，它们 分别控制页面的结构、样式、逻辑和配置，其中.wxml 和 .js 是必须的， 而且同一个页面的 这四个文件名必须是相同的 ；

 

6、 框架主体文件：

 

(1).app.json ：小程序公共配置，配置小程序全局设置；

 

(2).app.js ：小程序逻辑文件，主要用于注册小程序全局实例，编辑时会和其他 页面逻辑文件打包成一份 JavaScript 文件；

 

(3).app.wxss ：小程序公共样式表，所所有页面的布局文件有效；

//全局 CSS，app.wxss
page {
    background-color: #ddd;
}

//全局 JS，app.js
App({
    //当小程序加载完毕后
    onLaunch : function () {
       console.log('小程序已经加载成功！');
    }
});