小程序的基本目录结构

认真就怂

已于 2024-03-08 13:38:23 修改

阅读量425

点赞数 7

文章标签：小程序前端

于 2024-03-04 11:44:10 首次发布

本文链接：https://blog.csdn.net/2402_83179007/article/details/136446536

版权

pages目录中有两个子目录，分别是index和logs，每个子目录中保存着一个页面相关文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。

主体文件

1.app.js 小程序逻辑文件，主要用来注册小程序全局实例

2.app.json 小程序公共设置文件配置小程序全局设置

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

页面文件

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

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

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

4.json文件页面配置文件。该文件在页面中不可缺少。如图：

小程序的开发框架

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavascriptAPI，让发者能够非常方便地使用微信客户端提供的各种基础功能快速构建使用。

配置文件

1.全局配置文件

小程序的配置文件（app.json}中使用全局配置文件来配置页面文件（pages）的路径、设置窗口（widow）表现、设定网络请求API的超时时间值（network Timeout）以及配置多个切换页（tabBar）等。

{
//设置页面路径
"pages":[ ],
//设置默认页面的窗口表现
"window":{|，
//设置底部 tab的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{}，
/设置是否开启debug模式
"debug":false
}

pages配置项

pages配置项接受一个数组，用来指定小程序由那先些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。

设置pages配置项时，应注意以下3点：

（1）数组的第一项用于设定小程序的初始页面。

（2）在小程序中新增或减少页面时，都需要对数组进行修改。

（3）文件名不需要写文件扩展名。小程序框架会自动寻找路径对.js、.json、.wxml和。wxss文件进行整合数据绑定。

{
"pages":[
"pages /news /news"，
"pages/index/index"
     }
}

window配置项

window配置项负责设置小程序状态栏、导航条、标题、窗口背景颜色等系统样式。window配置项可以配置的对象参考表如图：

"window":{
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle": "black"，
"navigationBarTitleText":"小程序window功能演示"，
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"
}

tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现taBar配置项可以配置的属性如表

其中，list（列表）接受数值组，数组中的每一项也都是一个对象。对象的数据值说明如表

{

"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":"新闻"
         }
     ]
  }
}

networkTimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

逻辑层文件

小程序中逻辑层文件分为项目逻辑文件与页面逻辑文件。
1、项目逻辑文件
项目逻辑文件app.js中可以通过App（）函数注册小程序周期函数、全局属性和全局方法、已注册的小程序实例可以在其他逻辑文件中通过getApp（）获取。

当启动小程序时，首先会依次触发生命周期函数onl.anuch和onShow方法，然后通过app.json的pages属性注册相应的页面，最后根据默认路径加载首页；当用户单击左上角的”关闭“按钮或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入后台，这两种情况都会触发onHide方法。当用户再次进入微信或者再次打开小程序时，小程序会后台进入前台，这时会触发onShow方法。只有当小程序进入后台一段时间（或者系统资源占用过高）时，小程序才会被销毁。

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript 引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作 DOM 改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表

1、设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript ObjectNo-
(字符串、数字、布值、对象、数)。 tation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON 的格式
视图层可以通过WXML对数据进行绑定。
数据初始、数据绑定及运行效果如图2-12所示。
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wxredireetTo 及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady页面数据绑定数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
件用该函数。 onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数
引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供
了两种方式来引用其他页面文件。
1.import 方式
如果在要引用的文件中定义了模板代码，则需要用import方式引用。例如，在a.wxml文件中定义一个item模板代码如下:

//a.wxml
<template name = "item">
<text >{|item.name}|	</text >	
<text >|{item.age|}	</text >	
</template >

如果要在b.wxml文件中使用item模板，首先需要使用import方式引用a.wxml文件，然后通过template使用item模板。代码如下：

//b.wxml
<import	src="a.wxml" />	
<template is="it	em"	data = "{ {student|!*/>

include 方式
之外的其他代码全部引入，相当于将源文件中的代码
include 方式可以将源文件中除模板复制到include 所在位置。
例如，在aa.wxml文件中定义如下代码:

//aa.wxml
<text >{{item.name	}</text >	
<text >{|item.age}	< /text >

页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。
定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码
调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key =value”形式出现，key(属性名)以bind 或catch开头，再加上事件类型，如bindtap、eatchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。例如，下列示例代码定义了click函数，将事件信息输出到控制台：

//.wxml
<view bindtap = "click">单击我</view >//.js Page({
click:function(event){
console.log(event);

小程序中，事件分为冒泡事件和非冒包事件两大类型。
1.冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的J页级元素。
2.非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如表

页面样式文件

页面样式文件(WXSS) 是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CsS的大部分特性，小程序对WXSS 做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WxSS在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375px，所以在iphone6中，1rpx=0.5px。

2.样式导入

为了便于管理wxss文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。例如：

//a.wxss
.cont{border:1px solid #f00;}
//b.wxss
@ import"a.wxss;"
.cont{padding:5rpx;margin:5px;}

以上代码的效果与下列代码的效果相同：

//b.wxss
.cont{border:1px soli d #f00; 
Padding:5px;margin:5px;}

选择器
目前，WXSS 仅支持CSS中常用的选择器，如.class、#id、element、::before、∷aftert 等。
4.WXSS 常用属性
WXSS 文件与 CSS 文件有大部分属性名及属性值相同，Wxss的常用属性及属性值如表

认真就怂

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序的基本目录结构

pages目录中有两个子目录，分别是index和logs，每个子目录中保存着一个页面相关文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。
复制链接

扫一扫