关于微信小程序组件的使用

[1598155]

first

view组件

<view class="container">
  <text>{{motto}}</text>
  <view bindtap='bindViewTab'>
    <image src='b64543a98226cffce0028a20bb014a90f603ea7c.jpg'></image>
  </view>
</view>

[1598155]

轮播组件

<swiper indicator-dots='{{indicatorDots}}' duration='1000'
autoplay='true'>
  <block wx:for='{{imgUrls}}'>
    <swiper-item>
      <image src='{{item}}' class='slide-image' width='355' height='150'></image>
    </swiper-item>
  </block>
</swiper>
<button bindtap='changeIndicatorDots'> indicator-dots </button>
<slider bindchange='intervalChange'></slider>

[1598155]

icon图标组件

<view class='group'>
  <block wx:for='{{iconSize}}'>
  <icon type='success' size='{{item}}'></icon>
  </block>
</view>

[1598155]

进度条组件

<text>进度条组件</text>
<progress percent='100' show-info='true' color='blue' active='true'></progress>

[1598155]

button组件

<button type='warn' size='default' loading='false' plain='false' disabled='false' bindtap='warn' hover-class='other-button-hover'>default</button>

[1598155]

单选框

<checkbox-group bindchange="checkChange">
  <label class='checkbox' wx:for='{{items}}' wx:key='name'>
  <checkbox value='{{item.name}}'>{{item.value}}</checkbox>
  </label>
</checkbox-group>
<checkbox disabled='cansee'></checkbox>
<checkbox checked='true'></checkbox>

[1598155]

表单组件应用

<form bindreset='formSubmit' bindreset='formResst'>
    <input name='input' placeholder='在此输入'></input>
    <button type='warn' form-type='submit'>提交</button>
    <button form-type='reset'>重置</button>
  </form>

[1598155]

输入框使用

<view class='myBackGround'>
<view class='section_title'>输入是:{{inputValue}}</view>
<input bindinput='bindKeyInput' placeholder='输入同步到view中'></input>
</view>

[1598155]

选择器使用

<view>普通选择器</view>
<!--mode默认selector range数据源value选择的index bindchange事件监听-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
    <text>{{array[index]}}</text>
</picker>

<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
    <text>{{time}}</text>
</picker>

<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
    <text>{{date}}</text>
</picker>

[1598155]

单选控制器

<radio-group class='radio-group' bindchange='radioChange'>
  <label class='radio' wx:for='{{items}}'>
  <radio value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</radio>
  </label>
</radio-group>

[1598155]

滑动条

<view class='myView'>
<text>禁用</text>
<slider disabled='{{true}}'></slider>
</view>

<view class='myView'>
<text>可用</text>
<slider step='5' show-value></slider>
</view>

<view class='myView'>
<text>初始值</text>
<slider step='5' value='80' show-value></slider>
</view>

<view class='myView'>
<text>最小值最大值</text>
<slider step='5' value='80' show-value min='50' max='200'></slider>
</view>

[1598155]

开关选择器

<view class='myView'>
<switch checked bindchange='switchChange'></switch>
<switch></switch>
</view>

[1598155]

文本框

<view class='myView'>
<textarea bindfocus='bindGetFocus' bindblur='bindLostFocus' bindlinechange='bindLineChange' auto-height placeholder='文本框'></textarea>
</view>

[1598155]

导航栏

wxxml文件配置

<view class='btn-area'>
  <navigator url='test' hover-class='navigator-hover'>跳转到新页面</navigator>
  <navigator url='test' hover-class='other-navigator-hover' redirect>在当前页面打开</navigator>
</view>

app.json添加页面

  "pages": [
    "pages/index/index",
    "pages/index/test",
    "pages/logs/logs"
  ],

[1598155]

音乐组件

wxxml文件

<view class='myView'>
<audio poster='https://static.tuchong.net/images/site-bg-2.jpg' name='雨神' author='xk' src='http://fs.w.kugou.com/201810052312/fac9ca7dd6433a5ce691b4f898ec283a/G125/M06/1B/13/HYcBAFp5W_eAUxXtAEd8lM9hkg8413.mp3' id='myAudio' controls loop></audio>
<button class='btn' type='primary' bindtap='audioPlay'>播放</button>
<button class='btn' type='warn' bindtap='audioPausea'>暂停</button>
<button class='btn' type='default' bindtap='audioseek30'>暂停30s</button>
</view>

js文件主要需要用到

//播放暂停实现方法
  audioPlay:function(e){
    this.audioUsr.play();
  },
  audioPausea:function(e){
    this.audioUsr.pause();
  },
  audioseek30:function(e){
    this.audioUsr.seek(30)
  },
//初始化创建
  onReady: function() {
    this.audioUsr = wx.createAudioContext('myAudio');
    // 页面渲染完成
  },

[1598155]

图片显示组件

<view class='myView'>

  <view wx:for="{{array}}" wx:for-item="item">
    <view>{{item.text}}</view>
    <view>
    <image src='{{src}}' mode='{{item.mode}}'>
    </image>
    </view>

  </view>

</view>

[1598155]

微信小程序地图组件

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

个人还不是很熟悉，等以后开发再研究