devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第四章：页面组件

作者：从前慢现在也慢 | 2024-06-06 21:38:18

赞

踩

第四章：页面组件

一：组件的定义及属性

               组件是页面视图层的基本组成单元，组件组合可以构建功能强大的页面结构。

               组件的语法格式：<标签名    属性名="属性值">内容....</标签名>

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

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

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

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

               data-*：自定义属性，组件触发事件时，会发送事件处理函数

二：容器视图组件（主要包括view，scroll-view，swiper组件）

       1.view:块级组件，无特殊功能，用于布局展示

       示例代码

  1. <view style="text-align: center;">默认flex布局</view>
  2. <view style="display: flex;">
  3. <view style="border:1px solid #f00;flex-grow: 1;">1</view>
  4. <view style="border:1px solid #f00;flex-grow: 1;">2</view>
  5. <view style="border:1px solid #f00;flex-grow: 1;">3</view>
  6. </view>
  7. <view style="text-align: center;">上下混合布局</view>
  8. <view style="display: flex;flex-direction: column;">
  9. <view style="border: 1px solid #f00;">1</view>
  10. <view style="display: flex;">
  11. <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
  12. <view style="border: 1px solid #f00;flex-grow: 2;">3</view>
  13. </view>
  14. </view>
  15. <view style="text-align: center;">左右混合布局</view>
  16. <view style="display: flex;">
  17. <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
  18. <view style="display: flex;flex-direction: column;flex-grow: 1;">
  19. <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
  20. <view style="border: 1px solid #f00;flex-grow: 2;">3</view>
  21. </view>
  22. </view>

运行结果

三：基础内容组件

1.icon：即图标组件，通常用于表示一种状态

示例代码

.wxml

  1. <view>icon类型:
  2. <block wx:for="{{iconType}}">
  3. <icon type="{{item}}"/>{{item}}
  4. </block>
  5. </view>
  6. <view>icon大小:
  7. <block wx:for="{{iconSize}}">
  8. <icon type="success" size="{{item}}"/>{{item}}
  9. </block>
  10. </view>
  11. <view>icon颜色:
  12. <block wx:for="{{iconColor}}">
  13. <icon type="success" size="30" color="{{item}}"/>{{item}}
  14. </block>
  15. </view>

.js

  1. Page({
  2.   data:{
  3.     iconType:["success","success_no_circle","info","warn","wait-ing","cancel","download","search","clear"],
  4.     iconSize:[10,20,30,40],
  5.     iconColor:['#f00','#0f0','#00f']
  6.   }
  7. })

运行结果

2.text：这个组件用于展示内容

     

示例代码

  1.  
  2. <block wx:for="{{x}}" wx:for-item="x">
  3. <view class="aa">
  4. <block wx:for="{{19-x}}" wx:for-item="y">
  5. <text decode="{{true}}" space="true">&nbsp;&nbsp;</text>
  6. </block>
  7. <block wx:for="{{y}}" wx:for-item="y">
  8. <block wx:if="{{y<=2*x-1}}">
  9. <text>*</text>
  10. </block>
  11. </block>
  12. </view>
  13. </block>
  14.  
  15. <block wx:for="{{x}}" wx:for-item="x">
  16. <view class="aa">
  17. <block wx:for="{{27+x}}" wx:for-item="x">
  18. <text decode="{{true}}" space="{{true}}">&nbsp;</text>
  19. </block>
  20. <block wx:for="{{y}}" wx:for-item="y">
  21. <block wx:if="{{y<=11-2*x}}">
  22. <text>*</text>
  23. </block>
  24. </block>
  25. </view>
  26. </block>
  1. page({
  2.   data:{
  3.     x:[1,2,3,4,5],
  4.     y:[1,2,3,4,5,6,7,8,9]
  5.   }
  6. })

 

运行结果

3.progress：用于显示进度状态 

示例代码

  1. <view>显示百分比</view>
  2. <progress percent='80' show-info='80'></progress>
  3. <view>显示宽度</view>
  4. <progress percent='50' stroke-width='2'></progress>
  5. <view>自动显示进度条</view>
  6. <progress percent='80' active></progress>

运行结果

四：表单组件

1.button

           用来实现用户和应用之间的交互，同时按钮的颜色起引导作用

示例代码

  1. <button type="default">type:default</button>
  2. <button type="primary">type:primary</button>
  3. <button type="warn">type:warn</button>
  4. <button type="default" bindtap='buttononSize' size="{{size}}">改变size</button>
  5. <button type="default" bindtap='buttonPlain' plain="{{plain}}">改变plain</button>
  6. <button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading显示</button>
  7.  
  1. Page({
  2.   data: {
  3.     size:'default',
  4.     plain:'false',
  5.     loading:'false',
  6.     
  7.   },
  8.   buttonSize:function(){
  9.     if(this.data.size =="default")
  10.       this.setData({size:'mini'})
  11.     else
  12.       this.setData({size:'default'})
  13.   },
  14.   buttonPlain:function(){
  15.       this.setData({plain:! this.data.plain})
  16.   },
  17.   buttonLoading:function(){
  18.     this.setData({loading:!this.data.loading})
  19.   }
  20.  
  21.   }
  22. )

运行结果

2.radio

               单选框用来从一组选项中选取一个选项

示例代码

  1. Page({  
  2.   data: {  
  3.     radios: [  
  4.       { name: 'java', value: 'JAVA' },  
  5.       { name: 'python', value: 'python', checked: 'true' },  
  6.       { name: 'php', value: 'PHP' },  
  7.       { name: 'swift', value: 'Swift' } // 注意这里应该是 'swift' 而不是 'swif'  
  8.     ],  
  9.     city: '', // 去掉多余的逗号  
  10.     lang: ''  // 去掉多余的逗号  
  11.   },  
  12.   citychange: function(e) {  
  13.     this.setData({ city: e.detail.value }); // 修正拼写错误  
  14.   },  
  15.   radiochange: function(event) {  
  16.     this.setData({ lang: event.detail.value }); // 修正拼写错误  
  17.     console.log(event.detail.value);  
  18.   }  
  19. });
  1. <view>选择你喜欢的城市：</view>
  2. <radio-group  bindchange="citychange">
  3. <radio value="西安">西安</radio>
  4. <radio value="北京">北京</radio>
  5. <radio value="上海">上海</radio>
  6. <radio value="广州">广州</radio>
  7. <radio value="深圳">深圳</radio>
  8. </radio-group>
  9. <view>你的选择：{{city}}</view>
  10.  
  11. <view>选择你喜欢的计算机语言：</view>
  12. <radio-group class="radio-group" bindchange="radiochange">
  13.     <label class="radio" wx:for="{{radios}}">
  14.         <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
  15.     </label>
  16. </radio-group>
  17. <view>你的选择：{{lang}}</view>

运行结果

3.checkbox

                          复选框用于从一组选项中选取多个选项，小程序复选框由<checkbox-group>和<checkbox/>两个组件组合而成

示例代码

  1. <view>选择您想去的城市:</view>  
  2. <radio-group bindchange="radioChange">  
  3.   <label wx:for="{{citys}}" wx:key="*this">  
  4.     <radio value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</radio>  
  5.   </label>  
  6. </radio-group>  
  7. <view>您的选择是: {{city}}</view>

  1. Page({
  2.   city:"",
  3.   data:{
  4.     citys:[
  5.       { name:'km',value:'昆明'},
  6.       { name:'sy',value:'三亚'},
  7.       { name:'zh',value:'珠海',checked:'true'},
  8.       { name:'dl',value:'大连'},
  9.     ]
  10.   },
  11.   cityChange:function(e){
  12.     console.log(e.detail.value);
  13.     var city = e.detail.value;
  14.     this.setData({ city:city })
  15.   }
  16. })

运行结果

4.switch

                   作用类似开关选择器，其属性如下表

示例代码

  1. //wxml
  2. <view>
  3. <switch bindchange="sw1">{{var1}}</switch>
  4. </view>
  5. <view>
  6. <switch checked bindchange="sw2">{{var2}}</switch>
  7. </view>
  8. <view>
  9. <switch type="checkbox" bindchange="sw3">{{var3}}</switch>
  10. </view>
  11.  
  1. //js
  2. Page({
  3.   data:{
  4.     var1:'关',
  5.     var1:'开',
  6.     var1:'未选'
  7.   },
  8.   sw1:function(e){
  9.     this.setData({ var1: e.detail.value?'开':'关'})
  10.   },
  11.   sw2:function(e){
  12.     this.setData({ var2: e.detail.value?'开':'关'})
  13.   },
  14.   sw3:function(e){
  15.     this.setData({ var3: e.detail.value?'已选':'未选'})
  16.   }
  17. })

运行结果

5.slider

                为滑动选择器，可以通过滑动了设置相应的值

 示例代码

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

运行结果

6.picker 

                    为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择

①.普通选择器

      普通选择器（mode=selector）的属性如表所示。

                            示例代码

  1. //wxml
  2.  
  3. <view>----range为数组---</view>
  4. <picker range="{{array}}" value="{{index}}" bindchange='arrayChange'>
  5. 当前选择:{{array[index1]}}
  6. </picker>
  7.  
  8. <view>---range为数组对象--</view>
  9. <picker
  10. bindchange="objArrayChange" value="{{index2}}" range-key="name" range="{{objArray}}">
  11. 当前选择:{{objArray[index2].name}}
  12. </picker>
  13.  
  14. //js
  15.  
  16. Page({
  17.   data:{
  18.     array:['Java','Python','C','C#'],
  19.     objArray:[
  20.       { id:0,name:'Java'},
  21.       { id:1,name:'Python'},
  22.       { id:2,name:'C'},
  23.       { id:3,name:'C#'}
  24.     ],
  25.     index1:0,
  26.     index2:0
  27.   },
  28.   arrayChange:function(e){
  29.     console.log('picker值变为',e.detail.value)
  30.     var index = 0;
  31.     this.setData({
  32.       index1:e.detail.value
  33.     })
  34.   },
  35.   objArrayChange:function(e){
  36.     console.log('picker值变为',e.datail.value)
  37.     this.setData({
  38.       index2:e.detail.value
  39.     })
  40.   }
  41. })

运行结果

②多列选择器

     多列选择器（mode = multiSelector）允许用户从同列中选择不同的选择项，其选择是二维数组或数组对象。多列选择器的属性如表所示。

示例代码

  1.  
  2. <view>多列选择器</view>
  3. <picker mode="multiSelector" bindchange="bindMultiPickerChang" blindcolumnchange="bindMultiPickerColumnChang" value="{{multiIndex}}"
  4. range="{{multiArray}}">
  5. <view>
  6. 当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
  7. </view>
  8. </picker>
  9.  
  10.  
  11.  
  12.  
  13. //.js
  14. Page({
  15.   data:{
  16.     multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
  17.     multiIndex:[0,0,0]
  18.   },
  19.   bindMultiPickerChang:function(e){
  20.     console.log('picker发送选择改变，携带值为',e.detail.value)
  21.     this.setData({
  22.       multiIndex:e.detail.value
  23.     })
  24.   },
  25.   bindMultiPickerColumnChang:function(e){
  26.     console.log('修改的列为',e.detail.column,',值为',e.detail.value);
  27.     var data={
  28.       multiArray:this.data.multiArray,
  29.       multiIndex:this.data.multiIndex
  30.     };
  31.     data.multiIndex[e.detail.column]=e.detail.value;
  32.     switch(e.detail.column){
  33.       case 0:
  34.       switch(data.multiIndex[0]){
  35.        case 0:
  36.       data.multiArray[1]=['西安市','汉中市','延安市'];
  37.       data.multiArray[2]=['雁塔区','长安区'];
  38.       break;
  39.       case 1:
  40.       data.multiArray[1]=['深圳市','珠海市'];
  41.       data.multiArray[2]=['南山区','罗湖区'];
  42.       break;
  43.     }
  44.     data.multiIndex[1]=0;
  45.     data.multiIndex[2]=0;
  46.     break;
  47.     case 1:
  48.     switch(data.multiIndex[0]){
  49.       case 0:
  50.       switch(data.multiIndex[1]){
  51.         case 0:
  52.         data.multiArray[2]=['雁塔区','长安区'];
  53.         break;
  54.         case 1:
  55.         data.multiArray[2]=['汉台区','南郑区'];
  56.         break;
  57.         case 2:
  58.         data.multiArray[2]=['宝塔区','子长县','延川县'];
  59.         break;
  60.       }
  61.       break;
  62.       case 1:
  63.       switch(data.multiIndex[1]){
  64.         case 0:
  65.         data.multiArray[2]=['南山区','罗湖区'];
  66.         break;
  67.         case 1:
  68.         data.multiArray[2]=['香洲区','斗门区'];
  69.         break;
  70.       }
  71.       break;
  72.     }
  73.     data.multiIndex[2]=0;
  74.     console.log(data.multiIndex);
  75.     break;
  76.   }
  77.   this.setData(data);
  78.   }
  79.   })

运行结果

③时间选择器、日期选择器

                时间选择器(mode＝ time) 可以用于从提供的时间选项中选择相应的时间，其属性如表所示

                 日期选择器(mode＝ date) 可以用于从提供的日期选项中选择相应的日期，其属性如表所示。

 示例代码

.wxml

  1. //wxml
  2.  
  3. <view>
  4. <picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
  5.   选择的日期：{{date}}
  6. </picker>
  7. </view>
  8. <view>
  9. <picker mode="time" start="{{starttime}}" end="{{endtime}}" bindchange="changetime">
  10.   选择的时间：{{time}}
  11. </picker>
  12. </view>
  13.

.js

  1.  
  2. Page({
  3.   data:{
  4.     startdate:2000,
  5.     enddate:2050,
  6.     date:'2024',
  7.     starttime:'00:00',
  8.     endtime:'12:59',
  9.     time:'8:00'
  10.   },
  11.   changedate:function(e){
  12.     this.setData({date:e.detail.value});
  13.     console.log(e.detail.value)
  14.   },
  15.   changetime:function(e){
  16.     this.setData({time:e.detail.value});
  17.     console.log(e.detail.value)
  18.   }
  19. })

运行结果

④省市选择器

            省市选择器(mode＝ region) 是小程序的新版本提供的选择快速地区的组件，其属性如表所示

示例代码

.wxml

  2.  
  3. <picker mode="region" value="{{region}}" custom-item="{{customitem}}" bindchange="changeeregion">
  4.   选择省市区：{{region[0]}},{{region[1]}},{{region[2]}}
  5. </picker>
  6.

.js

  1. Page({
  2.   data:{
  3.     region:['陕西省','西安市','长安区'],
  4.     customitem:'全部'
  5.   },
  6.   changeeregion:function(e){
  7.     console.log(e.detail.value)
  8.     this.setData({
  9.       region:e.detail.value
  10.     })
  11.   }
  12. })

运行结果

7.picker-view

           picker-view 组件为嵌入页面的滚动选择器。 相对于picker 组件, picker-view 组件的列的个数和列的内容由用户通过< picker-view－column/ > 自定义设置

 示例代码

.wxml

  1.  
  2. <view>当前日期：{{year}}年{{month}}月{{day}}日</view>
  3. <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
  4.   <picker-view-column>
  5.     <view wx:for="{{years}}" style="line-height: 50px;">{{item}}年</view>
  6.   </picker-view-column>
  7.   <picker-view-column>
  8.     <view wx:for="{{months}}" style="line-height: 50px;">{{item}}月</view>
  9.   </picker-view-column>
  10.   <picker-view-column>
  11.     <view wx:for="{{days}}" style="line-height: 50px;">{{item}}日</view>
  12.   </picker-view-column>
  13. </picker-view>
  14.

.js

  1.  
  2. const date = new Date();
  3. const years = [];
  4. const months = [];
  5. const days = [];
  6. for (let i = 1900; i <= 2050; i++) {
  7.   years.push(i);
  8. }
  9. for (let i = 1; i <= 12; i++) {
  10.   months.push(i);
  11. }
  12. for (let i = 1; i <= 31; i++) {
  13.   days.push(i);
  14. }
  15. Page({
  16.   data: {
  17.     years: years,
  18.     months: months,
  19.     days: days,
  20.     year: date.getFullYear(),
  21.     month: date.getMonth() + 1,
  22.     day: date.getDate(),
  23.     value: [date.getFullYear() - 1900, date.getMonth(), date.getDate() - 1]
  24.   },
  25.   bindChange: function (e) {
  26.     const val = e.detail.value;
  27.     this.setData({
  28.       year: this.data.years[val[0]],
  29.       month: this.data.months[val[1]],
  30.       day: this.data.days[val[2]]
  31.     });
  32.   }
  33. })

运行结果

8.input 

          input组件为输入框，用户可以输入相应的信息,其属性如下表

示例代码

.wxml

  1.  
  2.  
  3. <input placeholder="这是一个可以自动聚焦的 input" auto-focus/>
  4. <input placeholder="这是一个只有在按钮带点击的时候才聚焦的 input" focus="{{focus}}"/>
  5. <button bind:tap="bindButtonTop">使得输入框获得焦点</button>
  6. <input maxlength="10" placeholder="最大输入长度为10"/>
  7. <view class="section_title">你输入的是：{{inputValue}}</view>
  8. <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
  9. <input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2"/>
  10. <input password type="number" placeholder="输入数字密码"/>
  11. <input password type="text" placeholder="输入字符密码"/>
  12. <input type="digit" placeholder="带小数点的数字键盘"/>
  13. <input type="idcard" placeholder="身份证输入键盘"/>
  14. <input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

.js

  1.  
  2. Page({
  3.   data:{
  4.     focus:false,
  5.     inputValue:''
  6.   },
  7.   bindButtonTop:function(){
  8.     this.setData({
  9.       focus:true
  10.     })
  11.   },
  12.   bindKeyInput:function(e){
  13.     this.setData({
  14.       inputValue:e.detail.value
  15.     })
  16.   },
  17.   bindReplaceInput:function(e){
  18.     var value=e.detail.value
  19.     var pos=e.detail.value
  20.     if(pos!=-1){
  21.       var left=e.detail.value.slice(0,pos)
  22.       pos=left.replace(/11/g,'2').length
  23.     }
  24.     return{
  25.       value:value.replace(/11/g,'2'),
  26.       cursor:pos
  27.     } 
  28.   }
  29. })

运行结果

9.textarea

                     textarea组件为多行输入框组件，可以实现多行内容输入，其属性如下表

 

示例代码

运行结果

10.label

                  label组件为标签组件，用于提升表单组件的可用性。

示例代码

运行结果

11.from

                 from组件为表单组件，用来实现将组件内的用户信息进行提交。其属性如下表

 示例代码

运行结果

五.多媒体组件

                               多媒体组件包括：image(图像)，audio（音频），video（视频），camera（相机）组件，使用这些组件可以使页面更具有吸引力。

1.image

                  image组件为图像组件，与HTML中的<img/>类似，系统默认image组件的宽度为300px,高度250px，image属性如下表

     image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。

 ①缩放模式

                   第一种：scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

                   第二种：aspectFit  保持纵横比缩放图片，使图片的长边能完全显示出来。

                   第三种：aspectFill  保持纵横比缩放图片，只保证图片的短边能哇去显示出来。

                   第四种：widthFix  宽度不变，高度自行变化，保持原图宽高比不变。

示例代码

.wxml

  1. <block wx:for="{{modes}}">
  2. <view>当前图片的模式是:{{item}}</view>
  3. <image mode="{{item}}" src="/image/t1.jpg" style="width: 100%,height:100%"/>
  4. </block>

.js

  1. Page({
  2.   data:{
  3.     modes:['scaleToFill','aspectFit','aspectFill','widthFix']
  4.   }
  5. })

运行结果

②.裁剪模式 

                    top:不缩放图片，只显示图片的顶部区域

                   bottom:不缩放图片，只显示图片的底部区域

                   center:不缩放图片，只显示图片的中间区域

                    left:不缩放图片，只显示图片的左边区域

                   right：不缩放图片，只显示图片的右边区域

                   top_left：不缩放图片，只显示同左上边区域

                   top_right：不缩放图片，只显示图片的右上边区域

                   top_left：不缩放图片，只显示图片的左下边区域

                   top_right：不缩放图片，只显示图片的右下边区域

示例代码

.wxml

  1. <block wx:for="{{modes}}">
  2.      <view>当前图片的模式是:{{item}}</view>
  3.      <image mode="{{item}}"src="../image/t1.jpg" style="width: 100%,heigth:100%"/>
  4. </block>

.js

  1. Page({
  2.   data:{
  3.     modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
  4.   }
  5. })

运行结果

                    2.audio

                  audio用来实现音乐播放，暂停等，其属性如下表

示例代码

.wxml

  1.  
  2. <audio src="{{src}}" poster="{{poster}}" name="{{name}}" author="{{author}}" loop controls ></audio>
  3. <button type="primary" bindtap="play">播放</button>
  4. <button type="primary" bindtap="pause">暂停</button>
  5. <button type="primary" bindtap="setPlayRate">设置速率</button>
  6. <button type="primary" bindtap="setCurrentTime">设置当前时间（秒）</button>
  7.  
  8.  
  9.

.js

  1. Page({
  2.   data:{
  3.     poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg ? max_age=2592000',
  4.     name:'此时此刻',
  5.     author:'许巍',
  6.     src:'https://ws6.stream.qqmusic.qq.com/RS02060Uf6fc0fILAt.mp3?guid=6031362059&vkey=8AF94726EA2E3AB6365F98368EE4B0838B8EEB168A5DBC14A582392D53095D6FE30ACF0EBA1BEB16BF3ACAB8D637EBB3B99ABE510A0D131E&uin=&fromtag=120052'
  7.   },
  8.   play:function(){
  9.     this.setData({
  10.       action:{
  11.         method:'pause'
  12.       }
  13.     })
  14.   },
  15.   playRate:function(){
  16.     this.setData({
  17.       action:{
  18.         method:'setPlaybackRate',
  19.         data:10
  20.       }
  21.     })
  22.     console.log('当前速率:' +this.data.action.data)
  23.   },
  24.   currentTime:function(e){
  25.     this.setData({
  26.       action:{
  27.         method:'setCurrentTime',
  28.         data:120
  29.       }
  30.     })
  31.   }
  32. })

运行结果

 3.video

                video用来实现视频的播放，暂停等，视频的默认宽度为300px,高度为225px,video属性如下表

 示例代码

.wxml

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

.js

  1. Page({
  2.   data:{
  3.     src:"",
  4.   },
  5.   bindButtonTap:function(){
  6.     var that = this
  7.     wx.chooseVideo({
  8.       sourceType:['album','camera'],
  9.       maxDuration:60,
  10.       camera:['front','back'],
  11.       success:function(res){
  12.         that.setData({
  13.           src:res.tempFilePath
  14.         })
  15.       }
  16.     })
  17.   }
  18. })

 运行结果

4.camere

                        camere组件为系统相机组件，可以实现拍照或录像的功能

示例代码

.wxml

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

.js

  1. Page({
  2.   takePhoto(){
  3.     const ctx = wx.createCameraContext()
  4.     ctx.takePhoto({
  5.       quality:'high',
  6.       success:(res)=>{
  7.         this.setData({
  8.           src:res.tempImagePath
  9.         })
  10.       }
  11.     })
  12.   },
  13.   error(e){
  14.     console.log(e.datail)
  15.   }
  16. })

运行结果

六：其他组件

1.map

               map组件用于在页面显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图，高德地图比较简单，目前有绘制图标，路线，半径等能力。

                                                        map组件的属性

                                                        map组件markers属性的相关属性

              map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，可以指定线的颜色，宽度，线型等，属性如下表

示例代码

.js

  1. Page({
  2.   data:{
  3.     markers:[{
  4.       iconPath:"/pages/image/z1.jpg",
  5.       id:0,
  6.       longitude:"108.9290",
  7.       latitude:"34.1480",
  8.       width:50,
  9.       height:50
  10.     }],
  11.     polyline:[{
  12.       points:[
  13.         {
  14.           longitude:"108.9200",
  15.           latitude:"34.1400"
  16.         },
  17.         {
  18.           longitude:"108.9200",
  19.           latitude:"34.1500"
  20.         },
  21.         {
  22.           longitude:"108.9200",
  23.           latitude:"34.1700"
  24.         }
  25.       ],
  26.       color:"#00ff00",
  27.       width:2,
  28.       dottedLine:true
  29.     }],
  30.     controls:[{
  31.       id:1,
  32.       iconPath:'/pages/image/z1.jpg',
  33.       position:{
  34.         left:0,
  35.         top:300,
  36.         width:30,
  37.         height:30
  38.       },
  39.       clickable:true
  40.     }]
  41.   },
  42.   regionchange(e){
  43.     console.log(e.type)
  44.   },
  45.   markertap(e){
  46.     console.log(e.markertap)
  47.   },
  48.   controltap(e){
  49.     console.log(e.controlId)
  50.   }
  51. })

.wxml

  1. <map id="map"
  2. longitude="108.9200"
  3. latitude="34.1550"
  4. scale="14"
  5. controls="{{controls}}"
  6. bindcontroltap="controltap"
  7. markers="{{markers}}"
  8. bindcontroltap="markertap"
  9. polyline="{{polyline}}"
  10. bindregionchange="regionchange"
  11. show-location
  12. style="width: 100%;height: 300px;">
  13. </map>
  14.

运行结果

2.canvas

                     canvas组件用来绘制图形，相当于一块无色透明的普通画布。

                                                     canvas属性

    实现绘图3个步骤

①创建一个canvas绘图上下文

var context = wx.createCanvasContext('myCanvas')

 ②使用canvas绘图上下文进行绘图描述

  1. context.setFillStyle('green')//设置绘图上下文的填充色为绿色
  2. context.fillRect(10,10,200,100)//方法画一个矩形，填充为设置的绿色

③画图

context.draw()

示例代码

.wxml

  1. Page({
  2.   onLoad:function(options){
  3.     var ctx =wx.createCanvasContext('myCanvas')
  4.     ctx.setFillStyle('green')
  5.     ctx.fillRect(10,10,200,100)
  6.     ctx.draw()
  7.   }
  8. })

.js

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

运行结果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/682679
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号