weex安裝環境 WEEX環境搭建與入門詳解

2021-10-12 15:59:57 字數 2596 閱讀 8721

weex簡介

環境搭建

開發weex程式之前,需要先搭建好相關的開發環境,為了同時開發android和ios跨平台應用,你需要一台mac電腦,然後安裝一些必要的軟體。

homebrew

homebrew是mac系統的包管理器,用於安裝nodejs和一些其他必需的工具軟體。安裝命令如下:

/usr/bin/ruby -e "$(curl -fssl "

需要注意的是,在max os x 10.11以上版本中,homebrew在安裝軟體時可能會碰到/usr/loca目錄不可寫的許可權問題,需要以管理員許可權執行。

node

weex目前需要nodejs 6.0或更高版本,homebrew預設安裝的是最新版本,一般都滿足要求。

brew install node

npm config set registry --global

npm config set disturl --global

xcode

要支援 ios 平台則需要配置 ios 開發環境,而ios開發工具使用的是xcode,除此之外,還需要安裝cocoapods工具。

android studio

android studio是android應用程式的開發工具,需要注意的是執行weex的android build-tool的版本需要高於23.0.2。

weex-toolkit

weex-toolkit是官方提供的乙個腳手架命令列工具,可以使用它進行 weex 專案的建立,除錯以及打包等功能。安裝weex-toolkit的命令如下:

npm install -g weex-toolkit

weexpack

weexpack是新一代的weex應用工程和外掛程式工程開發套件,是基於weex快速搭建應用原型的利器。可以建立weex應用工程和外掛程式工程,快速打包 weex 應用並安裝到手機執行,還可以建立weex外掛程式模版並發布外掛程式到weex應用市場, 使用weexpack 能夠方便的在在weex工程和native工程中安裝外掛程式。安裝weexpack的命令如下:

npm install -g weexpack

工程建立

使用如下的命令建立專案:

建立後,weex的工程的目錄結構如下:

.md├── android.config.json

├── config.xml

├── hooks

│ └── readme.md

├── ios.config.json

├── package.json

├── platforms // 平台模版目錄

│ └── readme.md

├── src // 業務**(we檔案)目錄

│ └── index.we

├── start

├── start.bat

├── tools

│ └── webpack.config.plugin.js

├── web

│ ├── index.html

│ ├── index.js

│ └── js

│ └── init.js

└── webpack.config.js

需要注意的是,使用上面命令建立的專案是不包含 ios 和 android 工程模版,所以,需要使用如下的命令建立安裝依賴,然後再安裝android和ios的工程模板。

npm install

安裝 weex 應用模版

安裝 weex 應用模版的模板命令如下,模版會被安裝到platforms目錄下。ios平台的安裝命令如下:

weexpack platform add ios

android平台的安裝命令如下:

weexpack platform add android

安裝完成之後,會在platforms目錄下看到如下的目錄結構:

├── platforms

│ ├── ios

│ └── android

編寫hello word程式

開啟/src/index.vue的檔案,並將預設內容替換為如下的**:

.title

.logo

.desc

export default {

data: {

logourl: '',

target: 'world'

methods: {

update: function (e) {

this.target = 'weex'

console.log('target:', this.target)

執行對於web平台,執行如下的命令:

npm run build

npm run dev & npm run serve

或者使用如下命令執行單頁除錯:

weex src/index.vue

真機和虛擬機器執行

使用xcode開啟weex專案的ios目錄,如下圖所示:

開啟後簡單的簡單點配置下基本配置,如專案名、識別符、版本、開發者等資訊。

你可以選擇虛擬機器或者真機執行ios專案,不過執行前你要保證**是最新打包的,打包的命令如下:

weex build ios

然後選擇真機或者模擬器執行即可。

WEEX 環境安裝

weex是阿里開源的一套構建跨平台的移動框架。對於前端的同學,最直觀的是web components的開發方式 對於native同學,可以理解為使用web的開發方式構建跨平台移動程式 ios android 可以模擬的是react native,但是相對react native更為徹底 不僅統一了 ...

weex安裝環境

weex是阿里開源的一套構建跨平台的移動框架。對於前端的同學,最直觀的是web components的開發方式 對於native同學,可以理解為使用web的開發方式構建跨平台移動程式 ios android 可以模擬的是react native,但是相對react native更為徹底 不僅統一了 ...

weex安裝環境 Weex 入門 1 環境安裝

1.安裝 weexpack 是面向整個weex專案的管理工具,容易跟 weex init混淆,weex init 適用更簡單的情景。npm install g weexpack 建立 weex hello例子 weexpack create helloweex cd helloweex npm in...