Weex 学习文档、跳转路径、控制台输出、we转js汇总

最近在学习阿里的weex框架，网上教程真是不少，但是有用的确实是少的很。其中大多数都是讲如何配置移动端的，很少有讲到weex语法的。要知道，如果真需要用weex编写js页面的话，很有可能是移动端开发者自己去编写（iOS&&Android）。只知道配置环境，不知道如何编写js页面基本上和没学没什么两样的。

所以下面整理一些学习weex时看到的好的学习资料，其中我重点记录一下js页面跳转路径的问题。ps：这个问题好像还和css相对路径有点区别。

---

 

1.相关学习的文档

1.1官方文档中文版网址：http://www.shouce.ren/api/view/a/11623  

开发可以使用we或者vue进行，建议使用vue，推荐文档（we和vue的语法区别）：http://weex-project.io/cn/references/migration/difference.html

其中可能不是特别全，但是还是比较系统的，建议从头到尾研究一遍，同时配合官方的Demo敲一遍（不敲代码就不会知道其中的坑有多深）。

1.2下面是官方Demo的网址：https://github.com/alibaba/weex/tree/dev  

项目中没有pod第三方框架，打开项目，cd到iOS（Android）的根目录，执行：pod install。

打开项目配置相应的库文件就可以运行了。

 

1.3工具建议用webstorm，网上有很多配置的文章，很简单配置。（不建议用Sublime，太轻量级了）

 

2.weex中的路径问题。

2.1绝对路径：http://192.168.1.1:8080/......

这种方法简单直观，不过当服务器地址更换的时候如果所有的js页面都是绝对地址，需要一个个更换，你去找吧，这可是很大的工作量哦。

 

2.2我讲述一下个人认为比较简单方便的一种方法，这是官方Demo中的一种方法：

  var bundleUrl = this.$getConfig().bundleUrl;
  bundleUrl = new String(bundleUrl);
  console.log('baseurl-01',bundleUrl);

这几句代码获取当前的js的地址，可以是从服务器动态获取的js（http...类型），也可以是本地js文件（js文件放在app路径下）。         

 var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

 var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;

iOS端的js文件地址类型为file:///...........项目名称.app/........
安卓端的js文件地址类型为file://assets/.........

注意：<js/weex/helloweex.js>

1.比如说js文件夹下面全都是js文件类型（其中有子文件夹包含js文件），我们把js放到项目中时，这时在app内部js文件夹和子文件夹全都没有了，也就是说js文件夹内所有的js文件同级放在了项目.app路径下。（iOS端是这样，安卓的文件类型我不清楚。）

2.由于1的原因，ios端在调用本地js文件时，拼接路径不需要加js或者子文件夹的名称。

3.服务器类型的js文件地址拼接的时候有子文件夹需要添加的。

下面是we文件拼接地址的Demo，适应于本地js文件，服务器端文件，具体含义，上面分析的差不多了，自己去写个小Demo测试
几遍就熟悉了。（服务器端，本地文件都测试一下）

            var bundleUrl = this.$getConfig().bundleUrl;
            bundleUrl = new String(bundleUrl);
            console.log('baseurl-01',bundleUrl);

            var nativeBase;
            var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

            var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
            if (isAndroidAssets) {
                nativeBase = 'file://assets/';
                console.log('baseurl---android ---',nativeBase);
            }
            else if (isiOSAssets) {
                // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
                // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
                nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                console.log('baseurl---ios ---',nativeBase);
            }
            else {
                var host = 'localhost:8080';
                var matches = ///([^/]+?)//.exec(this.$getConfig().bundleUrl);
                if (matches && matches.length >= 2) {
                    host = matches[1];
                }
                nativeBase = 'http://' + host + '/' + this.dir + '/navigator/';
                console.log('baseurl--host---',nativeBase);
            }
            var h5Base = bundleUrl;
            // in Native
            var base = nativeBase;
            if (typeof window == 'object') {
                // in Browser or WebView
                //base = h5Base;
            }
            this.url = base+'navigator.js';

            console.log('baseurl-lastbase----',this.url);

 

3.控制台输出的问题

 

比如we文件下这一句代码，我本来做iOS的，始终没搞明白怎么看的打印的信息。最后神来之笔一下想到了一个方法，
然后百度iOS端口又找到另一个方法。

console.log('baseurl-lastbase----',this.url);

方法1：执行终端命令：weex helloweex.we 这时页面会出现在浏览器中，打开web控制台，你就可以看到log信息了。
方法2：iOS端设置[WXLog setLogLevel:WXLogLevelError];其中WXLogLevelError不同类型可以打印不同的log信息哦。

 

 

4.we/vue 转换成 js文件的终端命令

weex compile we js            //会将we文件夹下的所有we文件转换到js文件夹下

weex compile dir/xxx.we  js   //会将dir文件夹下的xxx.we文件转换为js文件存到js文件夹下

weex compile dir/xxx.vue  js   //会将dir文件夹下的xxx.vue文件转换为js文件存到js文件夹下