uni-app网络请求封装_Jeecg-Uniapp 移动框架开发环境搭建——APP方案

第一部分: 开发环境搭建

一、安装开发工具

源码下载: https://github.com/zhangdaiscott/jeecg-uniapp官方IDE地址:  https://www.dcloud.io/hbuilderx.html安装教程: https://www.jianshu.com/p/6f59ad582a96

HBuilderX是通用的前端开发工具,但为uni-app制成特别强化。下载App开发版,可开箱即用;如下载标准版,在运行或发行uni-app时,会提示安装uni-app插件,插件下载完成后方可使用。

二、项目

1、使用HBuilderX导入项目

(1)前端工程jeecg-boot-uniapp(2)HBuilderX打开项目

b49e23116afe289177334bb3927f0e9f.png
756d797b986e976e0692e3bfedd194d0.png
2、运行uni-app

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

467bfb5ee1b93e13bede5fa8f7688b57.png

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

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

3f36c154fe49e629f79674db5737dede.png

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

cfde3eb9422c717c58f3475ff19b9b65.png
4bbc3848f5d7422dd491a81e44da4042.png

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

4c1e2c69f74fb8a6b2b673c875dd4fdc.gif

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

01c4ed975449ecb8b2b3a9071d65d7ea.png

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

c27c73200bcf367d94d6b948530a4159.png

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值