第四章总结

J_251

于 2024-03-29 14:23:22 发布

阅读量481

点赞数 11

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_78533515/article/details/136818466

版权

组件的定义及属性：

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-*、bind */catch *等

1.id 组件的唯一表示，保持整个页面唯一，不常用

2. class 组件的样式类，对应 WXSS 中定义的样式

3. style 组件的内联样式，可以动态设置内联样式

4. hidden 组件是否显示，所有组件默认显示

5. data-*自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可
以通过传人参数对象的 currentTarget,dataset 方式来获取自定义属性的值

6. bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数

容器视图组件：

view:

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper 组件。

下图是view的特有属性

代码参考：

<view style="text-align:center">默认 flex布局</view>

<view style="display:flex">
<view style="border:1px solid #f00;flex-grow:1">1</view>
<view style="border:1px solid #f00;flex-grow:1">2</view>
<view style="border:1px solid #f00;flex-grow:1">3</view>
</view>

<view style="text-align:center">上下混合布局</view>

<view style="display:flex;flex-direction:column">
<view style="border:1px solid #f00;">1</view>
<view style="display:flex">
<view style ="border:1px solid #f00; flex-grow:l">2</view>
<view	style ="border:1px solid #f00; flex-grow:2">3</view>
</view></view>

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

结果：

scroll-view:

设置scroll-view组件可以实现滚动视图的相关功能

swiper:

轮播图，图片预览，页面滑动

代码：

wxml:

<swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000'>
  <swiper-item>
    <image src="../img/1.jpg" style="width: 100%;" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="../img/2.jpg" style="width: 100%;" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="../img/3.jpg" style="width: 100%;" mode=""/>
  </swiper-item>
</swiper>

结果：

基础内容控件：

icon:

图标组件：通常表示一种状态

代码演示：

wxml:

<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","snccess_no_circle","info","warn","wait-ing","cancel","download","search","clear"],
    iconSize:[10,20,30,40,50],
    iconColor:['#f00','#0f0','#00f']
  }
})

结果：

text:

用于展示内容，支持长按选中，行内元素

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>

结果：

表单控件：

button:

实现用户和应用之间交互

代码：

wxml:

<button type="default">default</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
<button type="" bind:tap='buttonSize' size="{{size}}">改变size</button>
<button type="" bind:tap='buttonPlain' loading="{{plain}}">改变plain</button>
<button type="" bind:tap='buttonLoading' loading="{{loading}}">改变loading</button>

.js

Page({
  data:{
    size:'default',
    plain:'false',
    loading:'false'
    // city:''
  },
  buttonSize(){
    if(this.data.size == 'default')
    this.setData({size:'mini'})
    else
    this.setData({size:'default'})
  },
  buttonPlain(){
    this.setData({plain: ! this.data.plain})
  },
  buttonLoading:function(){
    this.setData({loading: ! this.data.loading})
  }
  // citychange : function(event){
  //   this.setData({city:event.detail.value})
  // }
})

结果：

radio:

单选框：

代码：

wxml:

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

.js:

Page({
  data:{
    city:''
  },
  citychange : function(event){
    this.setData({city:event.detail.value})
  }
})

结果：

checkbox:

复选框：

swich:

开关选择器：

代码：

wxml:

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

.js:

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

结果：

slider:

滑动选择器：

代码：

.wxml：

<view> 默认 min=0 max=100 step=1</view>
<slider></slider>

<view>显示当前</view>
<slider show-value></slider>
<view>设置值</view>
<slider min="0" max="200" step="10" show-value></slider>

<view>滑动改变大小</view>
<slider show-value bindchange='sliderchage'></slider>
<icon type="success" size="{{size}}"></icon>

.js:

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

结果：

picker:

滚动组件选择器：

代码：

.wxml:

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

.js:

Page({
  data:{
    array:['Java','Pytion','C','C#'],
    objArray:[
      {id:0,name:'java'},
      {id:1,name:'pytion'},
      {id:2,name:'C'},
      {id:3,name:'c#'}
    ],
    index:0,
    index2:0
  },
  arrayChange:function(e){
    console.log('值为：',e.detail.value)
    this.setData({
      index:e.detail.value
    })
  },
  objArrayChange:function(e){
    console.log('picher值为:',e.detail.value)
    this.setData({
      index2:e.detail.value
    })
    }
})

结果：

picker-view:

嵌入页面滚动选择器：

代码：

<view>数字为：{{int}}</view>
<picker-view indicator-style="height:50px;" value="{{arr}}" style="width: 100%;height: 300px;" bindchange="bind" >
  <picker-view-column>
    <view wx:for="{{messages}}" style="line-height: 50px;">
      {{item}}
    </view>
  </picker-view-column>
</picker-view>

const messages = [];
for(let i = 0;i<100;i++){
  messages.push(i)
}

Page({
  data:{
    messages : messages,
    arr:[99],
    int : 0
  },
  
  bind:function(e){
    const val = e.detail.value
    this.setData({
      int:this.data.messages[val[0]]
    })
  }
})

结果：

input:

输入框，用于收集用户的信息

.wxml代码：

<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个是只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bind:tap="bindButtonTap">使得输入框获取焦点</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" placeholder="输入数字密码"/>
<input password type="text" placeholder="输入字符密码"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="带身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

.js:

Page({
  // input js文件
  data:{
    focus:false,
    inputValue:''
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput:function(e){
    var value=e.detail.value
    var pos=e.detail.cursor
    if(pos!=-1){
      //光标在中间
      var left=e.detail.value.slice(0,pos)
      //计算光标位置
      pos=left.replace(/11/g,'2').length
    }
    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标位置
    return{
      value:value.replace(/11/g,'2'),
      cursor:pos
    }
    //或者直接返回字符串，光标在最后边
    //return value.replace(/11/g,'2'),
  }
})

结果：

textarea:

textarea组件为多行输入框组件，可以实现多行内容的输入

.wxml:

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"></textarea>
<textarea placeholder="placeholder颜色是红色的"placeholder-style="color:red;"></textarea>
<textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"></textarea>
<button bind:tap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form中的textarea"name="textarea"></textarea>
<button form-type="submit">提交</button>
</form>

.js:

Page({
  // textarea js文件
  data:{
    height:10,
    focus:false
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindTextAreaBlur:function(e){
    console.log(e.detail.value)
  },
  bindFormSubmit:function(e){
    console.log(e.detail.value.textarea)
  }
})

结果：

label:

标签组件：提升表格的使用性：

.wxml:

<!-- textarea wxml文件 -->
<!-- label wxml文件 -->
<!--单击中国不能选择/取消复选框-->
<view><checkbox></checkbox>中国</view>
<!--单击”中国“可以选择/取消复选框-->
<view><label><checkbox></checkbox>中国</label></view>
<!--使用for找到对应的id-->
<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({
// label js文件
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})
}
})

结果：

多媒体组件：

image:

图像组件：

.wxml

<block wx:for="{{mode}}">
  <view>当前照片的模式是：{{item}}</view>
  <image mode="{{item}}" src="../img/1.jpg"/>
</block>
<block wx:for="{{mode2}}">
  <view>当前照片的模式是：{{item}}</view>
  <image mode="{{item}}" src="../img/2.jpg"/>
</block>

.js:

Page({
// label js文件
  data:{
    mode:['scaleToFill','aspectFit','aspectFill','widthFix'],
    mode2:['top','bottom','center','left','right']
  }
})

结果：

audio:

音乐播放组件：

.wxml代码：

<!-- 4.5.2 audio wxml文件 -->
<audio src="{{src}}"action="{{action}}"poster="{{poster}}"name="{{name}}"author="{{author}}"loop controls></audio>
<button type="primary" bind:tap='play'>播放</button>
<button type="primary" bind:tap="pause">暂停</button>
<button type="primary" bind:tap="playRate">设置速率</button>
<button type="primary" bind:tap="currentTime">设置当前时间（秒）</button>

.js:

Page({
// 4.5.2 audio js文件
data:{
  poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSK.jpg? max_age=2592000',
  name:'此时此刻',
  author:'许巍',
  src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid= ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey =6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8 DFEAF74C0A5CCFADD6471160CAF3E6A&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:

视频播放器：

.wxml:

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

.js;

Page({
// 4.5.2 audio js文件
data:{
  src : ''
},
bind:function(){
  var that = this
  wx.chooseVideo({
    sourceType:['album','camera'],
    maxDuration:60,
    camera:['front','back'],
    success:function(res){
      that.setData({
        src:res.tempFilePath
      })
    }
  })
}
})

结果：

camera:

拍照组件：

.wxml代码：

<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({
// 4.5.4 camera js文件
takePhoto(){
  const ctx=wx.createCameraContext()
  ctx.takePhoto({
    quality:'high',
    success:(res)=>{
      this.setData({
        src:res.tempImagePath
      })
    }
  })
},
error(e){
  console.log(e.detail)
}
})

结果：

其他组件：

map:

地图组件

.wxml代码：

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

.js：

Page({
data:{
  markers:[{
    iconPath:"/img/1.jpg",
    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:'/img/1.jpg',
    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:

绘图工具组件

.wxml:

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

.js:

Page({
  onLoad:function(options){
    var ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }
})

结果i：