第二章总结

再等等丶

已于 2024-03-08 11:55:31 修改

阅读量1.7k

点赞数 50

文章标签：微信小程序

于 2024-03-08 11:53:17 首次发布

本文链接：https://blog.csdn.net/ikun666686/article/details/136460083

版权

1.小程序的基本目录结构

微信小程序的基本目录结构中，项目主目录有两个子目录：pages和utils，和四个文件：app.js，

app.json，app.wxss和project.config.json。

1.1子目录：

1.pages：文件夹对应页面。

2.utils：工具包。(整个项目都可以用)

1.2主体文件：

1.app.js：小程序逻辑文件，主要用来注册小程序全局实例。（必需）

2.app.json：小程序公共设置文件，配置小程序全局设置。（必需）

3.app.wxss：小程序主样式表文件，类似HTML的.css文件。（不必需）

1.3页面文件

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

2. .wxml文件：页面结构文件，用于设计页面布局，数据绑定等。

3. .wxss文件：页面样式表文件，用于定义页面中用到的各类样式表。

4. .json文件：页面配置文件。

2.小程序的开发框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.逻辑层：

逻辑层用于处理事务逻辑。

2.视图层：

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

3.数据层：

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

3.创建小程序页面

创建一个新的页面项目，在主目录下新建一个pages目录，在pages目录下新建一个index目录，新建index.js,index.json,index.wxml和index.wxss空文件。

1.在index.wxml添加内容：欢迎大家学习微信小程序开发zlfw

2.在index.js添加基本内容：Page( {

})

3.在index.json添加基本内容：{}

代码运行结果如下：

4.配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

1.全局配置文件

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

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

1.1 pages配置项

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

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

一.数组的第一项用于设定小程序的初始页面。
二.在小程序中新增或减少页面时，都需要对数组进行修改。
三.文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

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

{
  "pages": [
    "pages/zlfw/zlfw",
    "pages/logs/logs"
  ]
}

1.2 window配置项

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

window配置项可以配置的对象参考表如下：

在aap.json中设置如下window配置项：

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#DB7093",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

1.3 tabBar配置项

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

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

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

{
"tabBar": {
    "color":"#666666",
    "selectedColor":"#ff0000",
    "borderStyle":"black",
    "backgroundColor":"#ffffff",
     "list": [{
       "pagePath":"pages/zlfw/zlfw",
       "text": "图标",
       "iconPath":"images/index1.png",
       "selectedIconPath":"images/index2.png"
     },
     {
       "pagePath":"pages/logs/logs",
       "text": "新闻",
       "iconPath":"images/index1.png",
       "selectedIconPath":"images/index2.png"
     }
    ]
   }
   }

配置后的页面效果如图所示：

1.4 networkTimeout配置项

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

{
"networkTimeout" :{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downloadFile":20000
}
}

1.5 debug配置项

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

2.页面配置文件

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

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "页面window配置演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle":"light"
}

5.逻辑层文件

1.项目逻辑文件

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

App()函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数，用户自定义属性和方法，其参数如下表所示：

2.页面逻辑文件

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

在逻辑层，Page（）方法用来注册一个页面，并且每个页面有且仅有一个，其参数如下表：

2.1 设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JS0N(Javascript 0bject Notaton，Js对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。

视图层可以通过WXML对数据进行绑定。

数据初始、数据绑定及运行效果如下图：

1.数据初始

2.数据绑定

3.代码运行效果：

6.算法运算

1.算术运算

<view>算术运算：{{age+1000}}</view>

代码运行结果如下：

2.逻辑运算

<view>逻辑运算：{{age==30}}</view>

代码运行结果如下：

如图，age若为30,结果为true，反之结果为false。

3.三元运算

<view>三元运算：{{age==1 ? 2: 4 }}</view>

代码运行结果如下：

如图，age若等于1则输出2，反之则输出4。

4.if语句

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>

代码运行结果如下：

如图，age若大于40，则输出1,。若等于40，则输出2,。反之输出3。

5.for语句

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

代码运行结果如下：

6.模版

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

<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>

代码运行结果如下：

7.页面事件

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

要实现这种机制，需要定义事件函数和调用事件。

1.定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理码。
2.调用事件:调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind 或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
在小程序中、事件分为冒泡事件和非冒泡事件两大类型。

3.冒泡事件:冒泡事件是指某个组件上的事件被触发后级元素再向其父级元素传递，一直到页面的顶级元素。
4.非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
在WXML中，冒泡事件共6个，如下所示：

8 .页面样式文件

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

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

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

3.选择器

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

4.WXSS常用属性

WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如下表：

再等等丶

关注

50
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
第二章总结

由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值( networkTimeout)以及配置多个切换页(tabBar)等。在配置页面配置文件后, 页面中的window配置值将覆盖全局配置文件(app.json) 中的配置值。
复制链接

扫一扫