微信小程序学习（6）

5. 导航组件

5.1. navigator 导航 相当 a 标签

• open-type: 属性值navigate 跳转(默认值)、redirect 重定项、navigateBack 后退
• delta: open-type 为 navigateBack 起效，后退几个页面
• target：跳转类别，属性值：self 当前小程序内，miniProgram 小程序外
• app-id: 当target="miniProgram"时有效，要打开的小程序 appId
• path: 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
• extra-data: 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据
• version: 当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

<!-- url 相对路劲 -->
<navigator url="../../page?id=100">
<!-- 其他页面可以接受 id=100 在onLoad函数中取 -->
</navigator>

6. 媒体组件

• audio: 音频标签
• image: 图片标签
• video: 视频标签
• camera: 摄像头
• live-player: 实时音视频播放
• live-pusher: 实时音视频录制

6.1 image 图片

• 默认宽度 300px, 高度 225px
• src： 图片资源地址
• mode: 图片裁剪、缩放的模式,有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
  • 缩放模式：
    • 纵横比例变：scaleToFill（宽高自适应）、widthFix（宽度不变，高度自适应）
    • 纵横比例不变：aspectFit（保留长边完全展示）、aspectFill（保留短边全部展示）
  • 裁剪模式（保留区域）：top、bottom、center、left、right、top left、top right、bottom left、bottom right
• lazy-load: 懒加载，默认true
• bindload: 图片加载成功后执行。

  <block wx:for="{{array}}" wx:for-item="item">
    <view>{{item.text}}</view>
    <view class="section__ctn">
      <image style="width: 200px; height: 200px; background-color: #eeeeee;" 
        mode="{{item.mode}}"
        src="{{src}}"></image>
    </view>
  </block>

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=19031520'
  }
})