小程序开发——小程序的视图与渲染

news2024/10/7 10:16:33

 1.视图与渲染过程

 基本概念：

视图层由WXML页面文件和样式文件WXSS共同组成。事件是视图层和逻辑层沟通的纽带，用户操作触发事件后可通过同名的事件处理函数执行相应的逻辑，处理完成后，更新的数据又将再次渲染到页面上。

WXML页面：

WXML是框架设计的一套标签语言，结合基础组件和事件系统可构建出页面的结构。组件是视图的基本组成单元，组件的显示效果是由页面样式文件中定义的样式进行控制的。

<view class="container">
  <view class="userinfo">
    <button 	="{{!hasUserInfo &&canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
    <block wx:else>
      <image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" ></image>
      <text class="userinfo-nickname"> {{userInfo.nickName}} </text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}} </text>
  </view>
</view>

 button组件简单使用案例

实现效果，如下图所示：

新建Chapter02项目与页面

使用官方文档拷贝示例代码

进入微信官方小程序开发文档，其链接为：                  https://developers.weixin.qq.com/miniprogram/dev/framework/

 选择“组件”→“表单组件”→button一栏

 

由上图可以看到关于button组件所有可设置的属性，以及属性的可选值，还有一些使用的注意事项等。将页面拖动到底部可以看到微信官方的示例代码与演示效果

 

现在仅仅想要一个简单的按钮，将上述wxml里部分代码拷贝，如下述代码所示：

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="primary"> primary </button>

 去掉多余的关于loading以及plain等属性的设置，得到精简一点的代码段，并拷贝到刚才新建页面的button.wxml文件中，如下所示：

<button type="default">default</button>
<button type="primary">primary</button>

2.数据绑定

在WXML页面中可以用双花括号里面添加变量名的形式表示动态数据，这称为Mustache语法，形如：{{变量名}}。 WXML 中的动态数据均来自对应JS文件中Page的data属性，分别可以作用于wxml页面的内容、组件属性、控制属性等。除此之外，在双花括号内还可以支持简单的运算以及字符串的拼接等操作。

内容绑定

在上述案例中学习了button组件的基本使用，现在将button里面的文字内容进行简单的内容绑定，如下述代码所示：

<!-- WXML页面代码 -->
<button type="primary">{{btnText}}</button>
<text>{{content}}</text>

上述代码花括号内部的btnText与content就是绑定的变量，需在页面的JS文件中进变量的初始化，在页面加载时便可将数据渲染到WXML中，如下所示：

//JS文件代码
Page({
  data: {
    btnText:"按钮文字",
    content:"这是要显示的内容"
  }
})

 组件属性绑定

组件的属性也可以使用动态数据，例如组件的id、class等属性值。例如在WXML文件里可添加如下代码：

<view id='{{id}}'> 测试组件属性绑定</view>

与简单绑定一样，需在当前页面对应的JS文件的data属性里添加名为id的变量才能实现正确的组件属性绑定，值得注意的是，组件属性数据最外层的单引号（双引号）不可省略。

控制属性绑定

控制属性也可以使用动态数据，但必须在引号内。如下代码所示：

<!--WXML页面代码-->
<view wx:if='{{condition}}'>测试控制属性绑定</view>

在文件里添加变量condition，暂时初始化为true，如下面代码所示。

//JS文件代码
Page({
  data: {
    condition:true
  }
})

 当更改变量condition的值为false时，view组件将不再显示，可以自行测试

true和false关键字绑定

在双括号内部除了引用data里的变量名之外，还可以直接写入一些关键字进行运算，如布尔类型的关键字true和false。如下面代码所示：

<view wx:if='{{false}}'>关键字绑定测试false</view>
<view wx:if='{{true}}'>关键字绑定测试true</view>

 不可以去掉双花括号直接写成wx:if='false'，此时false会被认为是一个字符串，并且转换为布尔值后表示true。

运算绑定

三元运算：三元运算的语法表达式为：条件表达式?表达式1:表达式2。其中问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。在小程序的页面中三元运算经常这样使用：

<!--WXML页面代码-->
<view hidden='{{result ? true : false}}'>该组件将被隐藏</view>
//JS文件代码
Page({
    data: {
      result : false
    }
})

算数运算：双花括号内部也支持基本的四则运算，如下面代码所示：

<!--WXML页面代码-->
<view> {{a + b}} + {{c}} + d </view>
//JS文件代码
Page({
    data: {
      a : 3, b : 4, c : 5
    }
})
//上述代码最后运算结果为“7+5+d”。

 逻辑判断：逻辑判断也就是支持大于和小于号，形成一个最后值为true或false的表达式。逻辑判断同样可以用于控制组件的显示，代码如下：

<view wx:if="{{length >3}}">当length的值大于3时该组件显示 </view>

字符串运算：字符串运算会用到字符串连接符“+”，这应与算数运算中的+号运算符进行区别，如下面代码所示：

<!--WXML页面代码-->
<view>{{"Hello, " + name}}</view>
<view>{{msg + name}}</view>
//JS文件代码
Page({
  data: {
    name:"Toky",
    msg: "Hi, "
  }
})

在双花括号内部，若+号两边都是数值，则进行加运算。若+号两边的变量有任意一个是双引号引起来的字符串，则看作字符串连接符。

数据路径运算：数据路径运算即针对这些变量，对json对象，只需要用“.”运算符即可取到其下一层的属性。而数组变量的书写和其他语言的语法基本一致，采用一对中括号的形式，下标从0开始,如下述代码所示：

<!--WXML页面代码-->
<view>{{object.key2}} {{array[1]}}</view>
//JS文件代码
Page({
  data: {
    object: { key1: 'Hello ', key2:'Hi' },
    array: ['Toky','Bob','Nike']
  }
})
//上述代码可在WXML页面显示“Hi Bob”。

 组合绑定

数组组合：在双花括号内还可以直接进行变量和值的组合，构成新的对象或者数组，如下面代码所示：

<!--WXML页面代码-->
<view wx:for='{{[1,2,x,4]}}'>{{item}}</view>
//JS文件代码
Page({
    data: { x : 3 }
})

 上述代码最终组合成数组[1,2,3,4]。wx:for与wx:if都是渲染标签，wx:for用于循环一个数组或列表，这个用于循环的数组元素值将默认赋值给item，因此上述代码可在页面依次显示该数组的元素值。值得注意的是，当花括号和引号之间如果有空格，将最终被解析成为字符串，如下述代码所示：

<view wx:for="{{[1,2,3]}} ">{{item}}</view>
<view wx:for="{{[1,2,3]+' '}}">{{item}}</view>

在WXML调试面板可看到最终渲染的WXML代码如图：

 

对象的组合与展开：对象的组合是指在双花括号内部通过key:变量名的形式可以将data里的数据组合到页面中。如下述代码所示：

<!--WXML页面代码-->
<template is="test" data="{{username: value1, password: value2}}"></template>
//JS文件代码
Page({
    data: {
      value1 : 'Toky',
      value2 : '123456'
    }
})
//最终组合成的对象是{username:Toky,password:123456}

 对象的拆分可利用拓展运算符“…”三个点完成，示例代码如下：

<!--WXML页面代码-->
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
//JS文件代码
Page({
  data: {
    obj1: { a: 1,  b: 2 },
    obj2: { c: 3,  d: 4 }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。 在展开时，若obj2中的变量与obj1中的变量名相同的情况，后边的变量会覆 盖前面的。

数据绑定综合案例

关于数据绑定的综合案例主要用于测试内容绑定、组件属性绑定、控制属性绑定、关键字绑定与运算绑定，并给按钮绑定了简单的点击事件以实现内容的更新。

 页面WXML代码:案例综合数据绑定，测试多种属性的绑定，并给按钮组件添加了点击事件。在JS逻辑代码中重新渲染了页面的变量，其WXML代码如下：

<!--pages/demo2-2/dataBind.wxml-->
<view class='container'>
  <view class='page-body'>
    <text class='h1'>数据绑定综合案例</text>
    <view class='demo-box'>
      <view class="title">1、内容绑定</view>
      <button type="primary" bindtap="btnClick">
{{btnText}}</button>
      <text>{{content}}</text>
    </view>
    <view class='demo-box'>
      <view class="title">2、组件属性绑定</view>
      <view id='{{id}}'>这是带有id的view1</view>
    </view>
<view class='demo-box'>
      <view class="title">3、控制属性与关键字绑定</view>
      <text class="content">当condition初始化为false时，view不显示</text>
      <view wx:if='{{condition}}'>view2</view>
      <view wx:if='{{false}}'>关键字绑定测试false</view>
      <view wx:if='{{true}}'>关键字绑定测试true</view>
    </view>
    <view class='demo-box'>
      <view class="title">4、运算绑定</view>
      <view hidden='{{result ? true : false}}'>三元运算:result为真时显示</view>
      <view>算术运算： {{a + b}} + {{c}} + d </view>
      <view wx:if="{{length >3}}">逻辑判断:当length的值大于3时该组件显示 </view>
      <view>字符串运算: {{"Hello, " + name}}</view>
      <view>字符串运算: {{msg + name}}</view>
      <view>数据路径运算: {{object.key2}} {{array[1]}}</view> </view> </view></view>

 页面数据:页面数据在JS文件的data属性中进行初始化，全部变量如下所示：

data: {
    btnText: "按钮文字",
    content: "该按钮已经绑定btnClick事件",
    condition: false,
    a: 3, b: 4, c: 5,
    object: {
      key1: 'Hello ', key2: 'Hi'
    },
    array: ['Toky', 'Bob', 'Nike'],
    message1: "这是简单绑定的数据",
    id: 'testpage02View',
    msg: "Hi, ",
    name: "Toky",
    result: false
  },

页面点击事件处理函数:按钮点击后需要相应的处理函数执行逻辑代码，其完整代码如下：

// pages/demo2-2/dataBind.js
Page({
  data: { 
    content: "该按钮已经绑定btnClick事件",
    //省略其他变量
  },
  // 按钮点击事件处理函数
  btnClick: function() {
    console.log("按钮被点击")
    this.setData({
      content: "这是更新后的内容..."
    })
  },
})

 上述代码第8行的this指代page函数，page函数中固有的setData方法用于更新data域中的页面数据。由第9行可以看出，setData里同样是传入一个json对象作为参数，该对象里可以填上多个data中已定义或未定义的变量名，这里的未定义的意思是：当在data属性里未对变量定义和初始化时，该方法依旧可以动态地往data属性里面添加数据。另外，所有的页面数据的值都可以在调试器的AppData面板观察到。

3.渲染标签

条件渲染

指根据绑定表达式的逻辑值来判断是否渲染当前组件。view组件拥有控制是否显示的hidden属性， 代码如下所示：

<!--WXML页面代码-->
<view class="content" hidden="{{flag ? true : false}}">
</view>
//JS文件代码
Page({
    data: {  
     flag:false
     }
})

在上面的代码中，当flag变量的值为true时，view组件及其包含的子组件将不会渲染，当flag变量的值为false时，将view组件渲染输出到页面。

wx:if：在微信小程序的wxml文件中，提供了另一种方式来进行类似的条件渲染。就是使用wx:if来控制是否渲染当前组件，其实在上一节的数据绑定中已经使用过，具体代码如下：

<view wx: if= " ({condition}) "> True </view>

 在上面的代码中，当condition变量的值为true时，view组件将渲染输出，当condition 变量的值为false，view组件将不渲染。 值得注意的是，不能在双括号与引号直接留空格。如下面代码段会导致True恒显示，代码如下：

<view wx:if="{{condition}}  "> True </view>

 看起来wx:if属性与组件的hidden类似，不同的是，控制是否渲染的逻辑变量值刚好相反。wx:if可以更方便地控制，还可以使用wx:elif、wx:else来添加多个分支块，当控制表达式的值为true时渲染一个分支，控制表达式的值为false时渲染另一个分支。如下代码所示：

<!--WXML页面代码-->
<view wx:if="{{length >10}}"> case1 </view>
<view wx:elif="{{length > 5}}">case2 </view>
<view wx:else>case3</view>
//JS文件代码
Page({
    data: {
      length:6
    }
})

以上代码中，当length的值大于10时，在界面中渲染输出的是case1字样,当length 的值大于5且小于10时，在界面中渲染输岀的是case2字样,而当length的值小于等于5或是其他情况时, 在界面中渲染输岀的是case3。

block wx:if  当需要通过一个表达式去控制多个组件时，一种方式是为每个组件都添加一个wx:if控制属性。但更好的方式是使用<block>标签将一个包含多节点的结构块包装起来，然后在<block>标签中添加一个wx:if控制属性即可。如下面代码所示：

<!--WXML页面代码-->
<block wx:if="{{condition}}">
<view> view1</view>
<view> view2 </view>
</block>
//JS文件代码
Page({
    data: {
      condition:true
    }
})

 列表渲染

常用的控制结构还有循环，微信小程序使用wx：for提供循环渲染的控制属性。

wx:for 简单列表渲染

循环对象数组：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名为 index，数组当前项的变量名默认为 item。如下列代码所示:

<!--WXML页面代码-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//JS文件代码
Page({
    data: {
      array: [{ "message": "mes1" }, { "message": "mes2" }, 
            { "message": "mes3" }, { "message": "mes4" }]
        },
    }
})

从下图中可看出，默认数组的当前项的下标index从0开始，并依次循环输出数组的条目item，且item也可以是json对象，利用上一节提到的“.”运算符取到下一级的属性。

 

wx:for-item与wx:for-index：在使用wx:for时也可以将数组当前下标和当前元素变量进行重命名，使用 wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。如下面代码所示：

<!--WXML页面代码-->
<view>
<view wx:for="{{users}}" wx:for-index="myindex" wx:for-item="user">
<text>{{myindex}}-{{user.name}}-{{user.age}}</text>
</view>
</view>
//JS文件代码
Page({
    data: {
      users: [{ name: "Toky", age: 21 }, 
            { name: "Nike", age: 19 }, 
            { name: "Lisa", age: 20 }],}})

 

4.模板与引用

在微信小程序的WXML文件中，如果某些WXML代码需要在多个地方反复使用，这时，可以考虑将这些代码定义为一个模板，然后就可在其他WXML文件中利用关键字直接使用该模板。此外，引用与模板皆针对于WXML文件，在1.4.4节关于WXSS文件的介绍中曾使用import关键字导入公共样式文件。相似的道理，针对JS文件，则可在utils.js或其他JS文件夹中编写公共的业务逻辑，最后利用exports关键字进行导出，如下代码所示：

module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay
}

以上js代码用于一些公共类的导出，在其他js逻辑文件里可利用require关键字引入，如下述代码所示：

var dateTimePicker = require('../../../utils/dateTimePicker');

   引用本页面模板

模板可定义在当前页面，也可将项目使用到的所有模板定义到一个统一的WXML文件中，在本页面使用模板的步骤如下：

在Chapter02项目中新建testTemplate页面，定义模板的代码如下：

<!--pages/demo2-4/testTemplate.wxml-->
      <template name="userTemplate"> <!----定义模板-->
        <view>
          <view>姓名：{{item.name}}</view>
          <view>年龄：{{item.age}}</view>
        </view>
      </template><!-- 定义结束 -->

 在未使用该模板时，上面定义模板的WXML代码不会显示任何元素，使用该模板的代码如下所示：

<!--pages/demo2-4/testTemplate.wxml-->
<view>
<block wx:for="{{users}}">
<template is="userTemplate" data="{{item}}"/> <!-- 调用模板，传入对象数据-->
</block>
</view>
Page({
    data: {
      users: [{ name: "Toky", age: 21 }, 
            { name: "Nike", age: 19 }, 
            { name: "Lisa", age: 20 }],
    }
})

 

引用其他位置的模板

在进行模板template的定义时也可以写在单独的一个WXML文件里，这时在其他页面进行引用时不是用关键字include，而是import，二者的作用域不同。import只会引入目标文件中定义的 template，而不会引入目标文件里面再引入的其他template，即不能进行链式引用。

定义模板

在Chapter02项目目录下新建commons目录，再新建templates.wxml，如图

在templates.wxml中定义两个模板，如下述代码所示：

<!-- Chapter02/pages/commons/templates.wxml -->
<template name="template1">
  <text>{{text}}</text>
</template>
<template name="template2">
  <text>{{text}}</text>
</template>

 引用

在其他文件中进行引用时首先需要利用import关键字将模板拷贝到当前页面，再进行如上一小节中讲解的模板使用方法，利用is关键字指明模板。代码如下所示：

<!--pages/demo2-4/testTemplate.wxml-->
      <import src="../commons/templates" />
      <template is="template1" data="{{text: '这是传入模板的需要显示的内容'}}" />

 

引用wxml代码段

模板针对于有数据需要传入的情况，实际上若是只想引用静态的WXML片段直接使用include关键字即可，引用wxml代码段步骤如下：

在commons目录下新建文件footer.wxml，并在footer.wxml中添加如下内容：

<!-- Chapter02/pages/commons/footer.wxml -->
<view>
<text>这是许多页面底部需要显示的内容</text>
</view>

在其他需要该footer作为尾部的页面，利用关键字include进行引用。include 可以将目标文件除了<template/>外的整个代码引入，相当于拷贝到 include 所在的位置。在2.4.1节创建的testTemplate.wxml的底部加上如下代码段：

<!--pages/demo2-4/testTemplate.wxml-->
<include src="../commons/footer" />

 上述代码第二行的include标签是一个单独的闭合标签，与在使用模板时用的template闭合标签是一样的，注意不能将末尾的反斜杠丢掉。

5.九九乘法表案例讲解

 代码详情

九九乘法表WXML代码如下：

<!-- MultiplicationTable/pages/index/index.wxml -->
<view class="jiu-box">
    <view wx:for="{{arr}}" wx:for-item="i" class="aa">
        <view wx:for="{{arr}}" wx:for-item="j" class="jiu">
            <view wx:if="{{i >= j}}" class="jiu-item">
                {{j}}X{{i}}={{j*i}} 
            </view>
            <view wx:else hidden="{{true}}"></view>
        </view>
    </view>
</view>

九九乘法表WXSS样式代码如下：

/* MultiplicationTable/pages/index/index.wxss */
.aa {
  line-height: 32px;
}
.jiu-box {
  width: 720rpx;
  margin: auto;
  padding: 28rpx 0;
}
.jiu {
  display: inline-block;
}
.jiu-item {
  width: 73rpx;
  height: 32rpx;
line-height: 32rpx;
  text-align: center;
  border: 1px solid #abcdef;
  font-size: 19rpx;
  margin-right: 4rpx;
}
.jiu-none {
  display: none;
}
one {
  display: inline-block;
  margin-right: 4rpx;
  width: 70rpx;
  height: 32rpx;
  font-size: 14rpx;
  text-align: center;
  border: 1rpx solid #1296db;}

 实现效果

6.小结

本文主要介绍了4部分内容。首先是小程序视图与渲染过程。 第1部分在讲解视图层时首先介绍了WXML页面，组成页面的重要部件是组件。 第2部分讲解数据绑定过程。 第3部分需要学会两个重要的渲染标签，分别是wx:if与wx:for，前者用于条件控制，后者用于循环控制。这两个标签的使用能大大减少WXML页面代码的冗余，具体可通过九九乘法表案例体会。 最后一部分讲解了模板与引用，代码的封装在开发中是尤为重要的，WXML代码的重复利用可通过定义模板实现。同样，WXSS与JS代码也有类似的思想。

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

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

相关文章

通过流量安全分析发现主机异常

通过流量安全分析发现主机异常

主机异常分析在计算机系统中具有重要意义。以下是主机异常分析的几个关键点&#xff1a; 1、检测安全威胁&#xff1a;主机是计算机系统的核心组件&#xff0c;通过对主机异常进行分析&#xff0c;可以快速检测到潜在的安全威胁&#xff0c;如恶意软件、病毒感染、黑客入侵等。…
阅读更多...
python中可变类型与不可变类型详细介绍

python中可变类型与不可变类型详细介绍

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一.可变类型与不可变类型的特点 1.不可变数据类型 不可变数据类型在第一次声明赋值声明的时候, 会在内存中开辟一块空间, 用来存放这个变量被赋的值, 而这个变量实际上存储的, 并不是被赋予的这个值, 而是存放这个值所在空…
阅读更多...
Python获取本机IP地址的三种方式

Python获取本机IP地址的三种方式

目录 1、使用专用网址 2、使用自带socket库 3、使用第三方netifaces库 1、使用专用网站 获取的是公网IP。 网址&#xff1a;http://myip.ipip.net 代码&#xff1a; import requestsres requests.get(https://myip.ipip.net, timeout5).textprint(res)具体可以类似这样&#x…
阅读更多...
IP-guard客户端WINDOWS的打包方式

IP-guard客户端WINDOWS的打包方式

IP-guard的打包方式： 第一种：
阅读更多...
Bootstrap的旋转器组件

Bootstrap的旋转器组件

旋转效果可以用来指示状态&#xff0c;比如页面的加载状态。 可以用类spinner-border实现普通旋转的旋转器效果。 用类spinner-grow实现渐渐变大的旋转器效果。 01-最基本的示例代码 <!DOCTYPE html> <html> <head><meta charset"UTF-8">…
阅读更多...
Python树莓派开发

Python树莓派开发

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…
阅读更多...
鞋帽箱包经营小程序商城的作用是什么

鞋帽箱包经营小程序商城的作用是什么

线上是很多线下商家破局的方法&#xff0c;企业私域经营很重要。 如今&#xff0c;各行业都在搭建自有私域流量池及自主经营。1000商城模板&#xff0c;海量营销/功能/控件&#xff0c;极简的拖拽拉搭建形式&#xff0c;通过【雨科】平台搭建鞋帽箱包小程序商城&#xff0c;摆…
阅读更多...
qwen大模型，推理速度慢，单卡/双卡速度慢，flash-attention安装，解决方案

qwen大模型，推理速度慢，单卡/双卡速度慢，flash-attention安装，解决方案

场景 阿里的通义千问qwen大模型&#xff0c;推理速度慢&#xff0c;单卡/双卡速度慢。 详细&#xff1a; 1、今日在使用qwen-14b的float16版本进行推理&#xff08;BF16/FP16) 1.1 在qwen-14b-int4也会有同样的现象 2、使用3090 24G显卡两张 3、模型加载的device是auto&#x…
阅读更多...
测试老鸟总结，Allure测试报告-自动化测试详解，惊险避坑...

测试老鸟总结，Allure测试报告-自动化测试详解，惊险避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Allure安装教程…
阅读更多...
hello react

hello react

react中文官网 一、什么是react React是一个由Facebook开源的JavaScript库&#xff0c;用于构建用户界面。它基于组件化的思想&#xff0c;将界面拆分成多个独立的、可复用的组件&#xff0c;并通过组件之间的交互构建整个用户界面。React使用虚拟DOM&#xff08;Virtual DOM…
阅读更多...
线框图软件：Balsamiq Wireframes mac中文介绍

线框图软件：Balsamiq Wireframes mac中文介绍

Balsamiq Wireframes mac是一款用于创建线框图的软件工具。它旨在帮助用户快速制作出清晰、简洁的界面原型&#xff0c;以便在设计和开发过程中进行协作和沟通。 Balsamiq Wireframes具有简单直观的用户界面&#xff0c;使用户能够快速添加和编辑各种用户界面元素&#xff0c;如…
阅读更多...
一百九十五、MySQL——MySQL数据库创建只读权限的账号（附流程截图）

一百九十五、MySQL——MySQL数据库创建只读权限的账号（附流程截图）

一、目的 在团队开发过程中&#xff0c;为了实现数据共享以及避免其他团队修改库表数据&#xff0c;需要提供数据库只读权限的账号&#xff0c;因此以MySQL数据库为例&#xff0c;创建MySQL数据库只读权限的账号 二、实施步骤 &#xff08;一&#xff09;第一步&#xff0c;…
阅读更多...
【C++】多态结束篇

【C++】多态结束篇

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;虚表存在内存中哪里&#x…
阅读更多...
SpringBoot中的日志使用

SpringBoot中的日志使用

SpringBoot的默认使用 观察SpringBoot的Maven依赖图 可以看出来&#xff0c;SpringBoot默认使用的日志系统是使用Slf4j作为门户&#xff0c;logback作为日志实现 编写一个测试代码看是否是这样 SpringBootTest class SpringbootLogDemoApplicationTests {//使用Slf4j来创建LOG…
阅读更多...
广西建筑模板的材质类型和特点有哪些？

广西建筑模板的材质类型和特点有哪些？

广西建筑模板常用的材质类型包括木模板、钢模板、竹胶合板、塑料模板和铝合金模板等。每种材质都具有不同的特点和适用范围。 1. 木模板&#xff1a; - 适用于高层建筑的水平模板、剪力墙、竖向墙板、高架桥、立交桥、大坝、隧道施工及梁柱模板。 - 具有高强度和良好的韧性&…
阅读更多...
通过全流量分析助力某医院关键业务提高性能

通过全流量分析助力某医院关键业务提高性能

背景 福建某大型医院信息科近期接到多人反应&#xff0c;业务系统访问慢和报错情况&#xff0c;因为问题出现没有时间和操作规律&#xff0c;网络管理员通过多种方式排查&#xff0c;未能得到有效的原因定位。 我们已将NetInside流量分析系统部署到医院的机房内&#xff0c;使用…
阅读更多...
2022年京东双十一手机数码全品类数据回顾

2022年京东双十一手机数码全品类数据回顾

2023年双十一临近&#xff0c;特此带大家回顾一下去年双十一热门品类的一些战况数据。这一期是京东手机电脑数码。 整体表现来看&#xff0c;2022年双11大促京东手机、电脑、数码类产品并没有想象中的增长状态&#xff0c;无论是电脑中的笔记本、数码中的相机&#xff0c;或者是…
阅读更多...
InnoDB事务

InnoDB事务

1. 支持的事务 扁平事务&#xff1a;所有操作都处于同一层次 带保持点的扁平事务&#xff1a;事务能够回到保持点的状态。 链事务&#xff1a;系统崩溃时&#xff0c;所有保存点都将消失。 嵌套事务&#xff1a;具有层次结构&#xff08;树&#xff09;。任意一个事务回滚会…
阅读更多...
c语言进制的转换二进制转换10进制

c语言进制的转换二进制转换10进制

c语言进制的转换之二进制转换10进制 c语言的进制的转换 c语言进制的转换之二进制转换10进制一、二进制转换10进制的方法二、10进制程序打印 一、二进制转换10进制的方法 二进制&#xff1a; 二进制逢二进一&#xff0c;所有的数组是0、1组成 十进制转二进制&#xff1a; 除二反…
阅读更多...
AD20~PCB的板层设计和布线

AD20~PCB的板层设计和布线

1、打开51单片机最小系统的工程文件。 2、完成原理图后续工作&#xff1a;打开原理图文件&#xff0c;双击元件“CH340X”窗口右边弹出元件内部属性设置界面&#xff0c;在窗口下方点击“Footprint ->Add…”按钮进入添加元件类型界面&#xff0c;进入元件封装选择界面&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023