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>