開發環境搭建

• 開發環境搭建
  • 第一部分： 開發環境搭建
    • 一、安裝開發工具
    • 二、項目
      • 1、使用HBuilderX導入項目
      • 2、運行uni-app

第一部分： 開發環境搭建

一、安裝開發工具

源碼下載：?https://github.com/zhangdaiscott/jeecg-uniapp

安裝HBuilderX 官方下載地址【官方IDE載地址】
安裝教程【安裝教程】
HBuilderX是通用的前端開發工具，但為uni-app制成特別強化。
下載App開發版，可開箱即用；如下載標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。

二、項目

1、使用HBuilderX導入項目

（1）前端工程jeecg-boot-uniapp
（2）HBuilderX打開項目

2、運行uni-app

1.瀏覽器運行：進入jeecg-boot-uniapp項目，點擊工具欄的運行->運行到瀏覽器->選擇瀏覽器，即可在瀏覽器里面體驗uni-appH5版。

H5在開發環節，運行到外部瀏覽器可能會出現跨域的問題。
如果遇到跨域造成js無法聯網，注意網絡請求（request、uploadFile、downloadFile等）在瀏覽器存在跨域限制，解決方案有詳見：https://ask.dcloud.net.cn/article/35267。

如果只是開發調試可以使用內置瀏覽器，沒有跨域等的問題，首次使用內置瀏覽器可能會提示下載，運行成功后，可以在右側看到相應的頁面。

2.在微信開發者工具里運行：進入jeecg-boot-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->微信開發者工具，即可在微信開發者工具里面體驗jeecg-boot-uniapp項目


注意：如果是第一次使用，需要先配置小程序ide的相關路徑（見下圖），才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可以看到實時的效果。uni-app或將項目編譯到根目錄的unpackage目錄。

3.真機運行：連接手機，開啟USB調試，進入jeecg-boot-uniapp項目，點擊工具欄的運行->真機運行->選擇運行的設備，即可在該設備里面體驗uni-app。

運行成功后可在手機上看到頁面

如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。注意當前開發App也需要安裝微信開發者工具。

總結

以上是生活随笔為你收集整理的Jeecg-Uniapp 移动框架开发环境搭建—— APP解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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