Jeecg-Uniapp 移動框架開發(fā)環(huán)境搭建——APP方案(uniapp ui框架)
第一部分: 開發(fā)環(huán)境搭建
一、安裝開發(fā)工具
源碼下載: https://github.com/zhangdaiscott/jeecg-uniapp官方IDE地址: https://www.dcloud.io/hbuilderx.html安裝教程: https://www.jianshu.com/p/6f59ad582a96
HBuilderX是通用的前端開發(fā)工具,但為uni-app制成特別強化。下載App開發(fā)版,可開箱即用;如下載標準版,在運行或發(fā)行uni-app時,會提示安裝uni-app插件,插件下載完成后方可使用。
二、項目
1、使用HBuilderX導(dǎo)入項目
(1)前端工程jeecg-boot-uniapp(2)HBuilderX打開項目
2、運行uni-app
1.瀏覽器運行:進入jeecg-boot-uniapp項目,點擊工具欄的運行->運行到瀏覽器->選擇瀏覽器,即可在瀏覽器里面體驗uni-appH5版。
H5在開發(fā)環(huán)節(jié),運行到外部瀏覽器可能會出現(xiàn)跨域的問題。如果遇到跨域造成js無法聯(lián)網(wǎng),注意網(wǎng)絡(luò)請求(request、uploadFile、downloadFile等)在瀏覽器存在跨域限制,解決方案有詳見:https://ask.dcloud.net.cn/article/35267。
如果只是開發(fā)調(diào)試可以使用內(nèi)置瀏覽器,沒有跨域等的問題,首次使用內(nèi)置瀏覽器可能會提示下載,運行成功后,可以在右側(cè)看到相應(yīng)的頁面。
2.在微信開發(fā)者工具里運行:進入jeecg-boot-uniapp項目,點擊工具欄的運行->運行到小程序模擬器->微信開發(fā)者工具,即可在微信開發(fā)者工具里面體驗jeecg-boot-uniapp項目
注意:如果是第一次使用,需要先配置小程序ide的相關(guān)路徑(見下圖),才能運行成功。如下圖,需在輸入框輸入微信開發(fā)者工具的安裝路徑。若HBuilderX不能正常啟動微信開發(fā)者工具,需要開發(fā)者手動啟動,然后將uni-app生成小程序工程的路徑復(fù)制到微信開發(fā)者工具里面,在HBuilderX里面開發(fā),在微信開發(fā)者工具里面就可以看到實時的效果。uni-app或?qū)㈨椖烤幾g到根目錄的unpackage目錄。
3.真機運行:連接手機,開啟USB調(diào)試,進入jeecg-boot-uniapp項目,點擊工具欄的運行->真機運行->選擇運行的設(shè)備,即可在該設(shè)備里面體驗uni-app。
運行成功后可在手機上看到頁面
如手機無法識別,請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。注意當前開發(fā)App也需要安裝微信開發(fā)者工具。