基本的项目目录:
- 项目目录图解:
- 以
app
开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages
的配置优先级高于全局配置(就近原则
) - 小程序是允许你修改文件目录名的
小程序配置文件:
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和 ⻚⾯⾃⼰的page.json
-
app.json
是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置
{
"pages":[
"pages/index/index",
"pages/calc/calc",
"pages/history/history",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#da7c0c",
"navigationBarTitleText": "简易计算器",
"navigationBarTextStyle":"white"
}
}
主体文件和页面文件:
微信小程序的主体部分由3个文件组成,这3个文件必须放在项目的主目录中,负责程序的整体配置,它们的名称是固定的。
■app.js小程序逻辑文件,主要用来注册小程序全局实例。在编译时,app.js文件和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。app.json 小程序公共设置文件,配置小程序全局设置。该文件在项目中不可缺少app.wxss小程序主样式表文件,类似HTML的:css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。2图北
2.1.2 页面文件
小程序通常是由多个页面组成的,每个页面包含4个文件,同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。
.js文件页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxm文件页面结构文件,用于设计页面的布局、数据绑定等,类似HTML 页面中的.html文件。该文件在页面中不可缺少。
w文件页面样式表文件,用于定义本页面中用到的各类样式表。当页面中有样式表文件时,文件中的样式规则会层叠覆盖Pp中的样式规则;否则,直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
.json文件页面配置文件。该文件在页面中不可缺少。
小程序框架接口:
Ⅰ-App(Object object)
注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果
相应的app()参数在下方的小程序生命周期中有指出
AppObject getApp(Object object)
获取到小程序全局唯一的 App 实例
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {GbaseUrl} =getApp() //GbaseUrl是自己在app.js定义的全局变量
注意:
1.不要在定义于 App()
内的函数中,或调用 App
前调用 getApp()
。使用 this
就可以拿到 app 实例。
2.通过 getApp()
获取实例之后,不要私自调用生命周期函数
小程序的开发框架:
创建小程序页面:
1创建第一个页面文件
2.创建另一个页面文件
配置文件:
全局配置项:
window配置项:
app.json中window配置项:
"window":{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"小程序window功能演示",
"backgroundColor":"#ccc",
"backgroundTextstyle": "light"
}
tabBar配置项:
tabBar中list选项:
networkTimeout配置项:
逻辑层文件:
1.项目逻辑文件:
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
项目逻辑文件配置项:
页面逻辑文件配置项:
2. 定义当前页面的生命周期函数
在Page()函数的参数中,可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
(1)onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
(2)onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次,代表页面已经准备就绪,可以和视图层进行交互。
(3)onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时,调用该函数。
(4)onUnload 页面卸 载函数。当页面卸载、进行navigateBack或redirectTo操作时,调用该函数。
页面结构文件:
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言,结合基础组件、事件系统,可以构建出页面的结构,即.wxm文件。在小程序中,类似HTML的标签被称为组件,是页面结构文件的基本组成单元。这些组件有开始(如<vew>)和结束(如</view>)标志,每个组件可以设置不同的属性(如id、class等),组件还可以嵌套。
WXML,还具有数据绑定、条件数据绑定、列表数据绑定、板、引用页面文件、页面事件等能力。
页面样式文件:
页面样式文件(WXSS)是基于CSS拓展的样式语言,用于描述WXML的组成样式,决
和修改,决定WXML的组件如何显示。
本章小结:
本章首先讲解了小程序的目录结构,然后通过目录结构介绍了小程序的框架,最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识,大家必须深刻理解和熟练掌握,并勤写代码多加练习,为后续的学习打下扎实的基础。
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/2301_76558412/article/details/136460328