什么是navigation?如下图:
在iOS,使用的控制是UINavigationController。我们可以看到Navigation的内容比较多,例如中间的标题、左侧的搜索图片、右侧的图片等。同样,Weex也提供了该组件,那就是wxc-navpage。
我们,可以看到 wxc-navpage不仅支持基础的样式,同样提供了 title、title-color、 left-item-title、left-item-color、right-item-src等等属性,这里可以参考 。
wxc-navpage内嵌子组件,即。但是,我们改造上面的片段代码是跑不起来的。因此我们需要安装weex-components:
$ npm install weex-components
很可能一个应用需要多个页面,那么多个页面如何跳转呢?其实Weex的Demo就给出了很好的例子。例如,这里的代码如下:
上面的代码是我从Weex Demo中拔出来的。这一块也是经常被开发者问到的,就是跳转路径的问题。其实,仔细看上面的代码,我们只需要关注两个地方,一个是this.dir
,另一个是var h5Base = './index.html?page=./'
。
我们在created方法中获取到this.dir。this.dir 则是我们打包完成的js bundle的目录。h5Base则是web端的路径。它的基本形式是:
http://127.0.0.1:8080/index.html?page=./dist/index.js
其中index.html则是web端运行的载体,page=./dist/index.js则是传入到weex init中的参数。我们一般在集成web时候,会写上如下代码:
var url = this.recommend[index].url;
var title = this.recommend[index].title;
var navigator = require('@weex-module/navigator');
'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
}
console.log('------',params.url);
navigator.push(params, function(e) {});
我们获取到this.baseUR,然后拼接路径。this.baseUR则是created方法中获取到不同端的路径前缀。这里,引入了navigator = require('@weex-module/navigator');
组件,然后使用了push方法,将路由对象添加进了路由栈。如果我们需要回退到上一个视图,该如何呢?其实navigator api已经提供了该功能,那就是pop。具体可以参考 。
Weex提供了网络请求模块,那就是stream。简单的例子如下:
基本上stream.fetch方法的几个参数都很容易理解。如果需要POST、PUT、DELETE等。可以参考: https://github.com/alibaba/weex/blob/dev/examples/module/stream-demo.we 。
<template>
<div class="wrapper">
<web class="web" src="{{src}}" style="height:{{height}};" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
</div>
<style>
.text{
font-size:26;
}
.web{
flex:1;
其中src就是我们要打开的网页地址。onpagestart、onpagefinish、onerror几个事件很重要。比如在onpagefinish时去掉loading,onerror时给用户友好提示。 具体参考: 。