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...