微信小程序UI界面之导航组件、媒体组件、地图组件、画布组件详解
微信小程序组件构建UI界面（3）Part 1 导航组件
微信小程序可以在页面中设置导航，可以使用navigator页面链接组件，也可以在js文件里设置导航进行页面跳转，同时可以设置导航条标题和显示效果。

1.1 navigator页面链接组件
navigator页面链接组件用来在wxml页面实现跳转，它有3种类型：
1)保留当前页跳转、跳转后可以返回当前页，它与wx.navigateTo调整效果是一样的
2)关闭当前页跳转，无法返回当前页，它与wx.redirectTo跳转效果是一样的
3)跳转到底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的
1.2 wx.navigateTo保留当前页跳转
1.3 wx.redirectTo保留当前页跳转
1.4 跳转到tabBar页面
wx.switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面。

1.5 wx.navigateBack返回上一页
wx.navigateBack关闭当前页面，返回上一页或多级页面。

可以通过getCurrentPages()获取当前的页面栈，决定需要返回几层。

1.6 wx.setNavigationBarTitle(OBJECT)设置导航条
wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。

Part 2 媒体组件
2.1 audio音频
audio音频组件需要有唯一的id，根据id使用wx.createAudioContext(‘my Audio’)创建音频播放的环境，src属性是音频播放的资源路径，poster属性是音频的播放图片，name属性为音频名称，绑定播放、暂停播等事件。

2.2 image图片
image图片组件有两类展现模式：
一类是缩放模式，在缩放模式里包括4种方式；
一类是裁剪模式，在剪裁模式里包括9种方式
2.3 video视频
video视频组件是用来播放视频的组件，这个组件可以控制是否显示默认播放控件（播放/暂停按钮、播放进度、时间），还可以发送弹幕信息等，video组件默认宽度为300px、高度为225px，设置宽高需要通过wxss设置width和height。

2.4 camera相机
camera相机组件在使用的时候需要用户授权scope.camera，它是由客户端创建的原生组件，它的层级是最高的，不能通过z-index控制层级，可使用cover-view、cover-image覆盖在上面，同一页面只能插入一个camera组件，不能在scroll-view、swiper、picker-view、movabel-view 中使用camera组件。

2.5 live-player实时音视频播放与live-pusher实时音视频录制
要先经过类别审核，属于比较高级的组件，了解即可！
Part 3 map地图组件
map地图组件用来开发与地图有关的应用，如地图导航、打车软件的订单轨迹等都会用到地图组件，在地图上可以标记覆盖物以及一系列的坐标位置。

Part 4 canvas画布组件
canvas画布组件默认宽度为300px、高度为225px，在使用的时候需要有唯一的标识，它有手指触摸动作开始、手指触摸后移动、手指触摸动作结束、手指触摸动作被打断等事件。