Weex簡介

Weex 是阿里前端技術(shù)團(tuán)隊開源額一套跨平臺開發(fā)方案，能以web的開發(fā)體驗構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用，Weex 的頁面表示層使用 Vue ，并遵循 W3C 標(biāo)準(zhǔn)實現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，Weex和React Native一樣是當(dāng)前流行的跨平臺開發(fā)框架。Weex的官方地址為：https://weex.apache.org/。Weex最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 的例子，你甚至不需要安裝任何的開發(fā)環(huán)境或編寫native代碼即可開始一個Weex程序。

環(huán)境搭建

開發(fā)Weex程序之前，需要先搭建好相關(guān)的開發(fā)環(huán)境，為了同時開發(fā)Android和iOS跨平臺應(yīng)用，你需要一臺Mac電腦，然后安裝一些必要的軟件。

Homebrew

Homebrew是Mac系統(tǒng)的包管理器，用于安裝NodeJS和一些其他必需的工具軟件。安裝命令如下：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

需要注意的是，在Max OS X 10.11以上版本中，homebrew在安裝軟件時可能會碰到/usr/loca目錄不可寫的權(quán)限問題，需要以管理員權(quán)限運行。

Node

Weex目前需要NodeJS 6.0或更高版本，Homebrew默認(rèn)安裝的是最新版本，一般都滿足要求。

brew install node

安裝完node后建議設(shè)置npm鏡像以加速后面的項目構(gòu)建過程。注意：不要使用cnpm！cnpm安裝的模塊路徑比較奇怪，packager不能正常識別！相關(guān)的命令如下：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Xcode

要支持 iOS 平臺則需要配置 iOS 開發(fā)環(huán)境，而iOS開發(fā)工具使用的是Xcode，除此之外，還需要安裝cocoaPods工具。

Android Studio

Android Studio是Android應(yīng)用程序的開發(fā)工具，需要注意的是運行Weex的Android build-tool的版本需要高于23.0.2。

weex-toolkit

weex-toolkit 是官方提供的一個腳手架命令行工具，可以使用它進(jìn)行 Weex 項目的創(chuàng)建，調(diào)試以及打包等功能。安裝weex-toolkit的命令如下：

npm install -g weex-toolkit

weexpack

weexpack 是新一代的weex應(yīng)用工程和插件工程開發(fā)套件，是基于weex快速搭建應(yīng)用原型的利器?？梢詣?chuàng)建weex應(yīng)用工程和插件工程，快速打包 weex 應(yīng)用并安裝到手機(jī)運行，還可以創(chuàng)建weex插件模版并發(fā)布插件到weex應(yīng)用市場， 使用weexpack 能夠方便的在在weex工程和native工程中安裝插件。安裝weexpack的命令如下：

npm install -g weexpack

工程創(chuàng)建

使用如下的命令創(chuàng)建項目：

weexpack create appName

創(chuàng)建后，Weex的工程的目錄結(jié)構(gòu)如下：

.md 
├── android.config.json 
├── config.xml 
├── hooks 
│  └── README.md 
├── ios.config.json 
├── package.json 
├── platforms // 平臺模版目錄 
├── plugins // 插件下載目錄 
│  └── README.md 
├── src // 業(yè)務(wù)代碼（we文件）目錄
│  └── index.we 
├── start 
├── start.bat 
├── tools 
│  └── webpack.config.plugin.js 
├── web 
│  ├── index.html 
│  ├── index.js 
│  └── js 
│  └── init.js 
└── webpack.config.js

需要注意的是，使用上面命令創(chuàng)建的項目是不包含 ios 和 android 工程模版，所以，需要使用如下的命令創(chuàng)建安裝依賴，然后再安裝Android和iOS的工程模板。

npm install

安裝 weex 應(yīng)用模版

安裝 weex 應(yīng)用模版的模板命令如下，模版會被安裝到platforms目錄下。iOS平臺的安裝命令如下：

weexpack platform add ios

Android平臺的安裝命令如下：

weexpack platform add android

安裝完成之后，會在platforms目錄下看到如下的目錄結(jié)構(gòu)：

├── platforms 
│  ├── ios
│  └── android

編寫Hello Word程序

打開/src/index.vue的文件，并將默認(rèn)內(nèi)容替換為如下的代碼：

<template>
 <div class="wrapper" @click="update">
  <image :src="logoUrl" class="logo"></image>
  <text class="title">Hello {{target}}</text>
  <text class="desc">Now, let's use vue to build your weex app.</text>
 </div>
</template>

<style>
 .wrapper { align-items: center; margin-top: 120px; }
 .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
 .logo { width: 360px; height: 156px; }
 .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
 export default {
  data: {
   logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
   target: 'World'
  },
  methods: {
   update: function (e) {
    this.target = 'Weex'
    console.log('target:', this.target)
   }
  }
 }
</script>

關(guān)于Weex更多的語法規(guī)則，可以參考開發(fā)手冊。

運行

對于Web平臺，執(zhí)行如下的命令：

npm run build 
npm run dev & npm run serve

或者使用如下命令執(zhí)行單頁調(diào)試：

weex src/index.vue

真機(jī)和虛擬機(jī)運行

使用Xcode打開WEEX項目的ios目錄，如下圖所示：

打開后簡單的簡單點配置下基本配置，如項目名、識別符、版本、開發(fā)者等信息。

你可以選擇虛擬機(jī)或者真機(jī)執(zhí)行iOS項目，不過執(zhí)行前你要保證代碼是最新打包的，打包的命令如下：

weex build ios

然后選擇真機(jī)或者模擬器運行即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論