附錄：：vue2.0 個(gè)人demo地址领炫，有一些打包西壮、路由處理的代碼可供參考,喜歡的話遗增，給個(gè)star，哈哈

一款青、weex介紹

Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開發(fā)方案做修，能以 web 的開發(fā)體驗(yàn)構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用抡草。在最新的weex版本中饰及，已經(jīng)將vue作為默認(rèn)的上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API康震，這樣一來旋炒，你就可以體驗(yàn)到基于vue的webapp的開發(fā)體驗(yàn)，打造三端一致的 native 應(yīng)用签杈。

幾種APP開發(fā)模式

更詳細(xì)的對(duì)比 / rn和weex更詳細(xì)對(duì)比腦圖

二择卦、如何搭建weex項(xiàng)目

Weex也和前端項(xiàng)目一樣，擁有它自己的腳手架全家桶郎嫁。weex-toolkit + weexpack + playground + code snippets + weex-devtool秉继。

weex-toolkit 是官方提供的一個(gè)腳手架命令行工具，你可以使用它進(jìn)行 Weex-pack 項(xiàng)目的創(chuàng)建泽铛，調(diào)試等功能尚辑。

安裝，使用npm進(jìn)行安裝盔腔，確保你的node版本>=6
?
$ npm i -g weex-toolkit杠茬。

1、初始化 weex 項(xiàng)目

$ weex init weex-demo

執(zhí)行完命令后弛随，在 weex-demo 目錄中就創(chuàng)建了一個(gè)使用 Weex 和 Vue 的模板項(xiàng)目瓢喉。然后我們進(jìn)入項(xiàng)目所在路徑，weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)舀透。在 package.json 中栓票，已經(jīng)配置好了幾個(gè)常用的 npm script，分別是：

build: 源碼打包愕够，生成 JS Bundle
dev: webpack watch 模式走贪，方便開發(fā)
serve: 開啟靜態(tài)服務(wù)器
debug: 調(diào)試模式

2、項(xiàng)目的運(yùn)行

$ npm run build

$ npm run serve

?
3链烈、weex項(xiàng)目調(diào)試：

這里需要下載一個(gè)weex-playground,是一個(gè)上架的App厉斟，ios直接在掃碼，安卓可以點(diǎn)擊這里這個(gè)可以用來通過掃碼實(shí)時(shí)在手機(jī)上顯示出實(shí)際的頁面强衡。

 $ npm run debug

使用手機(jī)上的weexplayground掃描瀏覽器打開的二維碼擦秽。

image.png

單純啟動(dòng)一個(gè)調(diào)試服務(wù)器，并同時(shí)喚起Chrome瀏覽器打開調(diào)試主頁漩勤。

image.png

這個(gè)調(diào)試主頁上會(huì)有一個(gè)二維碼感挥，使用 Playground App 掃這個(gè)二維碼可以開啟 Playground 調(diào)試。開啟調(diào)試后,設(shè)備列表中會(huì)出現(xiàn)您的設(shè)備越败，根據(jù)提示進(jìn)行后續(xù)的調(diào)試操作触幼。其中：

Inspector 能夠用來查看 Element \ NetWork \ Console log \ ScreenCast \ BoxModel \ Native View 等。

native組件樹：

image.png

html組件數(shù)：

image.png

Debugger 用來調(diào)試 Weex 中的 JS 代碼究飞，能夠設(shè)置斷點(diǎn)置谦、查看調(diào)用棧堂鲤。     

image.png

weex-pack：
weexpack 是新一代的weex應(yīng)用工程和插件工程開發(fā)套件，是基于weex快速搭建應(yīng)用原型的利器媒峡。它能夠幫助開發(fā)者通過命令行創(chuàng)建weex應(yīng)用工程和插件工程瘟栖，快速打包 weex 應(yīng)用并安裝到手機(jī)運(yùn)行，同時(shí)對(duì)于開發(fā)者而言還能夠創(chuàng)建weex插件模版并發(fā)布插件到weex應(yīng)用市場(chǎng)谅阿。 使用weexpack 能夠方便的在在weex工程和native工程中安裝插件半哟。

目前weex-toolkit集成對(duì)weexpack的命令調(diào)用支持，你可以使用weex-toolkit命令來實(shí)現(xiàn)weexpack具備的功能签餐。比如我們要實(shí)現(xiàn)添加iOS應(yīng)用模板：

首先寓涨，全局安裝 weex-pack 命令：
$ npm install -g weexpack

初始化項(xiàng)目
$ weexpack create <project name>

添加應(yīng)用模版，官方提供的模版默認(rèn)支持 weex bundle 調(diào)試和插件機(jī)制氯檐，注意模版名稱均為小寫戒良，模版被安裝到platforms目錄下：
$ weexpack platform add ios # 使用weexpack 命令
$ weex platform add  ios # 使用weex-toolkit，添加native模板

打包應(yīng)用并安裝運(yùn)行
$ weexpack run ios 
$ weexpack run android

更詳細(xì)的的打包以及插件機(jī)制男摧，見https://github.com/weexteam/weex-pack

weex toolkit 與 weex-pack 的區(qū)別

weex-toolkit 初始化的項(xiàng)目是針對(duì)開發(fā)單個(gè) Weex 頁面而設(shè)計(jì)的蔬墩，也就是說這樣的項(xiàng)目只包括單個(gè)頁面開發(fā)需要的東西译打，比如前端頁面源文件耗拓、webpack 配置、npm 腳本等奏司。項(xiàng)目產(chǎn)生的輸出就是一個(gè) JS Bundle 文件乔询，可以自由的進(jìn)行部署。

weex-pack 是初始化一個(gè)完整的 App 工程韵洋，包括 Android 和 iOS 的整個(gè) App 起步竿刁，前端頁面只是其中的一部分。這樣的項(xiàng)目最終產(chǎn)出是一個(gè) Android App 和一個(gè) iOS App搪缨。

官方最近在考慮整合食拜，無限等待....

三、weex中vue的應(yīng)用

1副编、weex中默認(rèn)使用.vue 文件,基于template, style, script 快速構(gòu)建組件化的應(yīng)用负甸。

2、支持vue大部分的api痹届，除了一些dom有關(guān)的呻待，比如一些鍵盤事件的修飾符（{keyCode|keyAlias}）、v-text

3队腐、頁面狀態(tài)之間的共享和隔離

所有的weex頁面蚕捉，不管是基于vue和rax，都公用了一個(gè)weex runtime柴淘，其中js引擎只初始化一次迫淹，除非重啟秘通，這種情況下，如果共享全局狀態(tài)很有可能造成內(nèi)存泄漏敛熬，因此最好是隔離頁面狀態(tài)充易。因此weex在原生應(yīng)用中大多是以'多頁的實(shí)現(xiàn)存在'，因此不支持Vue的一些全局功能荸型，如Vue.config盹靴、Vue.filter、Vue.mixin瑞妇、Vue.use稿静，不過依然可以在一個(gè)單頁中使用，每一個(gè)單頁中還是用的同一個(gè)實(shí)例的

4辕狰、另外針對(duì)vue-router和vuex大部分在weex中都能完整應(yīng)用改备，部分差異可見[weex中使用vue全家桶的差異性](https://weex.apache.org/cn/references/vue/difference-of-vuex.html)。

在演示項(xiàng)目中蔓倍，使用的是web端完整單頁悬钳，通過路由跳轉(zhuǎn)，但是native端偶翅，復(fù)雜單頁中使用vue-router,多頁場(chǎng)景是使用navigator模塊默勾，[點(diǎn)擊查看跳轉(zhuǎn)邏輯](https://github.com/yinshuxun/weex-start-kit/blob/master/src/mixins/index.js)

5、編譯環(huán)境 

針對(duì) Web 平臺(tái)聚谁，和普通 Vue 2.X 項(xiàng)目一樣母剥，可以使用任意官方推薦的方式編譯源文件，如 Webpack + vue-loader 或者 Browserify + vueify 形导。
針對(duì) Android 和 iOS 平臺(tái)环疼，我們使用 weex-loader 工具支持編譯 .vue 格式的單文件組件；也就是說朵耕，目前只能使用 Webpack + weex-loader 來生成原生端可用的 js bundle炫隶。

四、weex與web平臺(tái)的差異

• BOM & DOM

  1阎曹、不支持dom操作

  2伪阶、僅支持部分事件類型，

  3芬膝、沒有window/location/document/history/navigator等等對(duì)象望门。但是提供了諸如
  WXEnvironment對(duì)象，可以獲取到當(dāng)前設(shè)備的屏幕或者環(huán)境信息锰霜。

  4筹误、weex SDK >= 0.10.0 的才支持事件冒泡

• 布局 & css

  1、只支持flex

  2癣缅、不允許使用id厨剪，只允許用class

  3哄酝、不支持后代選擇器或者繼承

  4、樣式必須寫完整 如background:red; => background-color => red;

  5祷膳、不能設(shè)置背景圖片

  6陶衅、動(dòng)態(tài)綁定class需要使用數(shù)組形式

• 組件

  1、只有scroll/list組件有滾動(dòng)效果

  等等 ....

五直晨、weex基本工作原理

![Upload image.png failed. Please try again.]

?
工作流
we\vue 文件 ————–前端(we\vue源碼)
↓ (轉(zhuǎn)換) ——————前端(構(gòu)建過程)
JS Bundle —————–前端(JS Bundle代碼)
↓ (部署) ——————服務(wù)器
在服務(wù)器上的JS bundle —-服務(wù)器
↓ (編譯) —————— 客戶端(JS引擎)
虛擬 DOM 樹 ————— 客戶端(Weex JS Framework)
↓ (渲染) —————— 客戶端(渲染引擎)
Native視圖 ————— 客戶端(渲染引擎)

和如今 web 開發(fā)的最佳實(shí)踐一樣搀军，Weex 會(huì)把一個(gè)頁面的源代碼全部編譯打包成一個(gè) JS bundle，在瀏覽器中勇皇，我們需要把這個(gè) JS bundle 作為一段 <script> 載入網(wǎng)頁罩句，在客戶端里，我們把這段 JS bundle 載入本地敛摘，并通過 WeexSDK 直接執(zhí)行门烂。

六、 weex項(xiàng)目中webpack打包的方式

和傳統(tǒng)的vue項(xiàng)目不同的是兄淫，weex項(xiàng)目中的webpack打包需要區(qū)分打包web端以及native端屯远，在web端，直接使用vue-loader加載器捕虽，將所有組件進(jìn)行單頁打包即可慨丐，并且為了使用weex官方分裝的組件，需要在入口安裝weex-vue-render模塊
而native端是需要使用weex-loader加載器薯鳍，根據(jù)多頁分別進(jìn)行打包咖气。詳情可見配置

附錄：https://github.com/yinshuxun/weex-start-kit