weex踩坑之旅第五弹 ~ 使用navigator内置模块实现导航

目前，我个人认为在weex中实现页面跳转的方式有两种，一种是通过weex提供的navigator模块，一种是通过vue-router之类的第三方插件。这两种方式在开发过程中都需要。那么什么时候采用navigator,什么时候采用路由？可以根据开发需求来决定，底部导航可以使用使用路由。页面中特殊功能，比如个人设置，添加地址等功能可以使用navigator。那么这两种方式如何共存于代码中，需要修改webpack.config.js配置文件，具体做法我们在后面的综合项目中讨论。本章只讨论navigator

1. 初始化weex项目

由于navigator跳转需要多个js bundle，之前我们使用的具有引导文件的单入口文件将不能实现。所以需要通过weex init命令初始化一个新项目。

# 初始化项目
$ weex init navigator
# 安装npm依赖
$ cd navigator
$ npm install
# 安装本地环境
$ weex platform add ios
$ cd platforms/ios
$ pod install
# 运行项目
$ cd ../..
$ weex run ios

2. 分析跳转原理

通过查看webpack.config.js配置文件可以知道，webpack在运行过程中会遍历src目录，根据xxx.vue生成xxx.js入口文件，运行npm run dev后，在dist目录中又会产生xxx.js文件（js Bundle）跳转就是从一个js Bundle跳转到另一个js Bundle中，那么这些js Bundle文件存放在什么地方呢？服务器中！这一点务必重视

在weex中提供了内置模块navigator来实现页面的跳转。该模块提供了两个方法，push和pop

//把一个weex页面URL压入导航堆栈中
push({
    url :""        //要压入的 Weex 页面的 URL
    animated:""    //"true" 示意为页面压入时需要动画效果，"false" 则不需要，默认值为 "true"。注意，一定要是字符串类型的，千万不能写成布尔类型
}, callback(){
    //回调
})

//把当前Weex页面弹出导航堆栈中
pop({
    animated:""    //"true" 示意为页面压入时需要动画效果，"false" 则不需要，默认值为 "true"。注意，一定要是字符串类型的，千万不能写成布尔类型
}, callback(){
    //回调
})

3. 实现组件之间的相互跳转

有了这些理论我们就能轻松的实现页面跳转了

<div class="content">
      <text @click='toNext'>跳转普通页面</text>
      <text @click='jump'>跳转到webview</text>
</div>

//导入navigator模块
let navigator =  weex.requireModule('navigator');

methods:{
    toNext(){
        navigator.push({
          /*
          这里是重点哦！当执行weex run ios的时候，我们会发现默认启动了一个服务
          这个服务的端口为8081，可以通过浏览器打开
          同样，我们也可以通过这种方式将一个jsBundle从服务器中加载过来
          在这里我们要确保wepack-serve服务是开启的
          */
          url: 'http://127.0.0.1:8081/dist/next.js',
          animated: "true"
        })
    }
}

同样，我们可以在next.vue中添加返回的功能

<template>
    <div class="next">
        <div class="header">
            <text class='c1' @click='toBack'>返回</text>
            <text class='c2'>详细页面</text>
            <text class='c1'>保存</text>
        </div>
        <div class="content">
            <text>详细页面</text>
        </div>
    </div>
</template>

    let navigator =  weex.requireModule('navigator');
    export default {
        methods:{
            toBack(){
                navigator.pop({animated: "true"})
            }
        }
    }
    

测试结果

4. webview的应用

在我们现有的项目中，需要完成一个统计报表的功能呢，计划用echars来实现，但是echars在weex中明确得不到支持的，那我们可以使用<web>标签将需要的页面加载进来。使用webview内置组件进行控制。这里我就不再描述echars页面的开发，直接将baidu首页加载到我们的应用中。下面代码是webview.vue的代码，实现方法也很简单。

<template>
    <div class="webviewContainer">
        <div class="header">
            <text class='c1 cell' @click='toBack'>返回</text>
            <text class='c2 cell'>详细页面</text>
            <text class='c1 cell'>保存</text>
        </div>
        <!--使用web标签加载页面-->
        <web ref="webview" :src="url" class="webview" ></web>
    </div>
</template>
const modal = weex.requireModule('modal')
const navigator =  weex.requireModule('navigator');
export default {
    data:()=>({
        url :'http://www.baidu.com'
    }),
    methods:{
        toBack(){
            navigator.pop({
        animated: "true"
      })
        }
    }
}
<script>
const navigator =  weex.requireModule('navigator');
export default {
    data:()=>({
        url :'http://www.baidu.com'
    }),
    methods:{
        
        toBack(){
            navigator.pop({animated: "true"})
        }
    }
}
</script>