笔记5 小程序组件·下

4.导航组件

navigator：
1）重加载页面：
①open-type=“reLaunch”
②url要写当前的url（路径一般从根目录开始写）

2）跳转页面
①url写要跳转到的页面的路径

3）在当前页面打开（重定向，左上角没有返回之前页面的按钮）
①在标签的属性中写一个 redirect
②url写要跳转到的页面的路径

4）切换tab页面
①open-type是"switchTab"
②url写要跳转到的路径
③要在app.json中加入以下代码：

"tabBar":{
    "list":[
      {
        "pagePath":"Pages/navigator/pages/pageA/navigator",
        "text":"页面A"
      },
      {
        "pagePath":"Pages/navigator/pages/pageD/pageD",
        "text":"页面D"
      }
    ]
  },

表示加入的tab按钮

5）返回原来的页面：
open-type=“navigateBack”
实现：
A页面为主页面、B页面为A页面点击跳转页面后跳转到的新页面、C页面为从当前页面打开的重定向页面、D页面为Tab页中的第二页（第一页为A页面）
A页面的实现：
wxml中:

<view>
    <navigator url="../pageA/navigator?title-navigate" open-type="reLaunch">
        <button type="default" hover-class="navigator-hover">重加载页面</button>
    </navigator>

    <navigator url="../pageB/navigate?title=navigate">
        <button type="default">跳转到新页面</button>
    </navigator>

    <navigator url="../pageC/redirect?title=redirect" redirect>
        <button type="default">在当前页面打开</button>
    
    </navigator>

    <navigator url="../pageD/pageD" open-type="switchTab">
        <button type="default">切换tab页面</button>
    </navigator>
</view>

B页面：
wxml中：

<view>
    <view>新的navigate页面</view>
    <navigator open-type="navigateBack">
        <button type="default">返回页面A</button>
    </navigator>
</view>

C页面：

<view>
    <view>
        重定向页面
    </view>
</view>

D页面：

<view>
    <view>
        页面D
    </view>
</view>

效果：

5.媒体组件

audio、image、video、live-player、camera、live-pusher
分别对应音频、图片、视频、实时播放、相机、实时录制组件
其中live-player和live-pusher只对一些类目的小程序开放

6.地图组件

通过map标签来展示
用cover-view代替controls(即将过期)来添加地图放大缩小按钮

7.canvas组件

自定义动画
大部分是用API调用动画
在API部分练习

8.开放能力组件

open-data组件：获取到用户或群的当前各种信息
web-view组件：获取到web页面，将web页面注入小程序中显示，由web页面向小程序发送信息、以及由web页面返回到小程序等方法。

---

未完待续O(∩_∩)O