第二章总结

最新推荐文章于 2024-09-27 16:54:54 发布

lbh_0721

最新推荐文章于 2024-09-27 16:54:54 发布

阅读量827

点赞数 19

文章标签： notepad++

本文链接：https://blog.csdn.net/Kaedeciki/article/details/136468152

版权

了解小程序的基本目录结构

了解小程序的开发框架

掌握小程序的文件类型(示例代码与运行结果从项目逻辑文件开始)

掌握小程序的相关配置信息

小程序的基本目录结构

项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)

在主目录中，3个以"app"开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件

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

utils目录用来存放一些公共的.js文件

主题文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，他们的名称是固定的。

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

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

app.wxss：小程序主样式表文件，类似于HTML的.css文件。该文件在项目中不是必须的

页面文件

小程序通常是由多个页面组成的，每个页面包含4个问价，同一页面的这4个文件必须具有相同的路径与文件名。位于pages文件夹内

.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

.wxml文件：页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件

.wxss文件：页面样式文件，用于定位本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则回层叠覆盖app.wxss中的样式规则；否则直接使用app.wxss中指定的样式规则

.json文件：页面配置文件

小程序的开发框架

小程序MINA框架示意

MINA框架将整个系统划分为视图层、逻辑层。视图层使用标签语言WXML和用于描述WXML组件样式的WXSS组成。逻辑层是MINA框架的服务中心。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

视图层

对于小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss用于描述页面的样式。

逻辑层

微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，做出了修改，主要包括：

1)增加了app（）和page（）方法，进行程序和页面的注册

2)提供丰富的API，如扫一扫、支付等微信特有的能力

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

数据层（不显示）

1.页面临时数据或缓存

2.文件存储（本地存储）

3.网络存储与调用

创建小程序页面

删除原index文件，并删除app.json内的"pages/index/index"

在pages文件夹内新建文件夹，命名为news,在news内新建news.js、news.json、news.wxml、news.wxss，在app.json内，在"pages/logs/logs"上添加一行" "pages/news/news","

在news.js内输入Page({

})

在news.json内输入{

}

在news.wxml内输入想要显示的内容，之后编译运行即可，若想要修改内容的样式，则在news.wxss内进行修改，类似于html内的css

掌握小程序的文件类型

JSON 文件：用于配置小程序的全局配置和页面配置，包括小程序的基本信息、页面路径、窗口样式、导航栏样式等。
WXML 文件：类似于 HTML，用于编写小程序的页面结构，包括标签、属性和数据绑定等。
WXSS 文件：类似于 CSS，用于编写小程序的页面样式，包括选择器、样式属性、样式表达式等。
JS 文件：用于编写小程序的逻辑代码，包括页面的生命周期函数、事件处理函数、数据处理和业务逻辑等

配置文件

pages：用于定义小程序的页面路径，是一个数组，每个元素是一个字符串，表示一个页面的路径。
window：用于定义小程序的窗口样式和导航栏样式等。可以设置窗口的背景颜色、顶部导航栏的背景颜色和文字颜色等。
tabBar：用于定义小程序底部的选项卡栏，包括选项卡的图标、文字、页面路径等。
networkTimeout：用于设置小程序的网络请求超时时间，可以分别设置 request、connectSocket、uploadFile、downloadFile 的超时时间。
navigationBarTitleText：用于设置小程序默认页面的导航栏标题文字。
navigationBarTextStyle：用于设置小程序默认页面的导航栏标题文字的样式，可以设置为 black 或 white。
backgroundColor：用于设置小程序的背景颜色。
backgroundTextStyle：用于设置小程序的下拉刷新样式，可以设置为 dark 或 light。
enablePullDownRefresh：用于设置小程序是否支持下拉刷新。
debug：用于设置小程序是否开启调试模式。

全局配置文件

window配置项

tabBar配置项

networkTimeout配置项

逻辑层文件

在微信小程序中，逻辑层文件主要是指 JavaScript (JS) 文件，用于编写小程序的逻辑代码和业务逻辑。逻辑层文件包含以下几个方面的内容：

页面生命周期函数：逻辑层文件中可以定义页面的生命周期函数，例如 onLoad、onShow、onReady、onHide、onUnload 等。这些生命周期函数在小程序页面的不同阶段被触发，可以用于执行相应的初始化、数据加载、页面渲染等操作。
事件处理函数：逻辑层文件中可以定义事件处理函数，用于响应用户的交互操作。例如，通过监听按钮的点击事件或表单的提交事件，编写相应的事件处理函数来执行相关操作。
数据处理：逻辑层文件可以处理数据的获取、处理和存储。可以通过调用小程序提供的 API，从服务器获取数据，对数据进行处理和转换，然后将数据传递给视图层进行展示。
业务逻辑：逻辑层文件是实现小程序业务逻辑的主要位置。根据业务需求，可以在逻辑层文件中编写条件判断、循环、数据计算、数据更新等代码，以实现小程序的功能和交互。
API 调用：逻辑层文件可以调用小程序提供的 API，用于实现各种功能。例如，可以调用网络请求 API 进行数据的获取与提交，调用文件 API 进行文件的读写操作，调用设备 API 获取设备信息和操作硬件等。

项目逻辑文件

// app.ts
App({
  onLaunch:function(){
    console.log("小程序初始化");
  },
  onShow:function(options){
    console.log("小程序启动");
    console.log(this.data);
    console.log(this.fun());
  },
  onHide:function(){
    console.log("小程序隐藏进入后台");
  },
})

页面逻辑文件

页面生命周期函数：页面逻辑文件中可以定义页面的生命周期函数，例如 onLoad、onShow、onReady、onHide、onUnload 等。这些生命周期函数在页面的不同阶段被触发，可以用于执行相应的初始化、数据加载、页面渲染等操作。
事件处理函数：页面逻辑文件中可以定义事件处理函数，用于响应用户的交互操作。例如，通过监听按钮的点击事件或表单的提交事件，编写相应的事件处理函数来执行相关操作。
数据处理：页面逻辑文件可以处理数据的获取、处理和存储。可以通过调用小程序提供的 API，从服务器获取数据，对数据进行处理和转换，然后将数据传递给视图层进行展示。
业务逻辑：页面逻辑文件是实现页面特定业务逻辑的主要位置。根据页面的功能需求，可以在页面逻辑文件中编写条件判断、循环、数据计算、数据更新等代码，以实现页面的功能和交互。
API 调用：页面逻辑文件可以调用小程序提供的 API，用于实现各种功能。例如，可以调用网络请求 API 进行数据的获取与提交，调用文件 API 进行文件的读写操作，调用设备 API 获取设备信息和操作硬件等。

页面结构文件

列表数据绑定:

wx:for:在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式为

<view wx:for="{{items}}">
    {{index}}:{{item}}
</view>

模板:在小程序中如果要经常使用几个组件的组合，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板

1.定义模板:模板代码由wxml组成，膺此定义也是在wxml文件中，定义模板的格式为:

<template name="模板名">

2.使用模板:

<template is="模板名" data="{{传入的数据}}">

示例代码

news.js

Page({
  data:{
    name:'lbh',
    age:'20',
    birthday:[{year:2004},{month:3},{date:3}],
    object:{hobby:'computer'},
    students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Anne",height:160,weight:100}
  ]
  },
})

news.wxml

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view wx:if="age>=1">2</view>
<view>{{age==30?'happy':'sad'}}</view>

<template name="stu">
<view wx:for="{{students}}">
  <text>姓名:{{item.nickname}}</text>
  <text>身高:{{item.height}}</text>
  <text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

运行结果