小程序——组件二

组件二

• 五、导航组件
• • 5.1、navigator
  • 5.2、functional-page-navigator
• 六、媒体组件
• • 6.1、audio
  • 6.2、image
  • 6.3、video
• 七、地图组件
• • 7.1、map
• 八、画布
• • 8.1、canvas

五、导航组件

5.1、navigator

<navigator>导航组件用于页面之间的跳转，是使用频繁的组件之一。

属性名	类型	默认值	说明
target	string	self	是在哪个目标上发生跳转，默认为当前小程序
url	string	false	当前小程序内的跳转链接
open-type	navigate	switch	跳转方式

其中，open-type属性对应6种取值：

• navigate:对应wx,navigate To或wx,navigateToMiniProgram的功能
• redirect:对应wx.redirectTo的功能
• switchTab:navigate跳转方式
• reLaunch:对应wx,reLaunch的功能
• navigateBack:对应wx,navigateBack的功能
• exit:退出小程序，target="miniProgram"时生效

<view class="demo-box">
  <view class="title">导航案例</view>
  <view class="title">点击打开新页面</view>
  <navigator url="../../pages/pageone/pageone" open-type="navigate">
    <button type="primary">点击按钮跳转到新页面</button>
  </navigator>
  <view class="title">点击重定向到新页面</view>
  <navigator url="../../pages/pagetwo/pagetwo" open-type="redirect">
    <button type="primary">点击按钮跳转当前页面</button>
  </navigator>
</view> 

5.2、functional-page-navigator

仅在插件中有效，用于跳转到插件功能页。

属性名	类型	默认值	必填	说明
version	string	release	否	跳转到的小程序版本，线上版本必须设置为 release develop:开发版 trial:体验版 release:正式版
name	string		否	要跳转到的功能页 loginAndGetUserInfo:用户信息功能页 requestPayment:支付功能页 chooseAddress:收货地址功能页 chooseInvoice:获取发票功能页 chooseInvoiceTitle:获取发票抬头功能页
args	object		否	功能页参数，参数格式与具体功能页相关
bindsuccess	eventhandler		否	功能页返回，且操作成功时触发， detail 格式与具体功能页相关
bindfail	eventhandler		否	功能页返回，且操作失败时触发， detail 格式与具体功能页相关
bindcancel	eventhandler		否	因用户操作从功能页返回时触发

Bug & Tip

• tip: 功能页是插件所有者小程序中的一个特殊页面，开发者不能自定义这个页面的外观。
• tip: 在功能页展示时，一些与界面展示相关的接口将被禁用（接口调用返回 fail ）。
• tip: 这个组件本身可以在开发者工具中使用，但功能页的跳转目前不支持在开发者工具中调试，请在真机上测试。

<!-- sample.wxml -->
<functional-page-navigator name="loginAndGetUserInfo" bind:success="loginSuccess">
  <button>登录到插件</button>
</functional-page-navigator>

// redirect.js navigator.js
Component({
  methods: {
    loginSuccess: function(e) {
      console.log(e.detail.code) // wx.login 的 code
      console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo
    }
  }
})

六、媒体组件

6.1、audio

音频组件，用于网络音频的播放。

属性	类型	默认值	必填	说明
id	string		否	audio 组件的唯一标识符
src	string		否	要播放音频的资源地址
loop	boolean	false	否	是否循环播放
controls	boolean	false	否	是否显示默认控件
poster	string		否	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	string	未知音频	否	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	string	未知作者	否	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror	eventhandle		否	当发生错误时触发 error 事件，detail = {errMsg:MediaError.code}
bindplay	eventhandle		否	当开始/继续播放时触发play事件
bindpause	eventhandle		否	当暂停播放时触发 pause 事件
bindtimeupdate	eventhandle		否	当播放进度改变时触发timeupdate 事件，detail = {currentTime, duration}
bindended	eventhandle		否	当播放到末尾时触发 ended 事件

MediaError.code

• 1 获取资源被用户禁止
• 2 网络错误
• 3 解码错误
• 4 不合适资源

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  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=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})

6.2、image

<image>为图片组件，常用于浏览图片，通过设置属性mode能够对图片进行裁剪和缩放，共有14种模式，其中5种是缩放模式，9种是裁剪模式，其属性如表所示。

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

mode有效值的属性名及说明:

属性名	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。
bottom	裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。
center	裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。
left	裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。
right	裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。
top left	裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。
top right	裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">图片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>

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://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})

6.3、video

<video>为视频组件，用于播放本地或网络的视频资源，视频的默认宽度为300px、高度为225px,视频组件提供弹幕功能，其属性如表所示。

属性详情

支持的格式：

格式	iOS	Android
mp4	√	√
mov	√	x
m4v	√	x
3gp	√	√
avi	√	x
m3u8	√	√
webm	x	√

支持的编码格式：

格式	iOS	Android
H.264	√	√
HEVC	√	√
MPEG-4	√	√
VP9	x	√

<view class="page-body">
  <view class="page-section tc">
    <video 
      id="myVideo" 
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      enable-danmu 
      danmu-btn 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
    ></video>
    <view style="margin: 30rpx auto" class="weui-label">弹幕内容</view>
    <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
    <button style="margin: 30rpx auto"  bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
    <navigator style="margin: 30rpx auto"  url="picture-in-picture" hover-class="other-navigator-hover">
      <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button>
    </navigator>
  </view>
</view>

function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length === 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onShareAppMessage() {
    return {
      title: 'video',
      path: 'page/component/pages/video/video'
    }
  },

  onReady() {
    this.videoContext = wx.createVideoContext('myVideo')
  },

  onHide() {

  },

  inputValue: '',
  data: {
    src: '',
    danmuList:
    [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
  },

  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },

  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  bindPlayVideo() {
    console.log('1')
    this.videoContext.play()
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

  videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  }
})

七、地图组件

7.1、map

<map>为地图组件，用于地图的展示。小程序使用的地图来自腾讯地图，地图组件为用户提供视角中心点地位、缩放层级的设置、标记物的增加以及内部组件的事件绑定，其属性如表所示。

属性	类型	默认值	必填	说明
longitude	number		是	中心经度
latitude	number		是	中心纬度
scale	number	16	否	缩放级别，取值范围为3-20
min-scale	number	3	否	最小缩放级别
max-scale	number	20	否	最大缩放级别
markers	Array.<marker>		否	标记点
covers	Array.<cover>		否	即将移除，请使用 markers
polyline	Array.<polyline>		否	路线
circles	Array.<circle>		否	圆
controls	Array.<control>		否	控件（即将废弃，建议使用 cover-view 代替）
include-points	Array.<point>		否	缩放视野以包含所有给定的坐标点
show-location	boolean	false	否	显示带有方向的当前定位点，3.10.0起需要用户位置授权。3.13.2起如果开发者没有手动申请，则会自动申请
polygons	Array.<polygon>		否	多边形
subkey	string		否	地图能力【个性化地图】使用的key，不支持动态修改
layer-style	number	1	否	地图能力【个性化地图】配置的 style
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角
enable-3D	boolean	false	否	展示3D楼块
show-compass	boolean	false	否	显示指南针
show-scale	boolean	false	否	显示比例尺，工具暂不支持
enable-overlooking	boolean	false	否	开启俯视
enable-auto-max-overlooking	boolean	false	否	开启最大俯视角，俯视角度从 45 度拓展到 75 度
enable-zoom	boolean	true	否	是否支持缩放
enable-scroll	boolean	true	否	是否支持拖动
enable-rotate	boolean	false	否	是否支持旋转
enable-satellite	boolean	false	否	是否开启卫星图
enable-traffic	boolean	false	否	是否开启实时路况
enable-poi	boolean	true	否	是否展示 POI 点
enable-building	boolean		否	是否展示建筑物
setting	object		否	配置项
bindtap	eventhandle		否	点击地图时触发，2.9.0起返回经纬度信息
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}
bindupdated	eventhandle		否	在地图渲染更新完成时触发
bindregionchange	eventhandle		否	视野发生变化时触发
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}
bindpolylinetap	eventhandle		否	点击地图路线时触发，e.detail = {longitude, latitude}
bindabilitysuccess	eventhandle		否	地图能力生效时触发，e.detail = {ability, errCode, errMsg}
bindabilityfail	eventhandle		否	地图能力失败时触发，e.detail = {ability, errCode, errMsg}
bindauthsuccess	eventhandle		否	地图鉴权结果成功时触发，e.detail = {errCode, errMsg}
bindinterpolatepoint	eventhandle		否	MapContext.moveAlong 插值动画时触发。e.detail = {markerId, longitude, latitude, animationStatus: "interpolating"
binderror	eventhandle		否	组件错误时触发，例如创建或鉴权失败，e.detail = {longitude, latitude}

setting

提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。

// 默认值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: 1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}

this.setData({
  // 仅设置的属性会生效，其它的不受影响
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker上的气泡callout：

属性名	说明	类型
content	文本	string
color	文本颜色	string
fontSize	文字大小	number
borderRadius	边框圆角	number
border Width	边框宽度	number
borderColor	边框颜色	string
bgColor	背景色	string
padding	文本边缘留白	number
display	BYCLICK':点击显示；'ALWAYS':常显	string
textAlign	文本对齐方式，有效值：left、right、center、string	string

marker上的气泡label属性：

属性名	说明	类型
content	文本	string
color	文本颜色	string
fontSize	文字大小	number
borderRadius	边框圆角	number
border Width	边框宽度	number
borderColor	边框颜色	string
bgColor	背景色	string
padding	文本边缘留白	number
display	BYCLICK':点击显示；'ALWAYS':常显	string
textAlign	文本对齐方式，有效值：left、right、center	string

polyline用于指定一系列坐标点，从数组第一项连线至最后一项，其属性如表：

属性名	说明	类型	备注
points	经度和纬度数组	array	[{latitude:0,longitude:0}]
color	线的颜色	string	十六进制
width	线的宽度	number
dottedLine	带箭头的线	boolean	默认值为false
arrowLine	边框宽度	number	默认值为false,开发者工具暂不支持该属性
arrowIconPath	更换箭头图标	string	在arrowLine为true时生效
borderColor	线的边框颜色	string
borderWidth	线的厚度	number

circle属性用于在地图上显示圆，通过设定中心点的经度、纬度和半径来绘制一个圆形图案作为地图上的标记物，其属性如表所示。

属性名	说明	类型	备注
latitude	纬度	number	浮点数，范围为一90°一90°
longitude	经度	number	浮点数，范围为一180°一180°
color	描边的颜色	string	十六进制
fillColor	填充颜色	string	十六进制
radius	半径	number
strokeWidth	描边的宽度	number

<map id="myMap" style="width:100%; height:300px" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" show-location></map>

<view class="content">
  <button size="mini" bind:tap="reduce">-</button>
  <button size="mini" bind:tap="default">默认缩放比例</button>
  <button size="mini" bind:tap="add">+</button>
</view>
<view class="content">
  <button size="mini" bind:tap="includePoints">按includePoints缩放视野</button>
</view>

Page({
  data: {
    latitude: 23.020670, longitude: 113.751790,
    scale: 16,
    markers: [{
      id:1,
      latitude: 23.020670, 
      longitude: 113.751790,
      iconPath: "/images/1.png",
      label: {content: "东莞市"},
      width:50,
      height: 50,
    }],
    polyline: [{
      points:[{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }]
  },
  onReady(e) {
    this.mapCtx = wx.createMapContext("myMap")
  },
  default() {
    this.setData({
      scale: 16
    })
  },
  reduce() {
    this.setData({
      scale:this.data.scale - 1
    })
  },
  add() {
    this.setData({
      scale: this.data.scale + 1
    })
  },
  includePoints() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude: 23.0403, longitude: 113.7446
      }, {
        latitude: 22.9903, longitude: 113.7724
      }]
    })
  }
})

八、画布

8.1、canvas

画布。2.9.0起支持一套新Canvas2D接口（需指定type属性），同时支持同层渲染，原有接口不再维护。

属性	类型	默认值	必填	说明
type	string		否	指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0)
canvas-id	string		否	canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性
disable-scroll	boolean	false	否	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	eventhandle		否	手指触摸动作开始
bindtouchmove	eventhandle		否	手指触摸后移动
bindtouchend	eventhandle		否	手指触摸动作结束
bindtouchcancel	eventhandle		否	手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	eventhandle		否	手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	eventhandle		否	当发生错误时触发 error 事件，detail = {errMsg}

 <!-- canvas.wxml -->
  <canvas type="2d" id="myCanvas"></canvas>

// canvas.js
Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  }
})