Apache Weex提供web應用設計功能,如果你需要設計web類型的軟件就可以通過這款框架快速配置界面功能,您可以使用內置的變量內容快速設計軟件,可以使用API內容快速部署軟件功能,可以使用組件設計UI,可以使用設計網頁界面,為用戶設計應用提供更多幫助,軟件也可以設計Andid程序,直接在軟件開發新的安卓應用程序,通過調用框架就可以讓用戶更快配置應用程序一切內容,無論是部署功能模塊還是部署UI界面都可以輕松設計;Apache Weex提供的開發組件很多,支持文本、圖像、表單、動畫、志、網絡、、滑塊、手勢等組件!
Apache Weex軟件功能
Weex是一個具有現代Web開發經驗的,用于構建高能跨平臺移動應用程序的框架。
您可以將“ Weex ”發音為/wi?ks/,就像“ Weeks ”一樣。
Weex使開發人員能夠使用現代的Web開發技能,以單個代碼庫構建Andid,iOS和Web應用程序。實際上,您可以將JavaScpt與現代的前端框架一起使用來開發移動應用程序。
Weex的結構是分離的。呈現引擎與語法層(DSL)分離。這意味著Weex不依賴任何特定的前端框架或語言。目前,Weex在Vue.js和Rax的支持下得到了廣泛使用。Weex的另一個主要目標是跟上Web和本機的現代開發技術和平臺功能。生產力和績效可以在Weex存。編寫Weex頁面幾乎就像編寫網頁一樣,即使該頁面被指定在本機環境中運行。
本機模塊
對于那些不依賴于UI視圖的功能,Weex將它們包裝到modules中,在您的前端代碼中,只需用于weex.requireModule(‘xxx’)導入模塊即可調用它的方法。Weex模塊為JavaScpt提供了本機功能,例如網絡,存儲,剪貼板和導航器等。例如,您可以使用模塊來獲取Vue.js的星數。stream
同樣,Weex提供了一組用于基本用途的內置模塊,并支持將現有的本機模塊集成到Weex平臺中
寫一次,到處運行
是的,Weex使開發人員能夠在單個代碼庫上構建適用于Andid,iOS和Web的應用程序,從而極大地提高了開發效率并簡化了測試,構建和發布過程。
盡管Weex頁面使用單個代碼庫,但是您仍然可以編寫平臺特定的代碼。Weex提供WXEnvinment了獲取當前運行時環境的方法。
使用前端框架
前端框架是Weex的語法層。Weex從不限于某些特定的前端框架。目前,Vue.js和Rax已廣泛用于Weex開發中。
Vue.js是用于構建用戶界面的漸進式前端框架。
Rax是具有React兼容API的前端框架。
Apache Weex軟件特色
高能
Weex正在使用本機組件和本機模塊來利用本機渲染能和平臺功能。組件和模塊都是可插拔和可擴展的。
跨平臺
您可以使用單個代碼庫生成不同的捆綁軟件文件,以同時在Web,Andid和iOS平臺上運行。本機組件和模塊在每個平臺上都有不同的實現,但是它們都公開了相同的API。
前端友好
Weex擁有現有的Web生態系統,您可以使用現代的前端技術來開發您的移動應用程序。Weex支持最常用的CSS屬和最流行的前端框架,例如Vue和Rax,將來可能會更多。
大規模用于生產
長期以來,Weex已在許多超級應用程序中大規模使用,總共為近數十億人提供了服務。Weex還為工業發展提供了許多工程產品和平臺。
Apache Weex教程
創建自己的應用
Weex提供了一個命令行工具weex -cli,以幫助開發人員輕松入門。CLI可以幫助您創建入門項目,設置iOS和Andid開發環境,調試,安裝插件等。
當前,weex-cli僅支持創建Vue.js項目。rax-cli如果您想使用Rax,這可能會有所幫助
提示
rax-cli 是第三方插件,不是由Apache Weex開發或的。
設置
隨著Node.js的安裝,安裝weex-cli全球CLI。
npm install weex-toolkit -g
這會將weex命令添加到全局路徑,并允許您使用該weex 命令生成新項目。使用weex 創建啟動項目:
weex awesome-app
之后,將在當前路徑的文件夾內生成一個標準的Weex + Vue.js項目awesome-app。
#開發
下一步是導航到生成的目錄,安裝依賴項并開始:
npm start將在port上啟動Web8081。http://localhost:8081在您選擇的瀏覽器中打開以查看您的Weex應用的渲染結果。源代碼位于src/文件夾中。您可以將其開發為普通的Vue.js項目。
此外,您可以打開http://localhost:8081/web/preview.html以在iframe中預覽網絡上的渲染結果
生成并運行
默認情況下,該weex 命令不會創建iOS和Andid項目,但是您可以使用weex platform add它們來添加它們
根據您的網絡環境,可能需要一段時間才能添加它們。請耐心等待。
為了在本地計算機上開發應用程序,您需要設置一個移動開發環境。對于iOS,您應該安裝Xcode。對于Andid,您應該安裝Andid Studio。開發環境準備就緒后,請運行以下命令以在模擬器或設備上啟動您的應用程序。
除錯
該weex-toolkit還可以用來調試您的移動應用程序。趕緊跑:
weex debug
weex debug將啟動調試并在Chme中打開網頁(僅支持V8引擎)
動畫片
該animation模塊用于在組件上執行動畫。
-Animation可以使用Javascpt在組件上執行一系列簡單的轉換(位置,大小,旋轉,背景色和不透明度)。
例如,如果您有一個image組件,則可以通過動畫來移動,旋轉,增長或縮小它。
可以調用animation.transition(ref, options, callback)以啟動動畫。請參考以下代碼段。
過渡
#過渡(參考,選項,回調)
@ref,將被動畫化的元素。例如,如果ref元素的值為test,則可以使用來開始動畫this.$refs.test。
@options,動畫屬,例如關鍵點,持續時間。
styles,styles指定應應用過渡效果的樣式的名稱和值。支持的樣式如下:
寬度
高度
背景顏色
不透明
tranormOgin
轉換
翻譯/翻譯X /翻譯Y
旋轉/旋轉X /旋轉Y
看法
標度/標度X /標度Y
duration,durationnumber指定動畫執行的持續時間,默認值為0,表示組件立即獲得所需的屬。
delay,delay數字指定動畫開始之前的等待時間。默認值為0。
needLayout,needLayoutboolean指定對布局(寬度/高度/等)的更改是否是持久的,并且在動畫之后生效。默認值為false
timingFunction,timingFunction串描述了中間值是如何計算的CSS屬受著動畫效果。默認值為linear,下面列出了支持的值:
linear:指定從頭到尾以相同速度的過渡效果。
ease-in:指定具有慢速開始和快速結束的過渡效果。
ease-out:指定具有快速開始和慢速結束的過渡效果。
ease-in-out:指定具有慢速開始,快速中間和慢速結束的過渡效果。
cubic-bezier(x1, y1, x2, y2):在三次貝塞爾函數中定義您自己的值。可能的值為0到1之間的參數值
@ callback,callback是動畫完成后調用的函數。在iOS平臺中,您可以使用函數來獲取動畫執行的。
提示
在iOS平臺上,您會獲得有關完成動畫的消息,其中有兩種類型的參數分別為result,Success和和Fail,Andid到目前為止尚不支持。
Andid不支持result參數。
#樣式中的動畫屬
width,widt完成后應用于組件。needLayout如果您希望更改是持久的,請設置為true。默認值為comd width。
height,height動畫完成后應用于組件。needLayout如果您希望更改是持久的,請設置為true。默認值為comd height。
backgundColor,backgundColor動畫完成后應用于組件。默認值為comd backgundColor。
opacity,opacity動畫完成后應用于組件。默認值為comd opacity。
tranormOgin,tranormOgin指示要設置動畫元素的樞軸。對的可能值x-axis是left/ center/ ght/長度或百分比,并且可能的值y-axis是top/ center/ bottom/長度或百分比。默認值為center center。
tranorm,變換對象,其可以包括tate,translate,scale等的下面變換中示出的細節。
translate/translateX/translateY:指定元素將轉換到的位置。單位為數字或百分比,默認值為0。
tate/tateX/tateYv0.14 +:指定元素旋轉的角度。單位為度,默認值為0。
perspectivev0.16 +:z = 0平面與用戶之間的距離。支持Andid 4.1及更高版本。單位是數字,默認值是正無窮大。
scale/scaleX/scaleY:拉伸或收縮元素。單位是數字,默認值為1。