1. 程式人生 > >Weex工程在iOS、Android和H5三端執行實踐

Weex工程在iOS、Android和H5三端執行實踐

1、在iOS和Android端執行

正如我之前那篇部落格Weex開發實踐(一)嵌入Weex到你的iOS工程中描述的那樣,只需要整合好WeexSDK,編譯出js檔案即可。

2、Weex執行H5頁面

在Terminal中執行weex build web,編譯完成後會自動在Weex工程目錄下生成release資料夾,開啟裡面的.html,如果你的工程適配了h5端,那應該可以正常執行起來。

h5端會無法訪問網路

這裡牽涉了一個跨域問題,產生的原因是本地的127.0.0.1無法訪問伺服器域名,解決的方式網上有很多,我們可以直接將release資料夾部署在伺服器端。

如何傳遞引數給h5

如果你遇到需要給Weex工程傳遞引數才能正確訪問伺服器資料的話,我這裡可以幫到你。
將你需要的引數拼接到Url裡,例如:

https://yourhost?parameter1=value1&parameter2=value2&...

在weex程式碼中,我們這樣去獲取引數

methods: {
            GetQueryString: function (key){            
                var url = window.location.search;// 獲取引數            
                var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");// 正則篩選位址列            
                var result = url.substr(1).match(reg);// 匹配目標引數            
                return result ? decodeURIComponent(result[2]) : null;//返回引數值
            },
}

在你需要使用引數的地方:

this.parameterName = this.GetQueryString('parameter');

獲取當前URL域名

this.urlDomain = document.location.protocol + '//' + window.location.host;

如何跳轉到web頁

window.open(url,'_blank');

到此,我所遇見的的Weex H5端執行問題均已整理。