小程序第二章总结

即兴^-^

已于 2024-03-08 14:29:06 修改

阅读量1.5k

点赞数 38

文章标签：前端

于 2024-03-04 21:51:53 首次发布

本文链接：https://blog.csdn.net/weixin_74842079/article/details/136449012

版权

本文详细介绍了微信小程序的基本目录结构，包括pages、utils、配置文件等组成部分，以及视图层、逻辑层、数据层的交互方式。重点讲解了页面文件、逻辑文件的编写，生命周期函数、setData操作和网络请求、文件存储等内容，为开发者提供了全面的小程序开发指南。

摘要由CSDN通过智能技术生成

一.小程序基本目录机构

1.一、小程序的基本目录结构
1、pages：存放全部的页面文件，有两子目录index与logs
2、utils：存放一些公共的.js文件（例如：格式化时间的自定义模块）
3、app.json：小程序公共设置文件，配置小程序全局设置
4、app.js：小程序逻辑文件，用来小程序全局实例
5、app.wxss：小程序主样式表文件
6、project.config.json：项目配置文件

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

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

2.主体文件：

app.js ：小程序逻辑文件。

app.json ：小程序公共设置文件。

app.wxss ：小程序主样式表文件。

3.页面文件：

.js文件：页面逻辑文件

.wxml文件：页面结构文件

.wxss文件：页面样式表文件

.json文件：页面配置文件

二.小程序开发框架

整个系统分为视图层和逻辑层，数据层

1.视图层：

由WXML与WXSS编写，由组件来进行展示。视图层所有 .wxml文件与 .wxss文件的集合：.wxml文件用于描述页面结构；.wxss文件用于描述页面样式。组件是视图的基本组成单元。

2.逻辑层：

用于处理事务逻辑。是所有.js脚本文件的集合。微信小程序在逻辑层将数据处理后发送给视图层，同时接受视图层的事件反馈。

逻辑层是采用Javascrpt编写的。在JavaSeript 的基础上，对应的值做了适当修改，以便提高开发小程序的效率。

(1)增加app()和Page()方法，进行程序和页面的注册
使用数据
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.is脚本文件来实现的。

3.数据层

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

1.页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的
this. data 的值。setData()函数的参数接收一个对象，以(key,value)的形式表示将key在this. data中对应的值改变成value。
2.文件存储(本地存储)
使用数据API接口，如下:
wx.getStorage 获取本地数据缓存
设置本地数据缓存。wx, setStorage
wx.clearStorage 清理本地数据缓存，
3.网络存储与调用
上传或下载文件 API接口，如下:
wx.request 发起网络请求。
wx.uploadFile 上传文件。
wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗日打开页面
wx.redirectTo 原窗口打开页面。

4.创建小程序

1.创建一个新的目录Pages，并在里面新建一个66目录，66目录包含66.wxml，66.js，66.json，66.wxss。

66.json：

66.js：

66.wxml:

app.json：

5.运行结果：

6.配置文件

全局配置文件

小程序的全局配置保存在全局配置文件(app,jon)中，使用全局配置文件来配置文件(pmges)的路径、设置窗口(window)表现、设定网络请求API的超时时间(netwokTimeout)以及配置多个切换页(IabBar)等。

1.pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项设置 pages 配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。

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

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

例如，app.json 文件的配置如下!

{
"pages " :[
"pages /news /news ",
"pages /index/index"
                ]
}

2.window配置项

负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。

在 app.json 中设置如下 window 配置项:

3.tabBar配置项

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

其中，list(列表)接受数组值，数组中的每一项也都是一个对象。

在 app.json 文件中设置如下 tabBar 配置:

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

例如，为提高网络响应效率，开发者可以在app.json中使用下列超时设置:

5.debug配置项

debug配置项用于开启开发者工具的调试模式，默认为alse。开启后，页面的注册路数据更新、事件触发等调试信息将以imnfo的形式输出到Console(控制台)面板上。

页面配置文件

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

页面中的 window 配置只需书写配置项，不必书写window，代码示例如下:

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App()数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取
App()丽数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法

页面逻辑文件

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

1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Objeet Notation，」s对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXM对数据进行绑定。
数据初始、数据绑定及运行效果如图2-12所示
主义事件
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次该函数的参数可以获取wx.navigateTo和wx,redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab 切换时调用该函数。
onUnload页面卸载函数。当页面卸载、进行navigateBack或redireetTo 操作时，调用该函数。

3.定义事件处理函数

开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page（）中定义的事件处理函数。代码如下：

4.使用setData跟新数据

小程序在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。函数参数为Object，以“key:value”对的形式表示将this.data 中的key对应的值修改为value。

in.js

//index.js  
 
Page({
  //页面的初始数据
  data:{
    name:'lwk', //字符串
    age:20,      //数字
    birthday:[{year:2003},{month:3},{date:6}], //数组
    object:{hobby:'音乐，游戏 '} //对象
  },
  chtext:function() {
    this.setData({
      name:'hahaha'
    });
  },
  chage:function() {
    this.setData({
      age:52
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2029},{month:13},{date:14}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'play，backetball，pingpong, giute'
    });
  },
  adddata:function() {
    this.setData({
      'address':'旅游'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
 
});

in.wxml

<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
<view bind:tap="myclick">单击执行逻辑层事件</view>

运行结果

页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml 文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>) 标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法()将变量或运算规则包起来。

1. 简单绑定

简单绑定是指使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用。
简单绑定可以作用于内容、组件属性、控制属性等的输出。

【注意】
简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。
2.运算

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript 运算规则。

条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

1. wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。

<view wx:else>-1</view>
在以上代码中，当x的值大于0时，输出1；当x的值等于0时，输出0；否则，输出-1。

2. block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。

列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1. wx:for

在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式如下:
<view wx:for =”{{items}}”>
{{index}}:{{item }}
</view>

2. block wx:for

与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

模板
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件
结合定义为一个模板，以后在需要的文件中直接使用这个模板。

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml 文件中，定义模板的格式为:
<template name="模板名">

2.调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为:
<template is="模板名称"data=="{{传入的数据}}"/>
其中，<template>为模板标签；is属性用于指定要调用的模板名称；data属性定义要传
人的数据，如果模板中不需要传入数据，data属性可以省略.

引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

1. import方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2. include方式

include方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码
复制到include 所在位置。

页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。

调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以"key =value" 形式出现，key (属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。

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

页面样式文件
页面样式文件(WxSS)是基于Css拓展的样式语言，用于描述WXML，的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对Wxss做了一些扩充和修改。

1尺寸单位

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx (respnesive pixel)。WXSS规定屏幕宽度为750 rpx,在系统数据绑定过程中rpx会按比例转化为px。

2样式导入

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

3选择器

目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、:.before、:aftert等。

4WXSS常用属性

WXSS文件与CsS文件有大部分属性名及属性值相同。

即兴^-^

关注

38
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
小程序第二章总结

pages目录中有两个有两个子目录（index，logs），每个子目录中保存着一个页面的相关文件。包含4个不同的扩展（），分别表示（页面结构文件，页面样式文件，页面逻辑文件，页面配置文件utils目录用来存放一些公共的.js文件，当某个页面需要utils.js 函数时，可以将其引入后直接使用。
复制链接

扫一扫