第四章总结

最新推荐文章于 2024-08-09 09:27:50 发布

pywdsg

最新推荐文章于 2024-08-09 09:27:50 发布

阅读量219

点赞数 4

文章标签： ide

本文链接：https://blog.csdn.net/pywdsg/article/details/139548390

版权

在微信小程序乃至其他轻应用平台中，组件化开发是构建高效、灵活用户界面的核心手段之一。本篇博客将深入剖析小程序页面中的各类组件，从定义、属性到实际应用，帮助开发者更好地理解和运用这些基础构建块，打造丰富而功能完善的用户体验。

组件的定义及属性
组件的定义：
在小程序框架中，组件是一种可复用的UI单元，它封装了视图结构和交互逻辑，通过定制化的HTML-like标记（如WXML）和样式（WXSS）来实现特定功能与视觉效果。每个组件都有其独特的属性和方法，通过设置属性值可以调整组件外观和行为。

组件属性：
每个组件都有一系列预设的属性，它们作为标签属性在WXML中声明，并通过JavaScript进行动态赋值。例如，`<view>`组件可能具有`id`、`class`、`style`等通用属性，而像`<button>`组件则会有`type`、`form-type`等特定属性，用以控制按钮类型和表单提交方式。开发者可通过在组件标签内指定属性名和属性值来自定义组件的表现形式和功能。

容器视图组件
容器视图组件是小程序中布局的基础元素，如`<view>`，它是页面中最常用的容器组件，充当着HTML中的`<div>`角色。它可以包含其他子组件和文本内容，并通过CSS样式的设定（在WXSS中）来定义尺寸、颜色、布局模式等。此外，还有`<scroll-view>`滚动视图容器、`<swiper>`轮播组件等特殊容器组件，它们提供更丰富的布局和交互功能。

<view class="container" style="padding: 0rpx;">
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true"
style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad"
bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img"src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_de-scription}}</text>
</view>
</view>
</scroll-view>
<view class="boby-view">
<loading hidden="{{hidden}}"bindchange="loadingChange">
加载中...
</loading>
</view>
</view>

.userinfo{
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar{
width: 128px;
height: 128px;
margin: 20px;
border-radius: 50px;
}
.userinfo-nickname{
color: #aaa;
}
.usermotto{
margin-top: 200px;
}
/**/
scroll-view{
width: 100%;
}
.item{
width: 90%;
height: 300rpx;
margin: 20rpxauto;
background: brown;
overflow: hidden;
}
.item.img{
width: 430px;
margin-right: 20px;
float: left;
}
.title{
font-size: 30rpx;
display: block;
margin: 30rpxauto;
}
.description{
font-size: 26rpx;
line-height:15rpx;
}

基础内容组件
基础内容组件主要用于显示静态或动态内容，比如`<text>`组件用于展示文本信息，支持富文本格式；`<image>`组件则用于加载和展示图片资源，具有src、mode等多种属性来控制图片大小、裁剪模式等。这些组件简单直接地服务于内容呈现，构成了小程序页面的基石。

Page({
data:{
iconType:["success","success_no_circle","info","warn","warn","waiting","cancel",
"download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})
Page({
data:{
iconType:["success","success_no_circle","info","warn","warn","waiting","cancel",
"download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})

<view>显示百分比</view>
<progress percent='80' show-info='80'></progress>
<view>改变宽度</view>
<progress percent='50' show-width='2'></progress>
<view>自动显示进度条</view>
<progress percent='80' active></progress>

表单组件
表单组件是实现用户输入和数据收集的重要工具。包括但不限于`<input>`用于文本输入，`<picker>`用于选择器功能，`<checkbox>`、`<radio>`用于多选或单选操作，以及`<form>`用于包裹整个表单区域。这类组件通常会触发各种事件，以便开发者捕获用户的交互动作，并对数据进行实时验证和处理。

Page({
data:{
size:'20'
},
sliderchange:function(e){
this.setData({size:e.detail.value})
}
})
<view>默认 min=0 max=100 step=1</view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view>设置min=20max max-200 stpe=10</view>
<slider min='0' max='200' step='10' show-value></slider>
<view>背景条红色，已选择颜色绿色</view>
<slider color="#f00" selected-color='#0f0'></slider>
<view>滑动改变icon的大小</view>
<slider show-value bindchange="sliderchange"></slider>
<icon type="success" size='{{size}}'></icon>

Page({
data:{
var1:'关',
var2:'开',
var3:'未选'
},
sw1:function(e){
this.setData({var1:e.datail.value?'开':'关'})
},
sw1:function(e){
this.setData({var2:e.datail.value?'开':'关'})
},
sw1:function(e){
this.setData({var3:e.datail.value?'以选':'未选'})
},
})

<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap="bindButton">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">您输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
<input bindinput="bindReplaceInput" placeholder="连续两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

多媒体组件
多媒体组件允许小程序集成音视频播放功能，如`<video>`和`<audio>`组件，它们不仅可以播放网络或本地的音视频资源，还提供了播放/暂停、全屏播放、缓冲进度显示等一系列高级接口和属性，极大地丰富了小程序的互动体验。

<block wx:for="{{modes}}">
<view>当前图片模式是:{{item}}</view>
<image mode="{{item}}" src="/img/hle.png" style="width: 100%,;height:100%"/>
</block>

<audio src="{{src}}" action="{{action}}" poster="{{poster}}" name="{{name}}" author="{{author}}" loop controls></audio>
<button type="primary" bindtap='play'>播放</button>
<button type="primary" bindtap='pause'>暂停</button>
<button type="primary" bindtap='playRate'>设置速率</button>
<button type="primary" bindtap='currentTime'>设置当前时间(秒)</button>
Page({
data:{
poster:'http://y.gtimg.cn/music/photo_new/T002R300M000003rsKF44GyaSk.jpg? max_age+2592000',
name:'此时此刻',
author:'许巍',
src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid=ffffffff82def4af4b12b3cd9337d5e&uin=346897220vkey=6292F51E1E384E06DCBDC9aB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74COA5CCFADD6471160CAF3E6A&fromtag=46',
play:function(){
this.setData({
action:{
method:'play'
}
})
},
pause:function(){
this.setData({
action:{
method:'pause'
}
})
},
playRate:function(){
this.setData({
action:{
method:'setPlaybackRate',
data:10//速率
}
})
console.log('当前速率:'+this.data.action.data)
},
currentTime:function(e){
this.setData({
action:{
method:'setCurrentTime',
data:120
}
})
}
}
})

<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
Page({
data:{
src:"",
},
bindButtonTap:function(){
var that=this
wx.chooseVideo({
sourceType:['front','back'],
success:function(res){
that.setData({
src:res.tempFilePath
})
}
})
}
})

Page({
takePhoto(){
const ctx=wx.createCameraContext()
ctx.takePhoto({
quality:'high',
success:(res)=>{
this.setData({
src:res.tempImagePath
})
}
})
},
error(e){
console.long(e.datail)
}
})

其他组件
除了上述组件外，小程序还提供了诸如导航类（如`<navigator>`）、地图类（如`<map>`）、滑动视图列表（如`<slider>`、`<swiper>`）、提示反馈类（如模态框`<modal>`、 toast提示`showToast`）以及其他众多定制化组件。这些组件各司其职，使得小程序能够轻松应对复杂多变的业务场景需求。

综上所述，小程序页面组件体系的深度理解与合理运用，是提升开发效率和用户体验的关键所在。通过对各类组件特性的掌握和实践，开发者可以打造出既美观又实用的小程序应用，满足日益增长的移动端交互需求。

Page({
data:{
markers:[{
iconPath:"/pages/dw.png",
id:0,
longitude:"108,9290",
latitude:"34.1480",
width:50,
height:50
}],
polyline:[{
ponints:[
{
longitude:"108.9200",
latitude:"34.1400",
},
{
longitude:"108.9200",
latitude:"34.1500"
},
{
longitude:"108.9200",
latitude:"34.1700"
}
],
color:"#00ff00",
width:2,
dottedLine:true
}],
controls:[{
id:1,
iconPath:'/pages/dw.png',
position:{
left:0,
top:300,
width:30,
height:30
},
clickable:true
}]
},
regionchange(e){
console.log(e.type)
},
markertap(e){
console.log(e.markerId)
},
controltap(e){
console.log(e.controld)
}
})

<canvas canvas-id="myCanvas" style="border: 1px solid red;"/>

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_74879280/article/details/137086608

pywdsg

关注

4
点赞
踩
7

收藏

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

例如，`<view>`组件可能具有`id`、`class`、`style`等通用属性，而像`<button>`组件则会有`type`、`form-type`等特定属性，用以控制按钮类型和表单提交方式。除了上述组件外，小程序还提供了诸如导航类（如`<navigator>`）、地图类（如`<map>`）、滑动视图列表（如`<slider>`、`<swiper>`）、提示反馈类（如模态框`<modal>`、 toast提示`showToast`）以及其他众多定制化组件。
复制链接

扫一扫