第二章总结

最新推荐文章于 2024-10-09 19:50:31 发布

玫瑰自白诗。

最新推荐文章于 2024-10-09 19:50:31 发布

阅读量924

点赞数 19

文章标签： notepad++

本文链接：https://blog.csdn.net/2301_78416032/article/details/136445903

版权

一.微信小程序目录结构

1.项目结构：

`pages`：存放所有小程序的页面。
`utils`：存放工具性质的模块。
`app.js`：小程序的项目入口地址。
`app.json`：小程序项目的全局配置文件，包括所有页面路径、窗口外观、界面表现、底部tab等。
`app.wxss`：小程序项目的全局样式文件。
`project.config.json`：项目的配置文件，记录对小程序开发工具的个性化配置。

2.小程序的页面组成部分：

每个小程序的页面都存放在`pages`目录中，以单独的文件夹存在。
每个页面包括四个组成部分：
`.js`：页面的脚本文件，存放页面的数据、事件处理函数等。
`.json`：当前页面的配置文件，配置窗口的外观、表现等。
`.wxml`：页面的模板结构文件，相当于web开发中的HTML文件。
`.wxss`：当前页面的样式表文件，相当于传统的CSS，基本差不多。

3.项目结构和页面结构文件的一些说明：

`.json`文件在微信小程序中都是用来当作配置文件的，通过不同级别（根目录下或者页面目录下）的`.json`文件可以对小程序项目进行不同级别的配置。
页面中的`.wxss`文件的样式会覆盖掉`app.wxss`文件的样式，同样页面中的`.json`文件也会将全局配置文件`app.json`文件的window中相同的配置项覆盖掉。
以上是微信小程序的目录结构的基本概述。

二.小程序的开放框架

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

2.小程序MINA 框架将整个系统划分为视图层和逻辑层。视图层（View）由框架设计的标签语言 WXML(WeiXin Markup Language）和用于描述WXML 组件样式的 WXSS(WeiXin 框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页Style Sheets）组成，它们的关系就像HTML和CSS的关系。逻辑层（App Service）是 MINA 面交互处理逻辑都在逻辑层中实现。MINA 框架中的逻辑层使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的 DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA框架为页面组件提供了 bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能（如page切换、tab切换、多媒体、网络连接等）上使用接近于系统层（Native）的组件承载。所以，小程序 MINA 框架有着接近原生App的运行速度，对Android端和iOS端能呈现得高度一致，并为开发者准备了完备的开发和调试工具。

三.创建小程序页面

启动微信开发工具，创建新的项目demo2,此处不勾选"创建QuickStart项目"复选项，如图2-5所示。
小禾
单击"确定"按钮后，可以看到开发工具中的"目录结构"界面只显示项目配置文件(project. config. json)，同时系统提示错误信息，如图2-6所示。
编辑d
项
将在2.1.1小节中提到的3 个主体文件(app. js、app. json和app. wxss）在项目的主目录下建立，小程序依然提示错误信息。
0
2.3.1 创建第一个页面文件
继续在项目主目录下新建一个 pages目录，在pages目录下新建一个 index 目录，并在 index 目录下新建index.js、index. json、in-dex. wxml 和 index. wxss空文件。新建index页面后的项目目录结构如图2-7所示。

四.配置文件

小程序的配置文件按其作用范围可以分为全局配置文件（app.json）和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。
全局配置文件
小程序的全局配置保存在全局配置文件（app. json）中，使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求 API 的超时时间值(networkTimeout）以及配置多个切换页（tabBar）等。表2-2列出了各全局配置项的相关描述。

pages配置项
pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的"路径" + "文件名"。pages 配置项是必填项。
设置pages配置项时，应注意以下3点：
(1）数组的第一项用于设定小程序的初始页面。
(2）在小程序中新增或减少页面时，都需要对数组进行修改。
(3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对．js、.json、.wxml和.Wxss文件进行整合数据绑定。

{
  "tabBar":{ 
"color": "#666666",
"selectedColor": "#ff0000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
  {  
  "pages /index/index",
  "iconPath": "images /indexl. png",
"selectedIconPath": "images /index2. png",
"text":"日志"
  },
  {
"pagePath": "pages /news /hews",
"iconPath": "images /newsl.png",
"selectedIconPath": "images /news2.png",
"text": "新闻"
  }
]
}

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>

Pages({
  //页面的初始化数据
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{date:18}],
    //数组object:{hobby:'computer'}//对象
  }
  
})

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

debug配置项
debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console（控制台）面板上页面配置文件
页面配置文件（*.json) 只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app. json）中的配置值。