H5前端如何搭建自己的Hybrid環境


Hybrid App是目前移動開發人員的首選平台,在前端開發過程中,能夠同時采用網頁語言和程序語言兩種進行開發,兼具Native App和Web App的諸多優點,大大降低了開發成本和難度,目前很多大型互聯網公司都在采用Hybrid App開發模式,例如:百度、網易等。

下面愛創課堂馬老師為大家介紹一下如何搭建自己的Hybrid環境,今天內容面向大多非Mac平台,所以把android作為‘Hybrid App’基礎。

准備window系統

1.安裝JDK 1.8+,並配置環境變量:

1) JAVA_HOME=你的java安裝目錄。

2) path += ‘%JAVA_HOME%\\bin’(追加bin目錄作到PATH環境變量)。

2.安裝Android Studio2.0+, 安裝Android SKD,配置環境變量:

1) ANDROID_HOME=你sdk所在目錄。

2) path += ‘%JAVA_HOME%\\platform-tools ’(追加platform-tools 目錄作到PATH環境變量)。

3、安裝Python

從官網下載並安裝python 2.7.x(3.x版本不行)

4、安裝node.js

從官網下載node.js的官方6.2版本或更高版本。

設置淘寶鏡像(或購買代理)

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

5、安裝react-native命令行工具

npm install -g react-native-cli

6、創建項目

進入你的工作目錄,運行

react-native init RN

7、在RN目錄下,確保有按照package.json安裝依賴

8、在Android Studio中導入項目的android文件夾

9、安裝Genymotion android模擬器

1) 打開官網

2) 注冊個人賬號

3) 安裝模擬器和虛擬機打包版

4) 安裝Android虛擬機鏡像(≥API23)

5)配置adb環境

10、在Android Studio的設置下,安裝genymotion插件

並配置genymotion插件指向模擬器安裝目錄

11、 運行react-native項目

CMD: react-native run-android

首次運行需要等待數分鍾並從網上下載gradle依賴。(這個過程屏幕上可能出現很多小數點,表示下載進度。這個時間可能耗時很久,也可能會不停報錯鏈接超時、連接中斷等等——取決於你的網絡狀況。所以要下載成功,請確保網絡通暢(必要時也可以翻牆)【這里也可以直接手動把下載好的依賴包,拷貝到gradle的環境目錄

C:\\Users\\Sirius\\.gradle\\wrapper\\dists\\gradle-2.14.1-all\\8bnwg5hd3w55iofp58khbp6yv目錄下,但不要解壓!!(等待運行自動解壓,大概要10分鍾)】

如果出現找不到tool.jar相關錯誤

org.gradle.java.home=C:\\\\Sirius\\\\devSoft\\\\Java\\\\jdk1.8.0_31

12、運行packager

react-native start

可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本(看到很長的js代碼就對了)。第一次訪問大概需要十幾秒,並且在packager的命令行可以看到類似[====]的進度條。

如果你遇到了ERROR Watcher took too long to load的報錯,請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,將其中的MAX_WAIT_TIME 從25000改為更大的值(單位是毫秒)

如果啟動后報地址不對,那么可能是node_modules安裝問題,把之前的cnmp修改為npm來安裝

Android模擬器運行

1、在Android Studio中,啟動虛擬機

2、運行到服務器

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM