Weex快速上手

時間 2019-12-06

標籤 weex 快速上手简体版

原文原文鏈接

Weex快速上手

Weex 是一套簡單易用的跨平臺開發方案，能以 web 的開發體驗構建高性能、可擴展的 native 應用，爲了作到這些，Weex 與 Vue 合做，使用 Vue 做爲上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API，這樣一來，你甚至可使用其餘框架驅動 Weex，打造三端一致的 native 應用。html

Vue是什麼

Vue.js 是 Evan You 開發的漸進式 JavaScript 框架，在易用性、靈活性和性能等方面都很是優秀。開發者可以經過撰寫 *.vue 文件，基於 <template>, <style>, <script> 快速構建組件化的 web 應用。vue

Hello World

嘗試 Weex 最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 例子。你不須要考慮安裝開發環境或編寫 native 代碼，只須要作下面兩件事：node

爲你的手機安裝 Playground App，固然，Weex 是跨平臺的框架，你依然可使用瀏覽器進行預覽，只是這樣你就沒法感覺到 native 優秀的體驗了。webpack
在新標籤頁中打開 Hello World 例子，點擊預覽，而後用 Playground 掃碼便可。web

很簡單，咱們能夠看到語法就是咱們熟悉的 Vue。你能夠修改這個例子，再次掃碼嘗試。npm

搭建開發環境

第一步：安裝依賴

Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試。首先，你須要 Node.js 和 weex-toolkit。json

安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網下載可執行程序直接安裝便可。bootstrap

對於 Mac，可使用 Homebrew 進行安裝：瀏覽器

brew install node

安裝完成後，使用命令查看服務器

node -v
v6.9.4
npm -v
3.10.10

一般，安裝了 Node.js 環境，npm 包管理工具也隨之安裝了。所以，直接使用 npm 來安裝 weex-toolkit。

npm 是一個 JavaScript 包管理工具，它可讓開發者輕鬆共享和重用代碼。Weex 不少依賴來自社區，一樣，Weex 也將不少工具發佈到社區方便開發者使用。

注意: weex-toolkit 目前僅有最新的 beta 版本開始才支持初始化 Vue 項目，使用前請確認版本是否正確。

npm install -g weex-toolkit@beta
國內開發者能夠考慮使用淘寶的 npm 鏡像 —— [cnpm](https://npm.taobao.org/) 安裝 weex-toolkit

npm install -g cnpm
cnpm install -g weex-toolkit@beta

提示：

若是提示權限錯誤（permission error），使用 sudo 關鍵字進行安裝

sudo cnpm install -g weex-toolkit@beta

安裝結束後你能夠直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令行工具各參數：

Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex debug [options] [we_file|bundles_dir]
Usage: weex init

選項：
  --qr          display QR code for PlaygroundApp                         [布爾]
  --smallqr     display small-scale version of QR code for PlaygroundApp,try it
                if you use default font in CLI                            [布爾]
  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                  [默認值: "no JSBundle output"]
  --watch       using with -o , watch input path , auto run transform if change
                happen
  -s, --server  start a http file server, weex .we file will be transforme to JS
                bundle on the server , specify local root path using the option
                                                                        [字符串]
  --port        http listening port number ,default is 8081         [默認值: -1]
  --wsport      websocket listening port number ,default is 8082    [默認值: -1]
  --np          do not open preview browser automatic                     [布爾]
  -f, --force   [for create sub cmd]force to replace exsisting file(s)    [布爾]
  --help        顯示幫助信息                                              [布爾]
  -h, --host                                               [默認值: "127.0.0.1"]

weex debug -h for Weex debug help information.

for cmd example & more information please visit
https://www.npmjs.com/package/weex-toolkit

info [object Object]