小程序结构目录【小程序专题11】
小程序结构目录
下图是程序目录,每一个我都给大家标注出来了,大家前期不用死记硬背,后面开发学习过程中,用的多了, 自然就记住目录下每个文件的作用了。
|- app.json
|- app.js
|- pages
|- home
|- home.wxml
|- home.js
这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构,在上面不断添加其他内容。
这个结构分成两层:描述整体程序的顶层 app 脚本,以及描述各个页面的 page 脚本。
1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。
2、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
我们注意到,在实例程序的代码中还有2个文件夹,一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.
。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
index.wxml 是页面的结构文件:
index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
index.wxss 是页面的样式表:
页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件:
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
小程序开发三剑客
小程序三剑客: wxml+wxss+js
1, wxml主要用来布局组件的(相当于大楼结构) 如:楼有几层,每层有多少房间,有什么设备 2, wxss主要决定显示样式(决定大楼的样式) 如:颜色,大小,宽高等 3, js主要用来处理逻辑(决定大楼具备哪些功能) 如:大楼具有电梯功能,空调制冷,灯光,供水,供电,主要是为了大厦的运行。
小程序文件和传统web对比
结构 | 小程序 | 传统web |
---|---|---|
结构布局 | Wxml | Html |
样式 | Wxss | Css |
逻辑 | JavaScript | JavaScript |
配置 | Json | 无 |
相关文章
- 基于BuildKit优化Dockerfile的构建
- Hadoop YARN
- Windows 10任务管理器优化Edge:更直观显示进程用途
- Windows 10软件包管理器现在可从命令行删除任何应用程序
- 大数据背景下 个性化服务如何成功落地?
- 你会用吗?Linux五大数据可视化工具
- 大数据挑战:敢不敢不要加入人的判断?
- 用 Linux 翻新旧的 MacBook
- 使用Windows 10系统,让电脑字体缩放125%模糊怎么办,简单调整即可
- 预测2014年大数据:不再只是停留在吹捧上
- 想安装Windows 10系统,但不知道Windows 10电脑专业版怎么样,看看详细分析
- Google 正在开发全新的 Chrome 历史记录界面
- 微软和OpenStack成亚马逊Hadoop即服务新对手
- 爱奇艺 Windows 10 UWP 版时隔一年再次更新
- 微软终于放大招了!这次能干掉Linux桌面?
- 安卓to鸿蒙系列:Logger
- 为什么 Linux 和 MacOS 不需要碎片整理
- Firefox 89 Beta 发布:全新现代 UI,精简菜单、增强隐私 / 安全
- Windows 10 v1909 即将结束服务,微软推出可靠性补丁更新
- 多台Windows10系统电脑,如何才能共享打印机,学会这招就能共享打印