WEEX開發環境搭建

2021-08-15 10:33:12 字數 2769 閱讀 3220

本文的主要目的是介紹weex開發環境的搭建。環境基於windows.如果是mac或linux方法有一些不同,本文不在介紹。具體參考weex快速上手.

1.安裝node.js環境.weex專案的部署需要用到node.js的npm(node.js的包管理工具package manager)

檢視是否安裝成功

注意:在windows上安裝時務必選擇全部元件,包括勾選add to path.

2.安裝weex-toolkit.方式一: 對於npm訪問正常的可以直接使用npm安裝。

方式二:對於國內訪問npm比較慢的使用者可以使用**的cnpm進行安裝。

方式一:

npm install -g weex-toolkit
方式二:

檢視安裝版本

此時我們已經完成了環境的搭建。

weex公升級後,生成js bundle的方法不一樣。隨著weex的版本更新,強烈建議公升級到最新版本。如果你的weex版本小於1.2可以參考第二部分的教程。

有兩種方法,建議使用方法一

方法一:覆蓋安裝。直接重新安裝weex,這樣會覆蓋安裝,得到的就是最新的版本。

weex覆蓋安裝

方法二:更新安裝

weex update weex-devtool@latest

//@後標註版本後,latest表示最新。

但是我用這種方法沒有安裝成功。使用方法一成功了。

最後,輸入 「weex -v」,檢視是否安裝成功。

weex公升級提示

當weex元件有新版本的時候,在我們建立專案時會有提醒。

出現此提示,說明weexpack需要公升級

按照提示的指令公升級到最新的weex,這裡我們執行

weex update [email protected]
1.建立工程使用weex create 命令

weex create learn-weex-fifth
新版本的的weex會預設執行 npm install,如果你執行預設操作,就可以繼續執行了,否則需要切換到工作目錄cd ***x,安裝專案依賴npm install.

2.打包jsbundle,並執行

執行npm start會編譯生成jsbundle, 並執行server,並預設執行web preview. jsbundle生成目錄,當前dist目錄下。

執行npm start

說明:

如上圖:server 的h5訪問通過:

jsbundle 目錄在當前dist目錄下。通過客戶端weex playground訪問 就可以看到weex效果了。(可通過掃碼的方式)

playgrond預設效果圖

1.建立工程

weex create oneproject

2.安裝專案依賴

切換進工程目錄,執行npm install命令。

cd oneproject

npm install

3.打包jsbundle,並執行

weex src\index.vue
編譯打包jsbundle,命令執行後會自動執行weex server,可以看到執行效果了

說明:

如上圖:server 的h5訪問通過:

jsbundle 目錄在上圖紅框標註的「.weex_tmp」目錄。其中,index.weex.js檔案就是生成的移動端js可解析檔案。

通過客戶端weex playground訪問 就可以看到weex效果了。(可通過掃碼的方式)

Weex專案環境搭建

官方指導 node.js需要4.0 4.改變原有的環境變數,1 我們要先配置npm的全域性模組的存放路徑以及cache的路徑,例如我希望將以上兩個資料夾放在nodejs的主目錄下,便在nodejs下建立 node global 及 node cache 兩個資料夾,輸入以下命令改變npm配置 1.n...

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

weex簡介 環境搭建 開發weex程式之前,需要先搭建好相關的開發環境,為了同時開發android和ios跨平台應用,你需要一台mac電腦,然後安裝一些必要的軟體。homebrew homebrew是mac系統的包管理器,用於安裝nodejs和一些其他必需的工具軟體。安裝命令如下 usr bin ...

weex開發環境配置

windows系統建議公升級到win10,win8也可以。win7下安裝由於許可權的原因,可能會失敗安裝webpacknpm install webpack gnpm install g weex toolkit安裝weex toolkit,這是官方提供的腳手架命令列工具,你可以使用它進行 weex...