微信小程序的框架

目录

一、视图层

1. WXML

数据绑定

列表渲染

条件渲染

模板

2. WXSS

尺寸单位

样式导入

内联样式

选择器

3. WXS事件

二、逻辑层

1. 页面生命周期

2.跳转 

1. 一级跳一级

2. 一级跳二级

3. 二级跳二级

4. 二级跳一级

总结

带给我们的收获

一、视图层

1. WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

要完整了解 WXML 语法，请参考WXML 语法参考。

根据我博客中进行创建一个微信小程序项目: 开发微信小程序的下载安装及入门icon-default.png?t=N7T8https://blog.csdn.net/SAME_LOVE/article/details/133826628?spm=1001.2014.3001.5501

之后在项目中增加四个页面，分别命名为 : home，classify，orders，me 。

（ 可以根据自己的需求进行更改命名 ）

在项目的主体中找到 app.json 这个文件进行增加以上四个文件。

在该文件中找到 pages ，在里面进行直接页面。

  "pages":["pages/home/home","pages/classify/classify","pages/orders/orders","pages/me/me","pages/user/user","pages/index/index","pages/logs/logs"],

  • 数据绑定

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  /*** 页面的初始数据*/data: {message: 'Hello MINA !  欢迎进入 。。 '},

在模拟器中可以看到的效果 : 

  • 列表渲染

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  data: {message: 'Hello MINA !  欢迎进入 。。 ',array: [1, 2, 3, 4, 5]},

在模拟器中可以看到的效果 : 

  • 条件渲染

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 坤坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  /*** 页面的初始数据*/data: {message: 'Hello MINA !  欢迎进入 。。 ',array: [1, 2, 3, 4, 5],view: '2'},

在模拟器中可以看到的效果 : 

  • 模板

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 坤坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName"><view>BookName: {{BookName}}, Author: {{Author}}</view>
</template><template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  /*** 页面的初始数据*/data: {message: 'Hello MINA !  欢迎进入 。。 ',array: [1, 2, 3, 4, 5],view: '2',BookA: {BookName: '掌中球', Author: '秘名'},BookB: {BookName: '起飞的小猪', Author: '夏凉'},BookC: {BookName: '手中棍', Author: '勇者'}},

在模拟器中可以看到的效果 : 

2. WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位
  • 样式导入

  • 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

  • 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，

用;表示语句结束。

方法一 :  

/** common.wxss **/
.small-p {padding:5px;
}

方法二 :   

/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;
}

  • 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:yellow;" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="vi" />

 

  • 选择器

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

全局样式与局部样式 : 

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

3. WXS事件

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 坤坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName"><view>BookName: {{BookName}}, Author: {{Author}}</view>
</template><template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template><button id="tapTest" data-hi="Weixin" data-name="小君" bindtap="tapName"> Click me! </button>

在我们创建的页面中 ( home ) ，在 home.js中编写代码 : 

 /*** 页面的初始数据*/data: {message: 'Hello MINA !  欢迎进入 。。 ',array: [1, 2, 3, 4, 5],view: '2',BookA: {BookName: '掌中球', Author: '秘名'},BookB: {BookName: '起飞的小猪', Author: '夏凉'},BookC: {BookName: '手中棍', Author: '勇者'}},/*** 方法事件*/tapName: function(event) {console.log(event);console.log(event.target.dataset);},

 所看到的效果如图  : 

二、逻辑层

1. 页面生命周期

思维图 :

微信小程序中逻辑层的页面生命周期包括以下几个阶段：

1. onLoad：页面加载时触发，只会触发一次，可以在此处进行页面初始化操作。

2. onShow：页面显示时触发，每次页面显示都会触发，可以在此处进行数据刷新操作。

3. onReady：页面初次渲染完成时触发，只会触发一次，可以在此处进行一些界面操作，如设置导航栏标题等。

4. onHide：页面隐藏时触发，当用户切换到其他页面时触发。

5. onUnload：页面卸载时触发，当用户关闭当前页面或者返回上一页时触发，可以在此处进行一些资源释放操作。

6. onPullDownRefresh：下拉刷新时触发，用户下拉页面时触发，可以在此处进行数据刷新操作。

7. onReachBottom：上拉触底时触发，用户滑动页面到底部时触发，可以在此处进行数据加载操作。

8. onShareAppMessage：分享页面时触发，用户点击分享按钮时触发，可以在此处设置分享内容。

在逻辑层中，可以通过重写这些生命周期函数来实现页面的各种操作和逻辑。

2.跳转 

代码:

在项目主体 app.json 中 增加以下代码:

 "tabBar": {"list": [{"pagePath": "pages/index/index","text": "欢迎页"}, {"pagePath": "pages/logs/logs","text": "日志"},{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/me/me","text": "我的"}]},

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 坤坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName"><view>BookName: {{BookName}}, Author: {{Author}}</view>
</template><template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template><button id="tapTest" data-hi="Weixin" data-name="小君" bindtap="tapName"> Click me! </button>
<button style="margin-top: 20px;"  bindtap="bindViewTap">
home 跳转到classify页面&&一级跳二级</button>

在我们创建的页面中 ( home ) ，在 home.js中编写代码 : 

// pages/home/home.js
Page({/*** 页面的初始数据*/data: {message: 'Hello MINA !  欢迎进入 。。 ',array: [1, 2, 3, 4, 5],view: '2',BookA: {BookName: '掌中球', Author: '秘名'},BookB: {BookName: '起飞的小猪', Author: '夏凉'},BookC: {BookName: '手中棍', Author: '勇者'}},/*** 方法事件*/tapName: function(event) {console.log(event);console.log(event.target.dataset);},// 事件处理函数bindViewTap() {wx.navigateTo({url: '/pages/classify/classify',})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("home.onLoad");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("home.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("home.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("home.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("home.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

在我们创建的页面中 ( classify) ，在 classify.wxml中 编写代码 : 

<!--pages/classify/classify.wxml-->
<text>pages/classify/classify.wxml</text>
<button  bindtap="bindViewTap">
classify跳转到orders二级跳二级</button>

在我们创建的页面中 ( classify) ，在 classify.js中编写代码 : 

// pages/classify/classify.js
Page({/*** 页面的初始数据*/data: {},// 事件处理函数bindViewTap() {wx.navigateTo({url: '/pages/orders/orders',})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("classify.onLoad");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("classify.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("classify.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("classify.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("classify.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

在我们创建的页面中 ( orders) ，在 orders.wxml中 编写代码 : 

<!--pages/orders/orders.wxml-->
<text>pages/orders/orders.wxml</text>
<button style="margin-top: 20px;"  bindtap="bindViewTap">
orders跳转到home页面&&二级跳一级</button>

在我们创建的页面中 ( orders) ，在 orders.js中编写代码 :  

// pages/orders/orders.js
Page({/*** 页面的初始数据*/data: {},// 事件处理函数bindViewTap() {wx.switchTab({url: '/pages/home/home',})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("orders.onLoad");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("orders.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("orders.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("orders.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("orders.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

  在我们创建的页面中 ( me) ，在 me.js中编写代码 :  

// pages/me/me.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("me.onLoad");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("me.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("me.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("me.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("me.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

1. 一级跳一级

效果如图 : 

2. 一级跳二级

效果如图 : 

3. 二级跳二级

效果如图 : 

4. 二级跳一级

效果如图 : 

总结

  • 一级页面不会销毁
  • 一级层级跳到子级层级，或者子级层级跳到子级层级，如: 一级跳二级，二级跳二级，二级跳三级，三级跳四级，以上路由跳法，上一级隐藏，下一级显示(初次显示会调用onLoad，onReady，onShow方法) ; 如果是从下级返回到上级，下级将会被销毁。上级显示(初次显示会调用onLoad，onReady，onShow方法) ;
  • 隔代返回的话，会将中间所有的子级进行销毁。如 : 四级返回到一级或者跳转到一级，中间的四级，三级，二级都将被销毁，而一级会显示(初次显示会调用onLoad，onReady，onShow方法) ;

带给我们的收获

学习微信小程序中的视图层和逻辑层级页面的生命周期可以带来以下收获：

1. 理解小程序的整体架构：学习视图层和逻辑层的生命周期可以帮助我们更好地理解小程序的整体架构，从而更好地设计和开发小程序。

2. 控制页面的生命周期：通过学习生命周期，我们可以了解到页面在不同阶段会触发哪些事件，从而可以在不同的生命周期中执行相应的操作，例如在页面加载时请求数据，在页面卸载时清理资源等。

3. 实现页面交互和动画效果：通过生命周期函数，我们可以在页面的不同阶段执行相应的操作，例如在页面显示时执行动画效果，给用户更好的交互体验。

4. 优化小程序性能：了解生命周期可以帮助我们更好地管理页面的资源和数据，从而优化小程序的性能，例如及时释放不需要的资源，避免内存泄漏等。

5. 调试和排查问题：当遇到问题时，了解生命周期可以帮助我们更好地定位问题所在，例如通过打印生命周期函数的日志来查看页面的加载和卸载情况，从而排查问题。

总之，学习微信小程序中的视图层和逻辑层级页面的生命周期可以帮助我们更好地理解和掌握小程序的开发，提高开发效率和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/107283.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

idea 启动项目报错 Command line is too long

idea 启动项目报错 Command line is too long

1.idea 启动报错 Command line is too long&#xff0c;启动报错信息&#xff1a;Error running ‘Application‘: Command line is too long. 2.如何解决&#xff1f; 1&#xff09;idea打开一个项目。 2.打开项目下的*.idea* 文件夹下的 workspace.xml 文件。 3.在<co…
阅读更多...
springboot 导出word模板

springboot 导出word模板

一、安装依赖 <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version></dependency>二、定义工具类 package com.example.springbootmp.utils;import com.deepoove.poi.XWP…
阅读更多...
5.Python-使用XMLHttpRequest对象来发送Ajax请求

5.Python-使用XMLHttpRequest对象来发送Ajax请求

题记 使用XMLHttpRequest对象来发送Ajax请求&#xff0c;以下是一个简单的实例和操作过程。 安装flask模块 pip install flask 安装mysql.connector模块 pip install mysql-connector-python 编写app.py文件 app.py文件如下&#xff1a; from flask import Flask, reque…
阅读更多...
好用的跨平台同步笔记工具,手机和电脑可同步的笔记工具

好用的跨平台同步笔记工具,手机和电脑可同步的笔记工具

在这个快节奏的工作环境中&#xff0c;每个人都在寻找一种方便又高效的方式来记录工作笔记。记录工作笔记可以帮助大家统计工作进展&#xff0c;了解工作进程&#xff0c;而如果工作中常在一个地方办公&#xff0c;直接选择电脑或者手机中笔记工具来记录即可&#xff0c;但是对…
阅读更多...
[部署网站]01安装宝塔面板搭建WordPress

[部署网站]01安装宝塔面板搭建WordPress

宝塔面板安装WordPress&#xff08;超详细&#xff09;_Wordpress主题网 参考教程 宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板 官网 1.首先你需要一个服务器或者主机 &#xff08;Windows系统或者Linux系统都可以&#xff09; 推荐Linux系统更稳定&#xff0c;…
阅读更多...
Axure RP医疗在线挂号问诊原型图医院APP原形模板

Axure RP医疗在线挂号问诊原型图医院APP原形模板

医疗在线挂号问诊Axure RP原型图医院APP原形模板&#xff0c;是一款原创的医疗类APP&#xff0c;设计尺寸采用iPhone13&#xff08;375*812px&#xff09;&#xff0c;原型图上加入了仿真手机壳&#xff0c;使得预览效果更加逼真。 本套原型图主要功能有医疗常识科普、医院挂号…
阅读更多...
海思平台SS528V100编译 linux kernel tun.c eth_get_headlen 编译 出错的问题

海思平台SS528V100编译 linux kernel tun.c eth_get_headlen 编译 出错的问题

osdrv目录下 make kernel 会去opensource目录下解压linux内核压缩包 同时打上很多补丁 如上图 查看Makefile 如下 有打补丁的命令 然后 然后我们的应用程序用到一个特性 需要打开tun/tab这两个属性 打开之后编译内核出错 查到最后发现 没打补丁之前的文件 没问题 …
阅读更多...
Qt拖拽文件到窗口、快捷方式打开

Qt拖拽文件到窗口、快捷方式打开

大部分客户端都支持拖拽文件的功能&#xff0c;本篇博客介绍Qt如何实现文件拖拽到窗口、快捷方式打开&#xff0c;以我的开源视频播放器项目为例&#xff0c;介绍拖拽视频到播放器窗口打开。   需要注意的是&#xff0c;Qt拖拽文件的功能&#xff0c;不支持以管理员权限启动的…
阅读更多...
maven 新建模块 导入后 按Ctrl 点不进新建模块pom定义

maven 新建模块 导入后 按Ctrl 点不进新建模块pom定义

新建的ruoyi-common-mybatisplus 模块,导入一直不正常 画出的模块一直导入不进来 这是提示信息 这是正常的提示信息 加上 <version>3.6.3</version> 后,才一切正常
阅读更多...
攻防世界题目练习——Web引导模式（三）（持续更新）

攻防世界题目练习——Web引导模式（三）（持续更新）

题目目录 1. mfw2.3.4.5. 1. mfw 进去看到网页和页面内容如下&#xff1a; 看到url的参数 ?pageabout &#xff0c;我以为是文件包含什么的&#xff0c;反复试了几次&#xff0c;想用 …/…/…/…/etc/passwd &#xff0c;但是发现.似乎被过滤了&#xff0c;实在不知道怎么做…
阅读更多...
uniapp(uncloud) 使用生态开发接口详情2(使用 schema创建数据, schema2code创建页面, iconfont 引入项目)

uniapp(uncloud) 使用生态开发接口详情2(使用 schema创建数据, schema2code创建页面, iconfont 引入项目)

上一篇介绍如何创建项目,接下来该是如何使用 在项目中pages 目录下,新建界面 项目运行,浏览器中用账号密码登录, 新建一级和二级页面 2.1 系统管理 > 菜单管理 (新增一级界面) 2.2 找到刚刚创建的菜单, 操作行有 子菜单(点击) 用DB Schema创建页面, 3.1 在uniCloud > d…
阅读更多...
开路、断路和短路区别

开路、断路和短路区别

文章目录 开路和断路击穿电源短路、用电器短路、对地短路和对电源短路 开路和断路 开路和断路是电路中两种用于描述电流流动情况的状态。 两者易混淆&#xff0c;常被混淆使用&#xff0c;但是它们还是有所不同。 开路表示电路中存在一个断链&#xff0c;电流无法从一个点流到…
阅读更多...
git强制删除本地分支 git branch -D

git强制删除本地分支 git branch -D

git强制删除本地分支 git branch -D git删除本地分支_zhangphil的博客-CSDN博客git branch -d <分支名>可以通过: git branch 查看所有本地分支及其名字&#xff0c;然后删除特定分支。https://blog.csdn.net/zhangphil/article/details/82255002 使用git branch -d删除…
阅读更多...
退税政策线上VR互动科普展厅为税收工作带来了强大活力

退税政策线上VR互动科普展厅为税收工作带来了强大活力

缴税纳税是每个公民应尽的义务和责任&#xff0c;由于很多人缺乏专业的缴税纳税操作专业知识和经验&#xff0c;因此为了提高大家的缴税纳税办事效率和好感度&#xff0c;越来越多地区税务局开始引进VR虚拟现实、web3d开发和多媒体等技术手段&#xff0c;基于线上为广大公民提供…
阅读更多...
云原生Kubernetes：K8S集群版本升级(v1.20.15 - v1.22.14)

云原生Kubernetes：K8S集群版本升级(v1.20.15 - v1.22.14)

目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群&#xff08;v1.21.14&#xff09; 4.验证集群&#xff08;v1.21.14&#xff09; 5.升级集群&#xff08;v1.22.14&#xff09; 6.验证集群 (v1.22.14) 二、实验 1.升级集群&#xff08;v1.21.14&#xff09; 2.验…
阅读更多...
apifox的使用以及和idea集成

apifox的使用以及和idea集成

apifox 简介 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter&#xff0c;由此可见apifox集功能于一身&#xff0c;极大的提升了我们开发的效率&#xff0c;不用再为postman网络连接失败而发愁&…
阅读更多...
零售数据分析师熬夜整理:人、货、场、供、财这样做

零售数据分析师熬夜整理:人、货、场、供、财这样做

在零售数据分析中&#xff0c;人、货、场、供、财数据分析非常重要&#xff0c;它们分别是指人员、商品、场所、供应和财务&#xff0c;对这些要素进行数据分析&#xff0c;可以更好地了解市场需求、优化商品供应链、调整销售策略和提高盈利能力。零售数据量大、分析指标多且复…
阅读更多...
uni-app 瀑布流布局的实现

uni-app 瀑布流布局的实现

方式一&#xff1a;使用纯 CSS 实现 使用 flex 布局方式 <!-- 瀑布流布局 --> <template><view class"container"><viewclass"cont-box":style"{ --layout-width: 100 / flowData.column - flowData.columnSpace % }"v-f…
阅读更多...
Apache Ant的安装

Apache Ant的安装

介绍 Apache Ant是一个Java库和一个 命令行工具&#xff0c;可以用来构建Java应用。Ant提供了许多内置的任务&#xff08;tasks&#xff09;&#xff0c;可以编译、组装、测试、运行Java应用。Ant也可以构建非Java应用&#xff0c;例如C、C应用。 Ant非常灵活&#xff0c;没有…
阅读更多...
GitHub Action 通过SSH 自动部署到云服务器上

GitHub Action 通过SSH 自动部署到云服务器上

准备 正式开始之前&#xff0c;你需要掌握 GitHub Action 的基础语法&#xff1a; workflow &#xff08;工作流程&#xff09;&#xff1a;持续集成一次运行的过程&#xff0c;就是一个 workflow。name: 工作流的名称。on: 指定次工作流的触发器。push 表示只要有人将更改推…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023