JeecgUniapp移动框架开发环境搭建——APP解决方案

开发环境搭建

• 开发环境搭建
  • 第一部分&＃xff1a; 开发环境搭建
    • 一、安装开发工具
    • 二、项目
      • 1、使用HBuilderX导入项目
      • 2、运行uni-app

第一部分&＃xff1a; 开发环境搭建

一、安装开发工具

源码下载&＃xff1a; https://github.com/zhangdaiscott/jeecg-uniapp

安装HBuilderX 官方下载地址【官方IDE载地址】
安装教程【安装教程】
HBuilderX是通用的前端开发工具&＃xff0c;但为uni-app制成特别强化。
下载App开发版&＃xff0c;可开箱即用&＃xff1b;如下载标准版&＃xff0c;在运行或发行uni-app时&＃xff0c;会提示安装uni-app插件&＃xff0c;插件下载完成后方可使用。

二、项目

1、使用HBuilderX导入项目

&＃xff08;1&＃xff09;前端工程jeecg-boot-uniapp
&＃xff08;2&＃xff09;HBuilderX打开项目

2、运行uni-app

1.浏览器运行&＃xff1a;进入jeecg-boot-uniapp项目&＃xff0c;点击工具栏的运行->运行到浏览器->选择浏览器&＃xff0c;即可在浏览器里面体验uni-appH5版。

H5在开发环节&＃xff0c;运行到外部浏览器可能会出现跨域的问题。
如果遇到跨域造成js无法联网&＃xff0c;注意网络请求&＃xff08;request、uploadFile、downloadFile等&＃xff09;在浏览器存在跨域限制&＃xff0c;解决方案有详见&＃xff1a;https://ask.dcloud.net.cn/article/35267。

如果只是开发调试可以使用内置浏览器&＃xff0c;没有跨域等的问题&＃xff0c;首次使用内置浏览器可能会提示下载&＃xff0c;运行成功后&＃xff0c;可以在右侧看到相应的页面。

2.在微信开发者工具里运行&＃xff1a;进入jeecg-boot-uniapp项目&＃xff0c;点击工具栏的运行->运行到小程序模拟器->微信开发者工具&＃xff0c;即可在微信开发者工具里面体验jeecg-boot-uniapp项目


注意&＃xff1a;如果是第一次使用&＃xff0c;需要先配置小程序ide的相关路径&＃xff08;见下图&＃xff09;&＃xff0c;才能运行成功。如下图&＃xff0c;需在输入框输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具&＃xff0c;需要开发者手动启动&＃xff0c;然后将uni-app生成小程序工程的路径复制到微信开发者工具里面&＃xff0c;在HBuilderX里面开发&＃xff0c;在微信开发者工具里面就可以看到实时的效果。uni-app或将项目编译到根目录的unpackage目录。

3.真机运行&＃xff1a;连接手机&＃xff0c;开启USB调试&＃xff0c;进入jeecg-boot-uniapp项目&＃xff0c;点击工具栏的运行->真机运行->选择运行的设备&＃xff0c;即可在该设备里面体验uni-app。

运行成功后可在手机上看到页面

如手机无法识别&＃xff0c;请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。注意当前开发App也需要安装微信开发者工具。