Weex學(xué)習(xí)指南

近年來(lái)伴隨著大前端概念的提出和興起移動(dòng)端和前端的邊界變得越來(lái)越模糊涌現(xiàn)了一大批移動(dòng)跨平臺(tái)開(kāi)發(fā)框架和模式。從早期的PhoneGap、inoc等Hybird技術(shù)到現(xiàn)在耳熟能詳?shù)腞eact Native、Weex和Flutter等技術(shù)無(wú)不體現(xiàn)著移動(dòng)端開(kāi)發(fā)的前端化。而阿里巴巴在2016年6月開(kāi)源的Weex移動(dòng)跨平臺(tái)框架語(yǔ)法上使用Vue.js編寫更加貼近Web前端開(kāi)發(fā)在性能和快速迭代方面相比其他框架也有一定的優(yōu)勢(shì)。

Weex簡(jiǎn)介

Weex是由阿里巴巴研發(fā)的一套移動(dòng)跨平臺(tái)技術(shù)框架研發(fā)的初衷是為了解決移動(dòng)開(kāi)發(fā)過(guò)程中頻繁發(fā)版和多端研發(fā)的問(wèn)題。使用Weex提供的跨平臺(tái)技術(shù)開(kāi)發(fā)者可以很方便的使用Web技術(shù)來(lái)構(gòu)建高性能、可擴(kuò)展的Native級(jí)別的性能體驗(yàn)并支持在Android、iOS、YunOS和Web等多平臺(tái)上進(jìn)行部署。具體的說(shuō)當(dāng)在項(xiàng)目中集成WeexSDK之后就可以使用JavaScript和現(xiàn)代流行的前端框架來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用。

同時(shí)Weex框架的結(jié)構(gòu)是解耦的渲染引擎與語(yǔ)法層是分開(kāi)的也不依賴任何特定的前端框架目前主要支持Vue.js和Rax兩個(gè)前端框架。這樣一來(lái)甚至可以使用其他前端框架來(lái)驅(qū)動(dòng)Weex打造三端一致的native應(yīng)用。

作為一套前端跨平臺(tái)技術(shù)框架Weex建立了一套源碼轉(zhuǎn)換以及Native與Js通信的機(jī)制。Weex表面上是一個(gè)客戶端框架但實(shí)際上它串聯(lián)起了從本地開(kāi)發(fā)、云端部署到分發(fā)的整個(gè)鏈路。

具體來(lái)說(shuō)在開(kāi)發(fā)階段編寫一個(gè).we文件然后使用Weex提供的weex-toolkit轉(zhuǎn)換工具將.we文件轉(zhuǎn)換為JS bundle并將生成的JS bundle上傳部署到云端最后通過(guò)網(wǎng)絡(luò)請(qǐng)求或預(yù)下發(fā)的方式加載至用戶的移動(dòng)應(yīng)用客戶端。當(dāng)集成了Weex SDK的客戶端接收到JS bundle文件后調(diào)用本地的JavaScript引擎執(zhí)行環(huán)境執(zhí)行相應(yīng)的JS bundle并將執(zhí)行過(guò)程中產(chǎn)生的各種命令發(fā)送到native端進(jìn)行界面渲染、數(shù)據(jù)存儲(chǔ)、網(wǎng)絡(luò)通信以及用戶交互響應(yīng)。Weex的整個(gè)工作流程圖如下圖所示。

類似的解決方案還有React Native對(duì)就是它大名鼎鼎的Facebook推出來(lái)的提到Weex不得不提到的對(duì)手。根據(jù)原理圖我們來(lái)看下學(xué)習(xí)weex需要學(xué)習(xí)哪些知識(shí)

前端知識(shí)

上圖中最上面是我們的DSL我們一般叫Weex文件Weex2.0之后改為Vue通過(guò)transformer這層轉(zhuǎn)化成js文件部署到Server或者應(yīng)用內(nèi)。 學(xué)習(xí)Weex需要開(kāi)發(fā)者掌握Html、Css和Js基礎(chǔ)以及相關(guān)的概念、基本語(yǔ)法、基礎(chǔ)頁(yè)面繪制等前端知識(shí)。

JS知識(shí)

Weex開(kāi)發(fā)需要開(kāi)發(fā)者掌握的前端知識(shí)有

JavaScript文檔

文檔https://developer.mozilla.org/zh-CN/docs/Web/JavaScript?JavaScript文檔比較全面。

ES6是JavaScript語(yǔ)言的最新標(biāo)準(zhǔn)。

文檔http://es6.ruanyifeng.com/?阮一峰的專門介紹ES6語(yǔ)言新特性的電子書(shū)。

文檔http://liubin.org/promises-book/#chapter1-what-is-promise?Promise是把異步處理對(duì)象和處理規(guī)則進(jìn)行規(guī)范化幾乎已經(jīng)在JavaScript的異步開(kāi)發(fā)中成為標(biāo)配。

關(guān)于前端更詳細(xì)的學(xué)習(xí)路線可以參考我之前的博客前端學(xué)習(xí)路線

Node

在學(xué)習(xí)vue之前需要先了解node.js 和 npm 的概念。已經(jīng)對(duì)此了解的同學(xué)可以直接略過(guò)。 Node.js是一個(gè)開(kāi)放源代碼、跨平臺(tái)的、可用于服務(wù)器端和網(wǎng)絡(luò)應(yīng)用的運(yùn)行環(huán)境。Node.js使用Google V8 JavaScript 引擎。

npm用的比較多就是一個(gè)依賴包管理系統(tǒng)。就像Android里的Gradle一樣。說(shuō)到npm就要提到 package.json 文件在vue項(xiàng)目、weex項(xiàng)目中都會(huì)有這樣一個(gè)文件是一個(gè)json配置數(shù)組。具體的配置規(guī)則可以見(jiàn) npm-package.json。

Vue

Vue.js作為當(dāng)前流行的三大前端框架之一是一套構(gòu)建用戶界面的漸進(jìn)式框架與其它大型的前端框架不同Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。同時(shí)Vue的核心庫(kù)只關(guān)注視圖層不僅易于上手還便于與第三方庫(kù)或既有項(xiàng)目整合當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

隨著Weex 0.10.0版本的發(fā)布Weex正式添加了對(duì)vue.js語(yǔ)言的支持從此開(kāi)發(fā)者便可以使用vue.js來(lái)開(kāi)發(fā)Weex應(yīng)用程序。

使用 vue-cli 又名腳手架創(chuàng)建一個(gè)模板Vue項(xiàng)目,使用WebStorm進(jìn)行代碼編輯并dev模式跑起來(lái)。方便一邊看文檔一邊手動(dòng)寫代碼。 通過(guò)腳手架創(chuàng)建好項(xiàng)目首先了解webpack模板創(chuàng)建出來(lái)的項(xiàng)目結(jié)構(gòu)是怎樣的、入口在哪、配置文件在哪、該在哪寫業(yè)務(wù)代碼、怎么運(yùn)行等等。這個(gè)百度一下有很多解釋。

webpack模板項(xiàng)目中使用了 vue-router 路由說(shuō)到 vue-router 就得說(shuō)單頁(yè)面應(yīng)用即SPA。在vue項(xiàng)目中現(xiàn)在更加流行單頁(yè)面應(yīng)用并搭配路由使用。用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用是非常簡(jiǎn)單的。使用 Vue.js 時(shí)我們就已經(jīng)把組件組合成一個(gè)應(yīng)用了當(dāng)你要把 vue-router 加進(jìn)來(lái)只需要配置組件和路由映射然后告訴 vue-router 在哪里渲染它們。

在Vue中多組件的開(kāi)發(fā)給我們帶來(lái)了很多的方便但同時(shí)當(dāng)項(xiàng)目規(guī)模變大的時(shí)候多個(gè)組件間的數(shù)據(jù)通信和狀態(tài)管理就顯得難以維護(hù)而Vuex就此應(yīng)運(yùn)而生。

需要注意的是vue是一個(gè)完整且龐大的框架千萬(wàn)別想著等vue學(xué)完我再去學(xué)weex所有的知識(shí)都是先了解、使用過(guò)程中深入的過(guò)程。

相關(guān)文檔地址

Vue官方文檔 https://cn.vuejs.org/

Githubhttps://github.com/vuejs/vue

vue-router文檔https://router.vuejs.org/zh-cn/

Githubhttps://github.com/vuejs/vue-router

Vuex 文檔https://vuex.vuejs.org/zh-cn/

Githubhttps://github.com/vuejs/vuex/

Weex

終于到了Weex的學(xué)習(xí)如果有前端基礎(chǔ)的可以直接跳過(guò)前面基礎(chǔ)知識(shí)學(xué)習(xí)了解。照例先看Weex官方文檔https://weex.apache.org/cn/并且配合官方Github上的Playground代碼在本地運(yùn)行起來(lái)。

下面說(shuō)一下對(duì)于一個(gè)新手來(lái)說(shuō)如何學(xué)習(xí)Weex呢

1、官方文檔瀏覽一遍有個(gè)大致了解文檔不多也比較簡(jiǎn)單。

2、按照官方文檔快速上手搭建開(kāi)發(fā)環(huán)境使用官方推薦的腳手架 weex-toolkit 創(chuàng)建一個(gè)項(xiàng)目然后運(yùn)行第一個(gè)Weex項(xiàng)目hello weex。

3、安裝Playground示例apk然后在手機(jī)上看到各種demo的效果。然后用Playground掃描我們運(yùn)行的hello weex即可在Android手機(jī)上看到效果了。到Github上把官方的 Playground 代碼下下來(lái)。在本地部署好Weex代碼和Android代碼并跑起來(lái)Ios同理。

4、調(diào)試Weex頁(yè)面weex-toolkit支持調(diào)試工具weex devtools啟動(dòng)一個(gè)調(diào)試服務(wù)器學(xué)習(xí)在web端調(diào)試App端的js代碼。

5、自己的Sample項(xiàng)目跑起來(lái)后使用官方的 Playground 項(xiàng)目掃碼可以運(yùn)行。然后集成Weex到已有應(yīng)用或者一個(gè)新創(chuàng)建App項(xiàng)目使用App端訪問(wèn)Js頁(yè)面。

6、最后基于weex-toolkit 生成的 weex-sample 項(xiàng)目把 weex文檔-手冊(cè) 中的所有內(nèi)建組件和內(nèi)建模塊的例子代碼敲一遍也可以直接貼上去看效果了解官方的組件有哪些功能。

學(xué)習(xí)網(wǎng)站

Weex學(xué)院https://www.weexdaxue.com/

餓了么前端專欄https://zhuanlan.zhihu.com/ElemeFE

快速入門

“工欲善其事必先利其器”學(xué)習(xí)Weex之前需要先搭建好本地的開(kāi)發(fā)環(huán)境如果只是想簡(jiǎn)單的體驗(yàn)下Weex的魅力可以使用Weex提供的dotWe在線運(yùn)行環(huán)境地址為“http://dotwe.org/vue”。

Weex官方提供weex-toolkit的腳手架工具來(lái)輔助開(kāi)發(fā)和調(diào)試。不過(guò)需要先安裝Node.js和Weex Cli環(huán)境。

安裝Node

安裝Node.js方式多種多樣最簡(jiǎn)單的方式是直接從Node.js官網(wǎng)下載可執(zhí)行安裝程序直接安裝。如果是Mac環(huán)境還可以使用Homebrew進(jìn)行安裝安裝命令如下

brew?install?node

安裝完成之后可以使用下面的命令來(lái)檢測(cè)是否安裝成功。

$?node?-v v6.11.3 $?npm?-v 3.10.10

通常安裝了Node.js環(huán)境npm包管理工具也隨之安裝了。因此接下來(lái)可以直接使用npm來(lái)安裝weex-toolkit工具。

npm?install?-g?weex-toolkit

如果要升級(jí)weex-toolkit則可以使用下面的命令

weex update weex-devtool@latest // @后標(biāo)注版本后latest表示最新版本

如果是國(guó)內(nèi)開(kāi)發(fā)者還可以使用淘寶的npm鏡像來(lái)安裝weex-toolkit涉及到的安裝命令如下

npm?install?-g?cnpm?--registry=? cnpm?install?-g?weex-toolkit

安裝結(jié)束后可以直接使用weex命令來(lái)驗(yàn)證是否安裝成功如果安裝成功會(huì)顯示weex命令行工具各參數(shù)。

安裝weexpack

weexpack是weex新一代的工程開(kāi)發(fā)套件是基于weex快速搭建應(yīng)用原型的利器。使用weexpack可以快速的幫助開(kāi)發(fā)者通過(guò)命令行創(chuàng)建weex工程和插件工程添加相應(yīng)平臺(tái)的weex 應(yīng)用模版weexpack還支持快速打包weex 應(yīng)用并安裝到手機(jī)運(yùn)行并創(chuàng)建weex插件模版并發(fā)布插件到weex應(yīng)用市場(chǎng)。安裝weexpack的命令如下

npm?install?-g?weexpack

安裝Weektools

weex-toolkit是官方提供的一個(gè)腳手架命令行工具可以使用它進(jìn)行Weex 項(xiàng)目的創(chuàng)建、調(diào)試以及打包等操作。weex-toolkit從1.0.1版本之后才開(kāi)始支持初始化Vue項(xiàng)目所以使用時(shí)請(qǐng)注意weex-toolki的版本。weex-toolkit的安裝命令如下

npm?install?-g?weex-toolkit

如果使用上面的命令安裝使用的是從https://registry.npmjs.org獲取的安裝源所以對(duì)于國(guó)內(nèi)用戶來(lái)說(shuō)最好選擇從阿里的鏡像去下載安裝時(shí)需要執(zhí)行如下的一些命令。

npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org??//淘寶鏡像npm?install?-g?weex-toolkit12

安裝完成之后可以使用weex -v或者weex命令來(lái)驗(yàn)證是否安裝成功。

安裝Android環(huán)境

如果需要支持Android平臺(tái)則需要配置Android開(kāi)發(fā)環(huán)境安裝Java相關(guān)環(huán)境安裝Android Studio及Android SDK。在安裝編譯Android項(xiàng)目時(shí)需要保證Android build-tool的版本為23.0.2以上。

安裝iOS環(huán)境

如果需要支持iOS平臺(tái)則需要配置iOS開(kāi)發(fā)環(huán)境安裝Xcode、cocoaPods及其相關(guān)環(huán)境。其中Xcode是Apple 公司提供的集成開(kāi)發(fā)工具可以使用它開(kāi)發(fā)macOS和iOS應(yīng)用程序而CocoaPods則是負(fù)責(zé)iOS項(xiàng)目管理的第三方開(kāi)源庫(kù)的工具合理的使用CocoaPods可以提高程序的開(kāi)發(fā)效率。

接下來(lái)使用Weex提供的create命令初始化一個(gè)Weex項(xiàng)目。例如

weex create weexdemo

執(zhí)行完上述命令后在工程weexdemo目錄下就會(huì)創(chuàng)建一個(gè)使用Weex和Vue的模板項(xiàng)目工程目錄如下圖所示。

本文轉(zhuǎn)載自異步社區(qū)

JavaScript web前端 Node.js

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。