2-微信小程序开发基础_小程序怎么建页面的文件夹-CSDN博客

本文链接：https://blog.csdn.net/2301_78291494/article/details/136468263

2-1：小程序的基本目录结构

pages：目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

utils：用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用

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

app.json：小程序公共设置文件，配置小程序全局设置。

app.wxss：小程序主样式表文件，类似HTML的.css文件。

2-2：小程序的开发框架

小程序MINA框架将整个系统划分为视图层和逻辑层。

视图层：由WXML与WXSS编写，由组件来进行展示。（对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合；.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式）

逻辑层：通过各个页面的.js脚本文件来实现的（在javascript的基础上，微信团队做了适当修改）

主要修改包括：（1）：增加app（）和page（）方法，进行程序和页面的注册。

（2）：提供丰富的API。

（3）：每个页面有独立的作用域，并提供模块化能力。

数据层：在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用。

1、页面临时数据或缓存：
（1）在Page( )中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应 this.data的值。

（2）setData()函数的参数接收一个对象，以(key,value)的形式表示将key在this. data对应的值改变成yalue。
2、文件存储(本地存储)使用数据 API 接口，如下:
（1）wx.getStorage获取本地数据缓存。

（2）wx.setStorage设置本地数据缓存。

（3）wx. clearStorage清理本地数据缓存。

3.网络存储与调用：

上传或下载文件 API 接口,如下:

（1）wx.request发起网络请求。

（2）wx.uploadFile上传文件。

（3）wx.downloadFile下载文件。

调用 URL的 API接口，如下:

（1）wx. navigateTo新窗口打开页面。

（2）wx.redirectTo原窗口打开页面。

2-3：创建小程序页面

要创建小程序页面，首先需要创建一个文件夹，然后在文件夹中创建以下四个文件：

1. `index.wxml` - 用于编写页面结构；
2. `index.wxss` - 用于编写页面样式；
3. `index.js` - 用于编写页面逻辑；
4. `index.json` - 用于配置页面。

以下是一个简单的示例：

index.wxml:
<view class="container">
  <text class="title">欢迎来到我的小程序！</text>
  <button bindtap="onButtonClick">点击我</button>
</view>

index.wxss:
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

index.js:
Page({
  onButtonClick() {
    wx.showToast({
      title: '你点击了按钮',
      icon: 'none',
    });
  },
});

index.json:
{
  "navigationBarTitleText": "首页"
}

这个示例中，我们创建了一个简单的页面，包含一个标题和一个按钮。当用户点击按钮时，会弹出一个提示框显示“你点击了按钮”。

2-4：配置文件

全局配置文件：小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值( networkTimeout)以及配置多个切换页(tabBar)等。

页面配置文件：页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值。

2-5：逻辑层文件

项目逻辑文件：项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全
局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

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