我的书签
添加书签
移除书签第六篇 导航、页面跳转、stream、webview
在一款应用中，导航、页面切换、获取网络数据是很常见的功能。因此，本节做一个简单的介绍。
wxc-navpage组件
什么是navigation？如下图:
在iOS，使用的控制是UINavigationController。我们可以看到Navigation的内容比较多，例如中间的标题、左侧的搜索图片、右侧的图片等。同样，Weex也提供了该组件，那就是wxc-navpage。
1. <template>
2. <wxc-navpage height={% raw %}{{...}}{% endraw %} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
3. <content> ...</content>
4. </wxc-navpage>
5. </template>
6. <script>
7. require('weex-components');
8. module.exports = {
9. created: function() {
10. this.$on('naviBar.rightItem.click',function(e){
11. //handle your click event here.
12. });
14. this.$on('naviBar.leftItem.click',function(e){
15. //handle your click event here.
16. });
17. }
18. }
19. </script>
我们，可以看到 wxc-navpage不仅支持基础的样式，同样提供了 title、title-color、 left-item-title、left-item-color、right-item-src等等属性，这里可以参考<http://alibaba.github.io/weex/doc/components/wxc-navpage.html> 。
wxc-navpage内嵌子组件，即<content> ...</content>。但是，我们改造上面的片段代码是跑不起来的。因此我们需要安装weex-components：
1. $ npm install weex-components
weex-components中包含的内容比较多，例如也提供了wxc-tabbar组件。但是，需求是多样的。有时候，发现weex-components组件不能满足一些特定的需求。那么，这里提供2个思路：（1）给weex提issues，让weex支持新的需求 （2）如果实在等不及，可以将weex-components从node_modules中拷贝出来，然后修改里面的内容。
页面跳转
很可能一个应用需要多个页面，那么多个页面如何跳转呢？其实Weex的Demo就给出了很好的例子。例如，这里的代码如下：
1. var bundleUrl = this.$getConfig().bundleUrl;
2. bundleUrl = new String(bundleUrl);
3. console.log('hit', bundleUrl);
4. var nativeBase;
5. var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
7. var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
8. if (isAndroidAssets) {
9. nativeBase = 'file://assets/';
10. }
11. else if (isiOSAssets) {
12. // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
13. // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
14. nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
15. }
16. else {
17. var host = 'localhost:12580';
18. var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
19. if (matches && matches.length >= 2) {
20. host = matches[1];
21. }
22. nativeBase = 'http://' + host + '/' + this.dir + '/build/';
23. }
24. var h5Base = './index.html?page=./' + this.dir + '/build/';
25. // in Native
26. var base = nativeBase;
27. if (typeof window === 'object') {
28. // in Browser or WebView
29. base = h5Base;
30. }
31. this.baseURL = base;
上面的代码是我从Weex Demo中拔出来的。这一块也是经常被开发者问到的，就是跳转路径的问题。其实，仔细看上面的代码，我们只需要关注两个地方，一个是this.dir，另一个是var h5Base = './index.html?page=./'。
我们在created方法中获取到this.dir。this.dir 则是我们打包完成的js bundle的目录。h5Base则是web端的路径。它的基本形式是:
1. http://127.0.0.1:8080/index.html?page=./dist/index.js
其中index.html则是web端运行的载体，page=./dist/index.js则是传入到weex init中的参数。我们一般在集成web时候，会写上如下代码：
1. (function () {
2. function getUrlParam (key) {
3. var reg = new RegExp('[?|&]' + key + '=([^&]+)')
4. var match = location.search.match(reg)
5. return match && match[1]
6. }
7. var loader = getUrlParam('loader') || 'xhr'
8. var page = getUrlParam('page') || 'examples/build/index.js'
9. // jsonp callback name should be specified or be the default
10. // value 'weexJsonpCallback' if the 'jsonp' loader is used.
11. var JSONP_CALLBACK_NAME = 'weexJsonpCallback'
12. window.weex.init({
13. jsonpCallback: JSONP_CALLBACK_NAME,
14. appId: location.href,
15. loader: loader,
16. source: page,
17. rootId: 'weex',
18. downgrade: [] // 'list', 'scroller'
19. })
20. })();
getUrlParam就是获取url中的参数。如果页面有page参数，我们则调用page参数对应的js文件的代码。 到这里，基本上，可以看出跳转路径了。那么使用什么API跳转呢？那就是navigator。
1. var url = this.recommend[index].url;
2. var title = this.recommend[index].title;
3. var navigator = require('@weex-module/navigator');
4. var params = {
5. 'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
6. 'animated' : 'true',
7. }
8. console.log('------',params.url);
9. navigator.push(params, function(e) {});
我们获取到this.baseUR，然后拼接路径。this.baseUR则是created方法中获取到不同端的路径前缀。这里，引入了navigator = require('@weex-module/navigator');组件，然后使用了push方法，将路由对象添加进了路由栈。如果我们需要回退到上一个视图，该如何呢？其实navigator api已经提供了该功能，那就是pop。具体可以参考<http://alibaba.github.io/weex/doc/modules/navigator.html> 。
网络请求
Weex提供了网络请求模块，那就是stream。简单的例子如下：
1. stream.fetch({
2. method: 'GET',
3. url: "http://httpbin.org/get",
4. type:'json'
5. }, function(response) {
6. //process response
7. },function(response){
8. //progress response
9. console.log("current bytes received:"+response.length);
10. });
基本上stream.fetch方法的几个参数都很容易理解。如果需要POST、PUT、DELETE等。可以参考： <https://github.com/alibaba/weex/blob/dev/examples/module/stream-demo.we> 。
webview
当然，在Weex中也支持Webview类似组件，只是Weex命名其为web。具体使用如下：
1. <template>
2. <div class="wrapper">
3. <web class="web" src="{{src}}" style="height:{{height}};" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
4. </div>
5. </template>
8. <style>
9. .text{
10. font-size:26;
11. }
13. .web{
14. flex:1;
15. }
16. </style>
其中src就是我们要打开的网页地址。onpagestart、onpagefinish、onerror几个事件很重要。比如在onpagefinish时去掉loading，onerror时给用户友好提示。 具体参考：<http://alibaba.github.io/weex/doc/components/web.html> 。
