小程序一到三章复习总结

最新推荐文章于 2024-08-14 16:34:57 发布

珉橘

最新推荐文章于 2024-08-14 16:34:57 发布

阅读量660

点赞数 27

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/m2049626666/article/details/138106299

版权

本文详细介绍了微信小程序的应用场景特点，开发工具常用快捷键，基础架构、文件结构、逻辑层API、数据管理（包括本地存储和网络请求），以及页面布局（如盒子模型、浮动与定位、flex布局）等内容，为开发者提供了全面的开发指南。

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

一：认识微信小程序

小程序应用场景的特点：

1.简单的业务逻辑

2.低频度的使用场景

微信小程序开发工具部分常用组合键：
1.Ctrl+Shift+F全局搜索
2.Shift+Alt+F代码格式化
3.Alt+Up，Alt+Down上下移动一行
4.Shift+Alt+Up（Down）向上（下）复制一行
5.Ctrl+Home移动到文件开头
6.Ctrl+End移动到文件结尾
7.Shift+Home选择从首行到光标处
8.Shift+End选择从光标处到结尾
9.Ctrl+I选中当前行
10.Ctrl+D选中匹配
11.Ctrl+Shift+L选择所有匹配
12.Ctrl+U光标回退

二：微信小程序开发基础

1.一个页面包含4个不同拓展名（.wxml、.wxss、.js和json）的文件，分别用于表示页面结构文件、页面样式表文件、页面逻辑文件和页面配置文件。

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

3.主体文件：

1）pages:页面文件夹，每个页面一个文件夹。

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

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

（4）app.wxss:小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。（该文件在项目中不是必须的）

4.页面文件：

（1）.js文件：页面逻辑文件，在该文件中JavaScript代码控制页面的逻辑。（该文件在每个小程序的页面中不可或缺）

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

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

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

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

6.逻辑层主要修改包括：

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

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

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

数据层:

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

setData（）函数的参数接受一个对象，以（key，value）的形式表示将key在this.data中对应的值改变成value。

.文件存储 (本地存储)使用数据API 接口：
wx.getStorage获取本地数据缓存。
wx.setStorage 设置本地数据缓存。
wx.clearStorage清理本地数据缓存。
网络存储与调用
上传或下载文件API接口：
wx. request发起网络请求。

wx.uploadFile上传文件。

wx.downloadFile下载文件。

调用 URL的API接口：
wx. navigateTo新窗口打开页面。

wx.redirectTo原窗口打开页面。

pages 配置项

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

在逻辑层，Page（）方法用来注册一个页面，并且每个页面有且仅有一个。

页面逻辑主要功能有：

设置初始函数；

定义当前页面的生命周期函数；

定义事件处理函数处理函数等。

定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。

条件数据绑定：

（1）wx；if条件数据绑定

（2）block wx；if条件数据绑定

.列表数据绑

1.wx；for：在组件上，wx；for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件。

2. block wx:for
与block wx:if 类似，在wxml中也可以使用<block >包装多个组件进行列表数据绑定。例如，上面的代码可以被修改为以下形式，效果不变.

引用页面文件：

1. import方式

2.include方式

页面事件：

(1)定义事件函数

概念：在.js文件中定义事件函数来实现相关功能, 当事件响应后就会执行事件处理代码。
(2)调用事件　

概念：调用事件也称为注册事件。

（3）冒泡事件

概念：冒泡事件是指某个组件上的事件被触发后, 事件会向父级元素传递, 父级元素再向其父级元素传递, 一直到页面的顶级元素。

（4）非冒泡事件

概念：非冒泡事件是指某个组件上的事件被触发后, 该事件不会向父节点传递。

三：页面布局

1 盒子模型

概念：微信小程序的视图层由WXML 和WXSS组成。

■ width 和height 内容的宽度和高度。

■ padding-top、padding-right、padding-bottom 和padding-left 上内边距、右内边距、底内边距和左内边距。

■ padding-top、padding-right、padding-bottom 和padding-left 上边框、右边框、底边框和左边框。

简单来说，一个盒子实际所占有的高度应该由"内容"+"内边距"＋"边框"+"外边距

块级元素和行内元素、行内块元素

块级元素
(１) 一个块级元素占一行。

(２) 块级元素的默认高度由内容决定, 除非自定义高度。

(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度。

(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。

(５) 块级元素可以容纳块级元素和行内元素。 < view/ > 组件默认为块级元素, 使用<view/ > 组件演示盒子模型及块级元素

行内元素的特点

(１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。

(２) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。

(３) 同一块内, 行内元素和其他行内元素显示在同一行。

浮动与定位

3.3.1 元素浮动与清除
概念：元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。在CSS中, 通过float 属性来定义浮动, 其基本格式如下:

{float:none|left|right;}
none——默认值，表示元素不浮动；

left——元素向左浮动

right——元素向右浮动

在CSS 中,clear 属性用于清除浮动元素对其他元素的影响, 其基本格式如下:

left———清除左边浮动的影响, 也就是不允许左侧有浮动元素;

right———清除右边浮动的影响, 也就是不允许右侧有浮动元素;

both———同时清除左右两侧浮动的影响;

none———不清除浮动。

还可以在父元素外添加个空元素

例如：在父元素添加一个空元素，实现父元素包裹浮动元素。

static———默认值, 该元素按照标准流进行布局;

relative———相对定位, 相对于它在原文档流的位置进行定位, 它后面的盒子仍以标准流方式对待它;

absoulute———绝对定位, 相对于其上一个已经定位的父元素进行定位, 绝对定位的盒子从标准流中脱离, 它对其后的兄弟盒子的定位没有影响;

fixed———固定定位, 相对于浏览器窗口进行定位。

元素定位：

1.默认值

2.相对定位

3.绝对定位

4.固定定位

flex布局：

1.容器属性

（1）display

display用来指定元素是否为flex 布局

(2)flex-direction

用于设置主轴的方向, 即项目排列的方向

(3)flex-wrap

用来指定项目在一根轴线的排列位置不够时，项目是否换行

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

(4) flex-flow

flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为row nowrap。语法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}

(5)justify-content

justify-content 用于定义项目在主轴上的对齐方式。语法格式如下:

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

justify-content———与主轴方向有关, 默认主轴水平对齐, 方向从左到右;

flex-start———左对齐, 默认值;

flex-end———右对齐;

center———居中;

space-between———两端对齐, 项目之间的间隔都相等;

space-around———每个项目两侧的间隔相等。

2. 项目属性：

（1）order

order属性定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为０。语法格式如下:

.item{order:<number>;}

（2）flex-grow

定义项目的放大比例, 默认值为０, 即不放大。语法格式如下:

.item{flex-grow:<number>;}

（3）flex-shink

用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。语法格式如下:

.item{flex-shink:<number>;}