微信小程序之组件

什么是组件？

组件时视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<tagname property="value">
  Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

组件案例：
视图容器：
view组件

view这个组件就是一个视图组件使用起来非常简单。

主要属性：
flex-direction： 主要两个特性”row”横向排列”column”纵向排列

justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）

可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）

可选属性 (‘flex-start’, ‘flex-end’, ‘center’）

wxml：

<view class='page'>
  <view class='page_hd'>
    <text class="page_title">view</text>
    <text calss="page_desc">弹性框模型分为弹容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
    </view>
    <view class='page_bd'>
      <view class='section'>
        <view class='section_title'>flex-direction:row</view>
        <view class="flex-wrp" style="flex-direction:row;">
            <view class='flex-item' style="background:red;"></view>
            <view class='flex-item' style="background:green;"></view>
            <view class='flex-item' style="background:blue;"></view>
          </view>
        </view>
      </view>

      <view class="section">
            <view class='section_title'>flex-direction:column</view>
            <view class='flex-wrp' style="height:300px;flex-direction:column">
              <view class='flex-item' style="background:red;"></view>
              <view class='flex-item' style="background:green;"></view>
              <view class='flex-item' style="background:blue;"></view>
            </view>

      </view>

      <view class='section'>
        <view class='section_title'>justify-content:flex-start</view>
        <view class='flex-wrp' style="flex-direction:row;justify-content:flex-start;">
          <view class='flex-item' style="background:red;"></view>
          <view class='flex-item' style="background:green;"></view>
          <view class='flex-item' style="background:blue;"></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>justify-content:flex-end</view>
        <view class='flex-wrp' style="flex-direction:row;justify-content:flex-end;">
          <view class='flex-item' style="background:red;"></view>
          <view class='flex-item' style='background:green;'></view>
          <view class='flex-item' style="background:blue;"></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>justify-content:center</view>
        <view class='flex-wrp' style='flex-direction:row;justify-content:center;'>
          <view class='flex-item' style="background:red;"></view>
          <view class='flex-item' style="background:green;"></view>
          <view class='flex-item' style="background:blue;"></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>justify-content:space-between</view>
        <view class='flex-wrp' style="flex-direction:row;justify-content:space-between;">
          <view class='flex-item' style="background:red;"></view>
          <view class='flex-item' style='background:green;'></view>
          <view class='flex-item' style='background:blue;'></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>justify-content:space-around</view>
        <view class='flex-wrp' style='flex-direction:row;justify-content:space-around;'>
          <view class='flex-item' style='background:red;'></view>
          <view class='flex-item' style='background:green;'></view>
          <view class='flex-item' style='background:blue;'></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>align-items:flex-end</view>
        <view class='flex-wrp' style='height:200px;flex-direction:row;justify-content:center;align-items:flex-end;'>
          <view class='flex-item' style='background:red;'></view>
          <view class='flex-item' style='background:green;'></view>
          <view class='flex-item' style='background:blue;'></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>align-items:center;</view>
        <view class='flex-wrp' style="height:200px;flex-direction:row;justify-content:center;align-items:center;">
          <view class='flex-item' style='background:red;'></view>
          <view class='flex-item' style="background:green;"></view>
          <view class='flex-item' style="background:blue;"></view>
        </view>
      </view>

      <view class='section'>
        <view class='section_title'>align-items:flex-start</view>
        <view class='flex-wrp' style="height:200px;flex-direction:row;justify-content:center;align-items:flex-start;">
          <view class='flex-item' style="background:red;"></view>
          <view class='flex-item' style="background:green;"></view>
          <view class='flex-item' style="background:blue;"></view>
        </view>
      </view>

</view>

wxss：

.flex-wrp{
  height: 100px;
  display: flex;
  background-color: #FFF;
}
.flex-item{
  width: 100px;
  height: 100px;
}

scroll-view组件：
scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面，比如我的模块

wxml

<!-- 垂直滚动，这里必须设置高度  -->
<scroll-view style="height:200px;" scroll-y="true">
  <view style="background:red;width:100px;height:100px;"></view>
  <view style="background:green;width:100px;height:100px;"></view>
  <view style="background:blue;width:100px;height:100px;"></view>
  <view style="background:yellow;width:100px;height:100px;"></view>
</scroll-view>
<!--  white-space
  normal:正常无变化(默认处理方式，文本自动处理换行。假如抵达容器边界内容会转到下一行)
  pre:保持HTML源代码的空格与换行，等同于pre标签
  nowrap:强制文本在一行，除非遇到br换行标签
  pre-wrap:同pre属性，但是遇到超出容器范围的时候会自动换行
  pre-line:同pre属性，但是遇到连续空格会被看做一个空格
  inherit:继承
  -->
  <!-- 水平滚动  -->
  <scroll-view scroll-x="true" style="white-space:nowrap;display:flex;">
    <view style='background:red;width:200px;height:100px;display:inline-block'></view>
    <view style='background:green;width:200px;height:100px;display:inline-block'></view>
    <view style='background:blue;width:200px;height:100px;display:inline-block'></view>
    <view style='background:yellow;width:200px;height:100px;display:inline-block'></view>
  </scroll-view>

swiper组件：
Android写过轮播图的痛楚只有写过的知道，相对还是比较麻烦的，并没有一个轮播图组件，有个ViewPage也需要自己定制，IOS则多用UIScrollerView去实现，这个swiper封装的相对还是方便的，使用方式也相对那俩容易些。
wxml

<!-- 是否显示圆点，自动播放，间隔时间，监听滚动和点击事件  -->
<swiper indicator-dots='true' autoplay='true' duration='1000' bindchange='listenSwiper'>
  <!-- swiper-item 只能包含一个节点再多会自动删除  -->
  <swiper-item>
    <view style='background:red;height:150px;'></view>
  </swiper-item>
  <swiper-item>
    <view style='background:green;height:150px;'></view>
  </swiper-item>
  <swiper-item>
    <view style='background:blue;height:150px;'></view>
  </swiper-item>
</swiper>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  // 这里处理滚动事件信息
  listenSwiper:function(e){
    // 打印信息
    console.log(e);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果图如下：


基础内容：
icon组件

这些是提供的所支持的图标样式，根据需求在此基础上去修改大小和颜色。

<!--成功图标  -->
<icon type='success' size='40'></icon>

<!--安全成功标志  -->
<icon type='safe_success' size='40'></icon>

<!--提示信息标志  -->
<icon type='info' size='40'></icon>

<!--带圆的信息提示图标  -->
<icon type='info_circle' size='40'></icon>

<!--不带圆的成功图标  -->
<icon type='success_no_circle' size='40'></icon>

<!--带圆的成功图标  -->
<icon type='success_circle' size='40'></icon>

<!--警告图标  -->
<icon type='warn' size='40'></icon>

<!--带圆的等待图标  -->
<icon type='waiting_circle' size='40'></icon>

 <!--等待图标  -->
 <icon type='waiting' size='40'></icon>

 <!--下载图标  -->
 <icon type='download' size='40'></icon>

 <!--取消图标  -->
 <icon type='cancel' size='40'></icon>

 <!--清除图标  -->
 <icon type='clear' size='40'></icon>

 <!--改变颜色的success  -->
 <icon type='success' size='40' color='red'></icon>

text组件
wxml代码

<view>
  <text>我是文本组件</text>
</view>
<text>{{text}}</text>

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text:"我是在js文件中绑定的文本"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果如下：

progress组件
进度条描述的是一种加载的状态，比如软件升级下载进度， 视频，图片下载进度…

<progress 
    percent="80"
    show-info="true" 
    stroke-width="5"
    color="red"
    active="true"/>

表单组件
button组件
wxml

<!--按钮默认样式，点击事件  -->
<button type='default' bindtap='clickButton'>Default</button>

<!--原始颜色，不可点击状态，正在加载状态  -->
<button type='primary' disabled='true' loading='true'>Primary</button>

<button type='warn'>warn</button>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  // button点击事件监听
  clickButton:function(e){
    // 打印所有关于点击对象的信息
    console.log(e);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

checkbox组件
不得不吐糟下checkbox默认样式真是有点略丑！！！checkbox组件为一个多选框被放到checkbox-group组中，并在checkbox-group（只能包含checkbox）中设置监听事件。
wxml

<!--checkbox-group就是一个checkbox组，有个监听事件bindchange，监听数据选中和取消  -->
<checkbox-group bindchange="listenCheckboxChange">
  <!--这里用label显示内容，for循环写法 wx:for-items默认item为每一项  -->
  <label style='display:flex;' wx:for-items="{{items}}">
    <!--value值和默认选中状态都是通过数据绑定在js中  -->
    <checkbox value="{{item.name}}" checked='{{item.checked}}'>{{item.value}}</checkbox>
  </label>
</checkbox-group>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    items:[
      {name:'JAVA',value:'Android',checked:'true'},
      {name: 'Object-C',value:'IOS'},
      {name:'JSX',value:'ReactNative'},
      {name:'JS',value:'wechat'},
      {name:'Python',value:'Web'},
    ]
  },
// 监听checkbox事件
  listenCheckboxChange:function(e){
  console.log('当checkbox-group中的checkbox选中或者取消时我被调用');
  // 打印包含对象的详细信息
  console.log(e);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

form组件
是提交form内的所有选中属性的值，注意每个form表单内的组件都必须有name属性指定否则提交不上去，button中的type两个submit，reset属性分别对应form的两个事件
wxml:

<form bindsubmit='listenFormSubmit' bindreset='listenFormReset'>
  <checkbox-group name="checkbox" bindchange="listenerCheckbox">
    <label style='display:flex;' wx:for-items="{{items}}">
      <checkbox value='{{item.name}}' />{{item.value}}
    </label>
  </checkbox-group>

  <!--button formType属性两个可选值submit，reset分别会触发form的sunmit，reset事件  -->
  <button form-type='submit' type='primary'>
    提交
  </button>
  <button form-type='reset' type='warn'>
    重置
  </button>
</form>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    items:[
      {name:'JAVA',value:'Anrdoid',checked:'true'},
      {name:'Object-C',value:'IOS'},
      {name:'JSX',value:'ReactNative'},
      {name:'JS',value:'wechat'},
      {name:'Python',value:'Web'}
    ]
  },

  listenerCheckbox:function(e){
    console.log(e.detail.value);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

input组件:
input输入框使用的频率也是比较高的。
样式的话自己外面包裹个view自己定义
wxml：

<view class="inputView" style="margin-top:40%;">
  <input class='input' type='number' placeholder='请输入帐号' placeholder-style='color:red;' bindinput='listenerPhoneInput'/>
</view>

<view class='inputView'>
  <input class='input' password='true' placeholder='请输入密码' placeholder-style='color:red;' bindinput='listenerPasswordInput' />
</view>

<button style='margin-left:15rpx;margin-right:15rpx;margin-top:50rpx;border-radius:40rpx;' type="primary" bindtap='listenerLogin'>登录</button>

wxss：

.input{
  padding-left: 10px;
  height: 44px;
}

.inputView{
  border: 2px solid red;
  border-radius: 40px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
}

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone:'',
    password:'',
  },
  // 监听手机输入
  listenerPhoneInput:function(e){
    this.data.phone = e.detail.value;
  },
  // 监听密码输入
  listenerPasswordInput:function(e){
    this.data.password = e.detail.value;
  },
  //  监听登录按钮
  listenerLogin:function(){
    // 打印输入帐号和密码
    console.log('手机号为:',this.data.phone);
    console.log('密码为:',this.data.password);
  }, 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

picker组件：
picker选择器分为三种，普通选择器，时间选择器，日期选择器，用mode属性区分

wxml：

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

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array:['Android','IOS','ReactNative','WeChat','Web'],
    index:0,
    time:'08:30',
    date:'2016-09-26'
  },

  //  监听 picker选择器
  listenerPickerSelected:function(e){
    //  改变index值，通过setData()方法重绘界面
    this.setData({
      index:e.detail.value
    });
  },
  //  监听时间picker选择器
  listenerTimePickerSelected:function(e){
    //  调用setData()重新绘制
    this.setData({
      time:e.detail.value,
    });
  },  
  //  监听日期picker选择器
  listenerDatePickerSelected:function(e){
    this.setData({
      date:e.detail.value
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

radio组件：
radio组件为单选组件与radio-group组合使用，使用方式和checkbox没啥区别。

wxml:

<!--设置监听器，当点击radio时调用-->
<radio-group bindchange="listenerRadioGroup">
<!--label通常与radio和checkbox结合使用-->
    <label style="display: flex" wx:for-items="{{array}}">
        <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
</radio-group>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [
      { name: 'Jave', value: 'Android', checked: 'true' },
      { name: 'Object-C', value: 'IOS' },
      { name: 'jsx', value: 'ReactNative' },
      { name: 'js', value: 'WeChat' },
      { name: 'Python', value: 'Web' },
    ]
  },
  // radio监听事件
  listenerRadioGroup:function(e){
    console.log(e);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

slider组件：
slider滑动组件用的不太多，在其他平台反正我是用的不多

wxml:

<slider max="100" step="10" show-value="true" bindchange='listenerSlider'>
</slider>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  // 监听slider
  listenerSlider:function(e){
    // 获取滑动后的值
    console.log(e.detail.value);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

switch组件:
wxml:

<!--switch类型开关  -->
<view>switch类开关</view>
<switch type='switch' checked='true' bindchange='listenerSwitch'></switch>

<!--checkbox类型开关  -->
<view>checkbox类型开关</view>
<switch type='checkbox' bindchange='listenerCheckboxSwitch'></switch>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

// switch开关监听
  listenerSwitch:function(e){
    console.log('switch类型开关当前状态-----',e.detail.value);
  },
  // checkbox类型开关监听
  listenerCheckboxSwitch:function(e){
    console.log('checkbox类型开关当前状态-----',e.detail.value);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

导航
navigator组件
navigator跳转分为两个状态
一种是关闭当前页面
一种是不关闭当前页面
用redirect属性指定。

<navigator url="../login/login">点击跳转不关闭当前页面</navigator>
<navigator url="../demo/demo" redirect="true">点击跳转关闭当前页面</navigator>

媒体组件
audio组件：
音频播放已经封装的很好！只需配合属性设置即可！（method和data配合使用）
wxml

<audio action="{{action}}" 
src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3' 
poster='http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=77542e8bbb315c6043c063ebb881e725/d52a2834349b033bcc1f7e4412ce36d3d439bd9d.jpg'
controls='true'
name='钢琴曲'
author='不详'/>

<button type='primary' bindtap="audioPlay">播放</button>
<button type='primary' bindtap='audioPause'>暂停</button>
<!--正常速度  -->
<button type='primary' bindtap="audioPlaybackRateNormal">调为1倍速</button>
<!--慢放  -->
<button type='primary' bindtap='audioPlaybackRateSlowDown'>调为0.5倍速</button>

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    action:{
      method:''
    }
  },
  audioPlay:function(){
    this.setData({
      action:{
        method:'play'
      }
    })
  },
  audioPause:function(){
    this.setData({
      action:{
        method:'pause'
      }
    })
  },
  audioPlaybackRateNormal:function(){
    this.setData({
      action:{
        method:'setPlaybackRate',
        data:1
      }
    })
  },
  audioPlaybackRateSlowDown:function(){
    this.setData({
      action:{
        method:'setPlaybackRate',
        data:0.5
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

image组件：

<!--3种缩放模式
  scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
  aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
  aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来
  -->
  <view>aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来</view>
  <image style="width: 100%;" mode="aspectFit" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=608795195,3966139779&fm=27&gp=0.jpg" />

  <!--9种裁剪模式
      top 不缩放图片，只是显示图片的顶部区域
      bottom:同上
      left
      right
      top right
      top left
      bottom right
      bottom left
    -->
    <view>bottom不缩放图片，只是显示图片的底部区域</view>
    <image style="width:100%;" mode="bottom" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=608795195,3966139779&fm=27&gp=0.jpg" />

    <view>left不缩放图片，只显示图片的左边区域</view>
    <image style='width:100%;' mode="left" src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=608795195,3966139779&fm=27&gp=0.jpg' />

    <view>top right 不缩放图片，只显示图片的右上边区域</view>
    <image style='width:100%;' mode="top right" src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=608795195,3966139779&fm=27&gp=0.jpg' />

video组件:

wxml:

<!--监听button点击事件  -->
<button bindtap='listenerButton'>点击显示视频组件</button>

<!--视频组件src资源地址，binderror为监听错误信息  -->
<video src='http://mvvideo1.meitudata.com/575c2b652d7375255.mp4' 
style="width:100%;"
hidden="{{hiddenVideo}}"
binderror="listenerVideo"/>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hiddenVideo : true
  },
// 监听视频加载错误状态
  listenerVideo:function(e){
    console.log(e.detail.errMsg);
  },
  // 监听button点击事件
  listenerButton:function(){
    this.setData({
      hiddenVideo: !this.data.hiddenVideo
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})