基本概念
- 阿里巴巴公司與2016年6月開源的一種用于構(gòu)建移動跨平臺的UI框架
- 基于JS開發(fā)框架
- 基于Vue.js
Vue: 一種漸進式 JavaScript框架
- Facebook在2015年3月在F8開發(fā)者大會上開源的跨平臺UI框架
- 基于JS開發(fā)框架
- 基于React.js
React: 用于構(gòu)建用戶界面的 JavaScript 庫
Weex和React Native的異同
相同點:
- CSS屬性通用
- 都使用JS開發(fā)
- 都可以直接在Chrome中調(diào)試JS代碼
- 需要Node.js基礎(chǔ)環(huán)境
不同點:
Weex基于Vue.js ， 以下是HelloWorld代碼示例
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text>
</div>
</div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>
React Native基于React.js捧搞，以下是HelloWorld代碼示例
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Weex的基本安裝
環(huán)境搭建：
- 安裝Node.js茅信， 命令行輸入
brew install node
- 安裝weex-toolkit思恐， 命令行輸入
npm install -g weex-toolkit
- 檢查weex是否安裝成功河泳，命令行輸入
weex -v
- weex-toolkit也支持直接升級子依賴嬉探，命令
weex update weex-devtool@latest
@后標(biāo)注版本號臼寄，latest表示最新的
初始化 Weex 項目：
weex create awesome-project
執(zhí)行完命令后伪朽，在 awesome-project目錄中就創(chuàng)建了一個 Weex 和 Vue 的模版項目
源碼結(jié)構(gòu)：
package.json：配置開發(fā)使用的node_modules依賴，及其它一些設(shè)置
start文件：啟動程序文件铭乾，里面包換編譯和啟動腳本
examples：示例Demo
android/ios/html： 各平臺代碼
build：打包各平臺的腳本剪廉，配置在package.json中。
開發(fā)：
cd 進入項目所在路徑
- 先通過
npm install安裝項目依賴 -
npm run dev實現(xiàn)項目編譯 -
npm run serve開啟輕量服務(wù)器 - 打開瀏覽器片橡，進入 http://localhost:8080/index.html 即可看到 weex h5 頁面
- 初始化時已經(jīng)創(chuàng)建好了基本的示例妈经，可以在 src/index.vue 中查看。
整體架構(gòu)
Weex 表面上是一個客戶端技術(shù)捧书，但實際上它串聯(lián)起了從本地開發(fā)吹泡、云端部署到分發(fā)的整個鏈路。
開發(fā)者首先可在本地像編寫 web 頁面一樣編寫一個 app 的界面经瓷，然后通過命令行工具將之編譯成一段 JavaScript 代碼爆哑，生成一個 Weex 的 JS bundle；
在移動應(yīng)用客戶端里舆吮，Weex SDK 會準(zhǔn)備好一個 JavaScript 執(zhí)行環(huán)境揭朝，并且在用戶打開一個 Weex 頁面時在這個執(zhí)行環(huán)境中執(zhí)行相應(yīng)的 JS bundle，并將執(zhí)行過程中產(chǎn)生的各種命令發(fā)送到 native 端進行界面渲染色冀、數(shù)據(jù)存儲潭袱、網(wǎng)絡(luò)通信、調(diào)用設(shè)備功能及用戶交互響應(yīng)等功能锋恬；
同時屯换，如果用戶希望使用瀏覽器訪問這個界面，那么他可以在瀏覽器里打開一個相同的 web 頁面与学，這個頁面和移動應(yīng)用使用相同的頁面源代碼彤悔，但被編譯成適合Web展示的JS Bundle，通過瀏覽器里的 JavaScript 引擎及 Weex SDK 運行起來的索守。
[圖片上傳失敗...(image-9b3303-1533698804331)]
運行時性能
React 和 Vue 都是非吃我ぃ快的，所以速度并不是在它們之中做選擇的決定性因素卵佛。
優(yōu)化
在 React 應(yīng)用中杨赤，當(dāng)某個組件的狀態(tài)發(fā)生變化時，它會以該組件為根截汪，重新渲染整個組件子樹疾牲。
在 Vue 應(yīng)用中，組件的依賴是在渲染過程中自動追蹤的挫鸽，所以系統(tǒng)能精確知曉哪個組件確實需要被重渲染说敏。你可以理解為每一個組件都已經(jīng)自動獲得了 shouldComponentUpdate，并且沒有上述的子樹問題限制丢郊。
HTML & CSS
在 React 中盔沫，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達枫匾，現(xiàn)在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理架诞。這類方案有其優(yōu)點，但也存在一些不是每個開發(fā)者都能接受的取舍干茉。
Vue 的整體思想是擁抱經(jīng)典的 Web 技術(shù)谴忧，并在其上進行擴展。
跨平臺
ReactNative支持Android，iOS兩個平臺沾谓，需要自己擴展去支持web
Weex可以支持Android委造，iOS，web三個平臺
打包
ReactNative官方只能將ReactNative基礎(chǔ)js庫和業(yè)務(wù)js一起打成一個js bundle均驶，沒有提供分包的功能昏兆，需要制作分包打包工具
Weex默認(rèn)打的js bundle只包含業(yè)務(wù)js代碼，體積小很多妇穴，基礎(chǔ)js庫包含在Weex sdk中
生命周期
<template>
<div>
<text class="title" v-for="(value, i) in list" :key="i" >{{value}}</text>
</div>
</template>
<style scoped>
.title {font-size: 48px;}
</style>
<script>
var initMessage
module.exports = {
data: function () {
return {
list: ['Lifecycle List']
}
},
init: function () {
initMessage = 'component init: nothing more happen even the data initialization'
console.log('init:', this.list)
},
created: function () {
this.list.push(initMessage)
this.list.push('component created: data observed')
console.log('created:', this.list)
},
mounted: function () {
this.list.push('component mounted: virtual dom generated')
console.log('mounted:', this.list)
}
}
</script>
- 生命周期函數(shù)依次為 init 爬虱、created 、mounted 腾它，它們和 data 跑筝、methods 等屬性是平級的；
- init 內(nèi)一般用于初始化一些內(nèi)部變量瞒滴，綁定一些自定義事件曲梗，這時還沒有數(shù)據(jù)綁定，沒有創(chuàng)建vdom逛腿，所以不能通過this獲取到data和methods稀并，也不能獲取vdom的節(jié)點
- created 完成了數(shù)據(jù)綁定 ，但還未開始編譯模板单默，可以通過this獲取data和methods碘举，但不能獲取vdom的節(jié)點
- mounted 完成了數(shù)據(jù)綁定和頁面布局，可以獲取vdom的節(jié)點
- data 中應(yīng)該放數(shù)據(jù)源搁廓，對于復(fù)雜的數(shù)據(jù)對象引颈，建議用
取值 -> 修改 -> 賦值的方式更新數(shù)據(jù)，否則可能會導(dǎo)致頁面不停刷新境蜕； - methods 中可以放需要自定義實現(xiàn)的函數(shù)蝙场，不需要將生命周期函數(shù)放在 methods 中實現(xiàn)；
樣式設(shè)置
寫法一：直接給組件style屬性賦值
<template>
<div @click="update">
<text style="font-size: 48px; color: #0000ff">Hello</text>
<text :style="{ fontSize: size, color: color }">Hello</text>
</div>
</template>
寫法二：利用class關(guān)鍵字
<template>
<div @click="update">
<text class="a">Hello</text>
<text class="b">Hello</text>
<text :class="['a', x]">Hello</text>
</div>
</template>
<style scoped>
.a {font-size: 48px;}
.b {color: #ff0000;}
</style>
<script>
module.exports = {
data: {
x: ''
},
methods: {
update: function (e) {
this.x = 'b'
console.log('x', this.x)
}
}
}
</script>
- template 只支持一個根節(jié)點粱年，多個根節(jié)點將無法被
Weex 正常的識別和處理 - 為了簡化頁面設(shè)計和實現(xiàn)售滤，屏幕的寬度統(tǒng)一為 750 像素，不同設(shè)備屏幕都會按照比例轉(zhuǎn)化為這一尺寸進行長度計算
- Weex 目前只支持像素台诗，并且 px 單位可以忽略不寫完箩，直接使用對應(yīng)的數(shù)值
- 子元素的樣式不會繼承自父元素，比如 color 和 font-size 等樣式作用在 <text> 上層的 <div> 上是無效的
- Weex 只支持了其中的一部分拉队，比如盒模型弊知、flexbox、position 等布局屬性粱快，以及 font-size秩彤、color 等其它樣式
- 通過 style 叔扼、 template 、 script 將樣式漫雷、視圖和數(shù)據(jù)邏輯進行了分離瓜富，前端開發(fā)經(jīng)過這么多年的發(fā)展，html珊拼、css和js的分開編寫應(yīng)當(dāng)是順理成章的
事件綁定
使用 @click 關(guān)鍵字聲明方法食呻，并在 methods 中實現(xiàn)相應(yīng)的方法
<template>
<div>
<text class="title">Hello {{name}}</text>
<text class="btn" @click="update">Update 1</text>
<text class="btn" @click="update($event)">Update 1</text>
<text class="btn" @click="setName(temp, $event)">Update 2</text>
<text class="btn" @click="setName('John')">Update 3</text>
</div>
</template>
<style scoped>
.title {font-size: 48px;}
.subtitle {font-size: 36px;}
.btn {font-size: 36px; text-align: center; color: white; background-color: gray; padding: 20px; border-radius: 5px;}
</style>
<script>
module.exports = {
data: function () {
return {
name: 'Steve',
temp: 'Mike'
}
},
methods: {
update: function (e) {
this.setName('David')
console.log('setName', this.name)
},
setName: function (value) {
this.name = value
console.log('name', this.name)
}
}
}
</script>
- {{name}}是Vue.js的數(shù)據(jù)綁定語法流炕，只要對 name 的值進行了變更澎现，則會立即生效。
- data中定義數(shù)據(jù)每辟，類似于成員變量剑辫，methods定義方法，可以把module.exports看做一個類渠欺。
-
<template>標(biāo)簽中包含一個<div>標(biāo)簽妹蔽，給<div>標(biāo)簽中同級的<text>標(biāo)簽分別綁定一個點擊事件，并可以選擇傳參或者不傳挠将；例如：@click="update"點擊后會執(zhí)行update方法胳岂，將'David'賦值給變量name，則第一個<text>標(biāo)簽中的文本值隨之變化舔稀。
