第四章页面组件的总结

最新推荐文章于 2024-07-16 14:16:19 发布

m0_74079618

最新推荐文章于 2024-07-16 14:16:19 发布

阅读量1.8k

点赞数 32

文章标签：微信小程序

本文链接：https://blog.csdn.net/m0_74079618/article/details/137090361

版权

4.1组件的定义及属性

组件的定义：组件是由 WXML 结构、样式表和 JavaScript 代码组成的封装单元，可以实现特定的功能或者展示特定的内容。
属性：属性是组件的特性，用于控制组件的外观和行为。
常见属性：class和style：用于设置组件的样式，class可以引用全局样式表中定义的样式，style用于设置内联样式。data-xxx：自定义数据属性，可以在组件上添加自定义的数据，用于在事件处理或样式控制中使用。id：为组件指定唯一的标识符，方便 JavaScript 操作和样式控制。bind/ catch事件：用于绑定组件的事件处理函数

4.2容器视图组件

容器视图组件用于承载和布局其他组件或内容，是构建页面结构的基础概。

常用的容器视图组件及其属性：

view（视图容器）：
- view 是小程序中最常用的容器组件之一，用于承载其他组件或内容，并控制它们的布局和样式。
- 常见属性包括 class、style、data、id，以及事件绑定相关的 bind/ catch 等。
scroll-view（可滚动视图区域）：
- scroll-view 是一个可滚动的区域，可用于显示超出容器尺寸的内容。
- 属性包括 scroll-x（横向滚动）、scroll-y（纵向滚动）、scroll-top（滚动到顶部位置）、scroll-left（滚动到左边位置）等。
swiper（滑块视图容器）：
- swiper 是一个可以左右滑动切换的视图容器。
- 属性包括 indicator-dots（是否显示指示点）、autoplay（是否自动切换）、interval（自动切换时间间隔）等。

view组件示例

.xml

<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
  <view style="border: 1px solid red;flex-grow: 1;">1</view>
  <view style="border: 1px solid red;flex-grow: 1;">1</view>
  <view style="border: 1px solid red;flex-grow: 1;">1</view>
</view>
<view style="text-align: center;">上下混合布局</view>
  <view style="display: flex;flex-direction: column;">
  <view style="border: 1px solid red;">1</view>
    <view style="display: flex;">
    <view style="border: 1px solid red;flex-grow: 1;">2</view>
    <view style="border: 1px solid red;flex-grow: 1;">3</view>
    </view>
  </view>
  <view style="text-align: center;">左右混合布局</view>
  <view style="display: flex;">
    <view style="border: 1px solid red;flex-grow: 1;">1</view>
    <view style="display: flex;flex-direction: column;flex-grow: 1;">
    <view style="border: 1px solid red;flex-grow: 1;">2</view>
    <view style="border: 1px solid red;flex-grow: 1;">3</view>
    </view>
    </view>

效果图

scroll-view示例

.xml

<swiper indicator-dots='true' autoplay='true' interval='5000' duration ='1000'>
  <swiper-item>
    <image src="../image/电源.png" style="width: 100%;"></image>
  </swiper-item>
  <swiper-item>
    <image src="../image/耳机.png" style="width: 100%;"></image>
  </swiper-item>
  <swiper-item>
    <image src="../image/风扇.png" style="width: 100%;"></image>
  </swiper-item>
</swiper>

效果图

swiper示例

<swiper autoplay interval="2000" duration="500" style="height: 200rpx;">
  <swiper-item>
    <view style="height: 200rpx; background-color: #ff6666;">Slide 1</view>
  </swiper-item>
  <swiper-item>
    <view style="height: 200rpx; background-color: #66ccff;">Slide 2</view>
  </swiper-item>
  <swiper-item>
    <view style="height: 200rpx; background-color: #99ff99;">Slide 3</view>
  </swiper-item>
</swiper>

效果图

4.3基础内容组件

icon

.xml

<view>icon类型:
  <block wx:for="{{iconType}}">
    <icon type="{{item}}"/>{{item}}
  </block>
</view>
<view>icon大小:
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>{{item}}
  </block>
</view>
<view>icon颜色:
  <block wx:for="{{iconColor}}">
    <icon type="success" size="30" color="{{item}}"/>{{item}}
  </block>
</view>

.js

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

效果图

text

示例代码如下

<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}">&nbsp;</text></block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text></block></block></view></block>
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{19+x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}">&nbsp;</text></block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=11-2*x}}">
<text>*</text></block></block></view></block>

Page({
  data:{
    x:[1,2,3,4,5],
    y:[1,2,3,4,5,6,7,8,9]
  }
})

效果图

progress

显示进度状态

示例代码

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

效果图

4.4表单组件

表单组件用于收集用户输入的数据，常用于用户登录、注册、提交信息等场景。以下是一些常用的微信小程序表单组件：

input（输入框）：
- 用于接收用户的单行文本输入。
- 可以设置类型（text、number、password 等）、占位符、最大长度、默认值等属性。
textarea（文本域）：
- 用于接收用户的多行文本输入。
- 可以设置占位符、最大长度、默认值等属性。
checkbox（复选框）：
- 用于让用户选择一个或多个选项。
- 可以设置选项列表，以及选中状态和默认值等属性。
radio（单选框）：
- 用于让用户从多个选项中选择一个选项。
- 可以设置选项列表，以及选中状态和默认值等属性。
switch（开关）：
- 用于表示两种状态之间的切换。
- 可以设置默认值、开关样式等属性。
slider（滑动选择器）：
- 用于在一个固定的区间内选择一个值。
- 可以设置最小值、最大值、步长、默认值等属性。
picker（选择器）：
- 用于从预设的列表中选择一个或多个值。
- 可以设置选项列表、默认值、多列选择等属性。
form（表单）：
- 用于包裹表单中的各个组件，用于提交表单数据。
- 可以设置提交事件、重置事件等属性。

分门别类

4.4.1 button组件

示例代码

.xml

<button type="default">typedefault</button>
<button type="primary">typeprimary</button>
<button type="warn">typewarn</button>
<button type="default" bindtap='buttonSize' size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain' plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading显示</button>

.js

Page({
  data:{
    size:'default',
    plain:'false',
    loading:'false'
  },
  buttonSize:function(){
    if(this.data.size=="default")
    this.setData({size:'mini'})
    else
    this.setData({size:'default'})
  },
buttonLoading:function(){
  this.setData({loading:!this.data.loading})
}
})

效果图

4.4.2 radio单选框

示例代码

.xml

<view>选择你喜爱的城市:</view>
<radio-group bindchange="citychange">
     <radio value="西安">西安</radio>
     <radio value="北京">北京</radio>
     <radio value="上海">上海</radio>
     <radio value="广州">广州</radio>
     <radio value="深圳">深圳</radio>
</radio-group>
<view>你的选择:{{city}}</view>
<view>选择你喜爱的计算机语音:</view>
<radio-group class="radio-group" bindchange="radiochange">
      <label class="radio" wx:for="{{radios}}">
          <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
      </label>
</radio-group>
<view>你的选择:{{lang}}</view>

.js

Page({
  data:{
    radios:[
      {name:'java',value:'JAVA'},
      {name:'python',value:'Python',checked:'true'},
      {name:'php',value:'PHP'},
      {name:'swif',value:'Swif'},
    ],
    city:"",
    lang:""
  },
  citychange:function(e){
    this.setData({city:e.detail.value});
  },
  radiochange:function(event){
    this.setData({lang:event.detail.value});
    console.log(event.detail.value)
  }
})

效果图

4.4.3 checkbox复选框

示例代码

.xml

<view>选择你想去的城市:</view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.value}}
</checkbox>
</label>
</checkbox-group>
<view>你的选择是:{{city}}</view>

.js

Page({
    city:"",
    data:{
      citys:[
        {name:'km',value:'昆明'},
        {name:'sy',value:'三亚'},
        {name:'zh',value:'珠海',checked:'true'},
        {name:'dl',value:'大连'}]
  },
  cityChange:function(e){
    console.log(e.detail.value);
    var city=e.detail.value;
    this.setData({city:city})
  }
})

效果图

4.4.4 switch组件

示例代码

.xml

<view>
   <switch bindchange="swl">{{var1}}</switch>
</view>
<view>
   <switch checked bindchange="swl">{{var2}}</switch>
</view>
<view>
   <switch type="checkbox" bindchange="sw3">{{var3}}</switch>
</view>

.js

Page({
  data:{
    var1:'关',
    var2:'开',
    var3:'已选'
  },
  sw1:function(e){
    this.setData({var1:e.detail.value? '开':'关'})
  },
  sw2:function(e){
    this.setData({var2:e.detail.value? '开':'关'})
  },
  sw3:function(e){
    this.setData({var3:e.detail.value? '已选':'关'})
  }
})

效果图

4.4.5 slider滑动选择器

示例代码

.xml

<view>默认min=0 max=100 step=1</view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view>设置min=20 max=200 step=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>

.js

Page({
  data:{
    size:'20'
  },
  sliderchange:function(e){
    this.setData({size:e.detail.value})
  }
})

效果图

4.4.6 picker滚动选择器

.xml

<view>---range为数组---</view>
<picker range="{{array}}" value="{{index1}}" bindchange="arrayChange">
      当前选择:{{array[index1]}}
</picker>
<view>---range为数组对象---</view>
<picker 
bindchange="objArrayChange" value="{{index2}}" range-key="name" range="{{objArray}}">
      当前选择:{{objArray[index2].name}}
</picker>

.js

Page({
  data:{
    array:['Java','Python','C','C#'],
    objArray:[
      {id:0,name:'Java'},
      {id:1,name:'Python'},
      {id:2,name:'C'},
      {id:3,name:'C#'},
    ],
    index1:0,
    index2:0
  },
  arrayChange:function(e){
    console.log('picker值变为',e.detail.value)
    var index=0;
    this.setData({
      index1:e.detail.value
    })
  },
  objArrayChange:function(e){
    console.log('picker值变为',e.detail.value)
    var index=0;
    this.setData({
      index2:e.detail.value
    })
  }
})

效果图

4.4.7 picker-view

.xml

<view>当前日期:{{year}}年{{year}}月{{day}}日</view>
<picker-view indicator-style="height:50px;" style="width: 100%;height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px;">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
    <view wx:for="{{months}}" style="line-height: 50px;">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
    <view wx:for="{{days}}" style="line-height: 50px;">{{item}}日</view>
    </picker-view-column>
</picker-view>

.js

const date=new Date()
const years=[]
const months=[]
const days=[]
for(let i=1900;i<=2050;i++){
  years.push(i)
}
for(let i=1;i<=12;i++){
  months.push(i)
}
for(let i=1;i<=31;i++){
  days.push(i)
}
Page({
  data:{
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    months:date.getMonth()+1,
    day:date.getDate(),
    value:[118,0,0],
  },
  bindChange:function(e){
    const val=e.detail.value
    console.log(val);
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]
    })
  }
})

效果图

4.4.8 from

.xml

<form bindsubmit="forSubnit" bindreset="forReset">
<view>姓名:
    <input type="text" name="xm"/>
 </view>
 <view>性别:
    <radio-group name="xb">
    <label>
    <radio value="男" checked/>男</label>
    <label>
    <radio value="女"/>女</label>
    </radio-group>
 </view>
 <view>爱好:
    <checkbox-group name="hobby">
    <label wx:for="{{hobbies}}">
       <checkbox value="{{item.value}}"
       checked="{{item.checked}}">{{item.value}}</checkbox>
    </label>
    </checkbox-group>
 </view>
 <button form-type="submit">提交</button>
 <button form-type="reset">重置</button>
</form>

.js

Page({
  hobby:"",
  data:{
    hobbies:[
      {name:'jsj',value:'计算机',checked:'true'},
      {name:'music',value:'听音乐'},
      {name:'game',value:'玩游戏'},
      {name:'swim',value:'游泳',checked:'true'}
    ]
  },
  formSubmit:function(e){
    console.log('form发生了submit事件,携带数据为:',e.detail.value)
  },
  formReset:function(){
    console.log('form发生了reset事件')
  }
})

效果图

综合示例

<!-- input 输入框 -->
<input placeholder="请输入用户名" bindinput="inputChange" />

<!-- textarea 文本域 -->
<textarea placeholder="请输入内容" bindinput="textareaChange"></textarea>

<!-- checkbox 复选框 -->
<checkbox-group bindchange="checkboxChange">
  <label wx:for="{{checkboxItems}}" wx:for-item="item" wx:key="{{item.value}}">
    <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
  </label>
</checkbox-group>

<!-- radio 单选框 -->
<radio-group bindchange="radioChange">
  <label wx:for="{{radioItems}}" wx:for-item="item" wx:key="{{item.value}}">
    <radio value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</radio>
  </label>
</radio-group>

<!-- switch 开关 -->
<switch checked="{{switchChecked}}" bindchange="switchChange"></switch>

<!-- slider 滑动选择器 -->
<slider value="{{sliderValue}}" min="0" max="100" bindchange="sliderChange"></slider>

<!-- picker 选择器 -->
<picker mode="selector" range="{{pickerRange}}" value="{{pickerIndex}}" bindchange="pickerChange">
  <view>当前选择：{{pickerRange[pickerIndex]}}</view>
</picker>

<!-- form 表单 -->
<form bindsubmit="formSubmit" bindreset="formReset">
  <button formType="submit">提交</button>
  <button formType="reset">重置</button>
</form>

Page({
  data: {
    inputVal: '', 
    textareaVal: '', 
    checkboxItems: [ 
      { name: '选项1', value: 'value1', checked: false },
      { name: '选项2', value: 'value2', checked: true },
      { name: '选项3', value: 'value3', checked: false }
    ],
    radioItems: [ // radio 单选框的选项列表
      { name: '选项1', value: 'value1', checked: false },
      { name: '选项2', value: 'value2', checked: true },
      { name: '选项3', value: 'value3', checked: false }
    ],
    switchChecked: false, 
    sliderValue: 50, // slider 滑动选择器的值
    pickerRange: ['选项1', '选项2', '选项3'], // picker 选择器的选项列表
    pickerIndex: 0 
  },
  inputChange: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },
  textareaChange: function (e) {
    this.setData({
      textareaVal: e.detail.value
    });
  },
  checkboxChange: function (e) {
    const items = this.data.checkboxItems;
    const values = e.detail.value;
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = values.indexOf(items[i].value) !== -1;
    }
    this.setData({
      checkboxItems: items
    });
  },
  radioChange: function (e) {
    const items = this.data.radioItems;
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = items[i].value === e.detail.value;
    }
    this.setData({
      radioItems: items
    });
  },
  switchChange: function (e) {
    this.setData({
      switchChecked: e.detail.value
    });
  },
  sliderChange: function (e) {
    this.setData({
      sliderValue: e.detail.value
    });
  },
  pickerChange: function (e) {
    this.setData({
      pickerIndex: e.detail.value
    });
  },
  formSubmit: function (e) {
    console.log('提交：', e.detail.value);
  },
  formReset: function () {
    console.log('重置');
  }
});

效果图

4.5多媒体组件

多媒体组件用于展示和播放各种类型的多媒体内容，包括图片、音频和视频。

src（图片路径）：
- 图片文件的路径，可以是本地路径或者远程路径。
mode（图片裁剪、缩放的模式）：
- 可以设置为 scaleToFill、aspectFit、aspectFill、widthFix、top、bottom、center、left、right、top left、top right、bottom left、bottom right。
- 默认值为 scaleToFill，表示缩放图片以填充容器。
lazy-load（图片懒加载）：
- 是否开启图片懒加载，默认值为 false。
- 设置为 true 表示开启图片懒加载，图片进入可视区域才会加载。
show-menu-by-longpress（长按识别小程序码或者识别图中的文字）：
- 是否开启长按图片识别小程序码或者识别图中的文字，默认值为 false。
- 设置为 true 表示开启，用户长按图片会弹出菜单。
binderror（图片加载失败时触发的事件）：
- 图片加载失败时触发的事件，可以用于处理加载失败的情况。

audio组件

示例代码

.xml

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

.js

Page({
  data:{
   poster:'',
   name:'此时此刻',
   author:'许巍',
   src:'',
  },
  play:function(){
    this.setData({
      action:{
        method:'play'
      }
    })
  },
  pause:function(){
    this.setData({
      action:{
        method:'psuse'
      }
    })
  },
  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组件

示例代码

.xml

<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>

.js

Page({
  data:{
    src:"",
  },
  bindButtonTap:function(){
    var that = this
    wx.chooseVideo({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success:function(res){
  that.setData({
    src:res.tempFilePath
  })
}

    })
  }
  
})

效果图

camra组件

示例代码

.xml

<camera device-position="back" flash="off" binderror="error" style="width: 100%;height: 350px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

.js

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

效果图

4.6 其他组件

除了前面介绍的组件以外,map组件和canvas组件比较常用

4.6.1 map

map组件用于在页面显示地图或路径

示例代码

.xml

<map id="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location
style="width: 100%;height: 300px;"></map>

.js

Page({
  data:{
    markers:[{
      iconPath:"../image/电源.png",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
        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:'../image/耳机.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.controlId)
  }
})

效果图

canvas组件

示例代码

.js

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas', this)
    ctx.setFillStyle('green')
    ctx.fillRect(10, 10, 200, 100)
    ctx.draw()
  }
})