基本结构
一个最简单的小程序由app.json和index.wxml组成。下图是比较完整的demo
![](https://i-blog.csdnimg.cn/blog_migrate/1d3b7a7b4fe8cfe87bf580a20fc0de01.png)
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”
![](https://i-blog.csdnimg.cn/blog_migrate/c973657b66ed91c634ace65dac67a8b3.png)
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('小程序已经加载成功!');
}
});