Weex開發APP之環境搭建和建立專案

2021-09-09 05:45:49 字數 1379 閱讀 5122

專案啟動之初我們公司邀請了weex方面的專家來給我們培訓weex相關技術,我們大概跟著邊學邊做了乙個多星期就基本能自己開發weex的介面了,不過後面遇到一些問題(主要是涉及的原生功能或者原生擴充套件的)還需要大神幫忙解決。當時雖然我是有android原生開發的基礎的,但是畢竟經驗不足,當時是請的專業的android和ios的原生開發人員為我們提供原生方面的支援。

我們之前使用weex開發的專案都是使用的weexplus,weexplus是乙個由weex開發大神封裝的weex二次開發的腳手架,作者已經在github上開源出來,在weex的基礎上新增了很多的module和component,很大程度上提高了開發效率。還提供了介面預載入的能力,優化了weex介面載入會有乙個短暫白屏的問題。在使用weexplus的過程中通過閱讀其原始碼和理解其設計思路,對weex框架有了一定程度的理解,在這裡表示感謝=。=。

前言有點多了,接下來進入正題,首先我們按照weex官方教程搭建weex開發的環境。

安裝完成後在終端輸入如下命令驗證:

$ node -v

v6.11.3

$ npm -v

3.10.10

安裝weex官方提供的weex-toolkit腳手架,執行如下命令進行安裝:

$ npm install -g weex-toolkit

$ weex -v //檢視當前weex版本

接下來使用weex-toolkit建立weex專案

$ weex create weex-project
執行此命令後我們實際上也安裝了weexpack工具

執行weexpack platform add android/ios  新增android和ios的模板專案

package.json中,已經配置好了幾個常用的 npm script,分別是:

build: 原始碼打包,生成 js bundle

dev: webpack watch 模式,方便開發

serve: 開啟hotreload伺服器,**改動的將會實時同步到網頁中

在執行npm run dev和npm run serve之前需要先執行npm install安裝weex開發所需的依賴。

之後執行根目錄下的npm run dev & npm run serve開啟 watch 模式和靜態伺服器。

然後我們開啟瀏覽器,進入http://localhost:8080/index.html即可看到 weex h5 頁面。

也可以使用打包的android專案掃碼檢視原生介面效果。

我的開源weex專案  ,更加方便易用。

WEEX開發環境搭建

本文的主要目的是介紹weex開發環境的搭建。環境基於windows.如果是mac或linux方法有一些不同,本文不在介紹。具體參考weex快速上手.1.安裝node.js環境.weex專案的部署需要用到node.js的npm node.js的包管理工具package manager 檢視是否安裝成功...

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