Weex 學習文件、跳轉路徑、控制檯輸出、we轉js彙總

有稜角的圓發表於2017-07-13
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資料夾下




相關文章