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文件夹下