html5+、ReactNative、Weex、Ionic之間的區(qū)別：

html5+和Ionic： 在開發(fā)原理上基本相同，都是需要先開發(fā)出一個完整的網站，再通過html5+或Ionic提供的打包技術對網站進行打包成移動app，它們實際還是一個網站，并非原生app。

ReactNative和Weex : 在開發(fā)原理上基本一樣，它們不再開發(fā)出一個網站，而是一個模板， 這個模板只是一個半成品，不能被運行在瀏覽器或移動設備上，想要正常運行，那么就得通過ReactNative或Weex提供的命令行打包命令進行打包成原生的Java或oc代碼，注意這里得到的是原生性質的移動app；它們不需要將源代碼推送第三方打包處理，只需要在本地配置相關打包環(huán)境，是比較安全的，因此也是實際開發(fā)中推薦使用的。

本地移動App開發(fā)環(huán)境配置：

配置java環(huán)境：

下載安裝Java jdk : 推薦官網下載，其官網：http://www.oracle.com/，具體步驟如下:

1.進入官網首頁后點擊Products下面的Java，如圖：

2.點擊Java后在彈出的頁面右上角點擊Download Java，如圖：

3.點擊download java后，在彈出的頁面點擊如圖所示位置（強調一下：官方要求使用java SE 8版本）：

4.點擊jdk download后在彈出的頁面底部，找到對應自己電腦系統(tǒng)的文件下載，（這里使用windows介紹），如圖：

5.當點擊上面下載時，可能會要求勾選協(xié)議，勾選后繼續(xù)下載，當下載完成后將文件剪切到C盤中F文件夾下Javajdk文件夾中（推薦放到C盤下，文件夾命名自定義即可），如圖：

6.雙擊打開下載好的javajdk程序，并點下一步，如圖：

7.在彈出的彈框中繼續(xù)點擊下一步（不建議修改默認安裝路徑，且之前文件夾命名不能為中文），如圖：

8.當安裝完成后點擊關閉即可，如圖：

特別提醒：新版本java jdk中沒有包含jre，此時可以以管理員權限打開終端并切換到jdk-16.0.1目錄下后鍵入：bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre 回車即可安裝jre,如圖：

9.配置Java jdk環(huán)境變量,具體步驟如下：

配置path：給系統(tǒng)變量path中添加：%JAVA_HOME%\bin和%JAVA_HOME%\jre\bin如圖：

新增CLASSPATH系統(tǒng)變量，值為：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;，如圖：

10.配置完環(huán)境變量后，繼續(xù)一路確定點擊回去后，在終端鍵入:javac 回車，如果看到以下表示配置成功，如圖：

配置Node.js環(huán)境：

Node.js環(huán)境在前面已經做過介紹且配置過，如果沒有配置且不熟悉配置，可閱讀：https://blog.csdn.net/weixin_46758988/article/details/117109297

確保C++環(huán)境：

系統(tǒng)一般默認自帶C++環(huán)境，后面如果報錯可手動安裝visual studio中的C++環(huán)境。

配置Git環(huán)境：

關于Git的安裝前面也已經介紹過了，如果沒有安裝且不熟悉Git可閱讀：https://blog.csdn.net/weixin_46758988/article/details/116986403

配置Python環(huán)境：

1.進入Python官網:https://www.python.org/,進行下載python-3.9.5-amd64.exe文件（版本可不同），如圖：

2.將下載好的python-3.9.5-amd64.exe應用剪切到C盤下F文件夾python中（推薦放到C盤下），雙擊后在彈出彈框中單擊install now,如圖：

3.在彈出的彈框中選擇如下圖方框單擊后關閉此程序即可，如：

4.在終端輸入py查看python是否安裝成功，如出現(xiàn)如下所示則表示安裝成功，如圖：

配置Android環(huán)境：

1.進入網址：https://developer.android.google.cn/在首頁點擊 下載Android Studio，如圖：

2.在彈出的新頁面點擊如圖所示：

3.勾選用戶協(xié)議后點擊下載適合自己電腦系統(tǒng)的應用，如：

4.將下載好的程序放到C盤F目錄下（建議C盤下，目錄自定義），之后雙擊在彈出的選框中繼續(xù)點擊Next，如圖：

5.繼續(xù)Next，如圖：

6.建議修改路徑后點擊Next，如圖：

注意：這里可能會要求安裝在一個空的文件夾中，因此文件夾中如果有文件，需要從新新建一個文件進行安裝，這里新建為：androidfile(自定義)，之后繼續(xù)安裝。

7.在彈出的選框中默認即可，直接點擊install,如：

8.當進度條完成時，點擊Next,此時會彈出一個詢問是否啟動程序的選擇，可選可不選，選擇則會進入程序，初次安裝建議勾選了解一下，之后點擊Finish,如：

9.如果要啟動程序還會彈出彈框，不導入設置即可，如圖：

10.接下來會配置代理等，如果不知道相關配置可忽略，之后選擇插件進行下載，最終可以看到如下頁面則表示成功，如圖：

安卓配置注意項：

官方對版本有要求，不能使最新版本，具體如下：

1.點擊finish，確保：SDK、Platform、Virtual Device存在。 2.官方要求目前安卓支持Android 10 (Q)版本的 SDK，在android studio中config配置下SDK Manager下Android SDK中找對應的Android 10 (Q)版本下載配置即可。 3.同樣對ReactNative版本也是有要求的，官方要求React Native 所必須的29.0.2版本，其配置方法是：在SDK Tools中找到對應的29.0.2版本的Android SDK Build-Tools安裝即可。 4.在SDK Tools選項卡，點擊NDK (Side by side)，找到20.1.5948944版本進行安裝。 注意：在安裝上面配置時，可以一次性選中相關配置，最后點擊：Apply一次性下載安裝。

5.配置android環(huán)境變量（路徑大概如下）如圖：

6.將一些工具path配置到環(huán)境變量中（%ANDROID_HOME%\platform-tools；%ANDROID_HOME%\emulator；%ANDROID_HOME%\tools；%ANDROID_HOME%\tools\bin），如：

安裝ReactNative(react-native-cli)和yarn:

1.在終端輸入：npm install yarn react-native-cli -g 全局安裝。

2.yarn默認也是從國外服務器下載包的，如果想要用淘寶鏡像，則執(zhí)行以下命令：

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

通過react-native-cli打包一個原生移動app：

通過上面開發(fā)環(huán)境的配置，下面將介紹如何用react-native-cli打包一個原生移動app，其具體步驟如下：

1.在終端輸入：react-native init mytestreact 初始化一個名為mytestreact的項目。2.當終端顯示依賴安裝完成后，繼續(xù)鍵入：npx react-native run-android3.當顯示安裝完成時，將mytestreact項目拖到VScode打開，修改App.js中文本部分來測試使用，App.js就是現(xiàn)在頁面的主文件4.切換到android目錄下，終端繼續(xù)鍵入：./gradlew assembleRelease 打一個android的apk安裝包5.項目中mytestreact\android\app\build\outputs\apk\release下的apk即是打包后的apk應用。

Weex打包：

1.終端輸入：npm install weex-toolkit -g 全局安裝：weex-toolkit腳手架2.終端繼續(xù)鍵入：weex create mytestweex 初始化一個mytestweex的項目3.終端進入項目mytestweex目錄下繼續(xù)鍵入：weex platform add android 如果是創(chuàng)建ios則后面android換ios輸入4.終端繼續(xù)鍵入：npm install 安裝依賴5.終端鍵入：npm run build 構建打包

提示：本文圖片等素材來源于網絡，若有侵權，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的html5+、ReactNative、Weex、Ionic之间的区别、（配置java、python、Android环境）、ReactNative(react-native-cli)、yarn、Weex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。