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