大家好,感谢邀请,今天来为大家分享一下uni部署到服务器的问题,以及和uni打开页面显示的一些困惑,大家要是还不太明白的话,也没有关系,因为接下来将为大家分享,希望可以帮助到大家,解决大家的问题,下面就开始吧!
一、uni上传图片至服务器,获得在线图片预览(实战)
功能需求:
前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。
思路如下:
前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器在线图片,在浏览器就可以打开访问的那种。然后前端将这个图片渲染在页面进行预览。
首先
我们看一下uni的官方文档:
大概是这样的
先写一个模拟的demo
1:首先我是是用了colorUI的框架,在项目里面引入
在page底下的vue文件引入
这样一来,就不需要写什么样式了,使用写好的就行了。
效果是这样的
每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。
在 chooseImage选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。
若是请求成功
则返回一个图片
添加接口之后的,demo如下:
二、手机息屏了uni还会向服务器传递数据吗
会的。手机息屏了uni还会向服务器传递数据,因为UniApp是一个跨平台的开发框架,允许开发者使用一套代码构建同时运行在多个平台的应用程序,当手机息屏时,应用程序会进入一种低功耗状态,以减少能源消耗,当开发者选择在应用程序处于后台或手机息屏时继续发送请求时,即使手机息屏了uni还会向服务器传递数据。
三、uni发送请求服务器接收不到数据的问题
官网API文档是这样的
方法一:
一般的请求方式
后端接收
方法二:
前端请求是这样的(默认的content-type是lication/json格式),url填你自己的url,后端接口同理
所以后端需要接收json格式的数据,一种形式是利用封装好的实体类进行接收,另一种是利用@RequestBody Map<String,String> map接收,现在采用后面一种形式进行后台数据接收。
这样就能接收到数据了
四、将Hello uniCloud 发布H5到“前端网页托管”
1、用 Hbuilderx创建一个项目:选:uni->Hello uniCloud;
2、关联阿里云服务空间,初始化服务空间;
3、发行->上传网站到服务器
4、打开 uniCloud Web控制台,进行跨域设置
新增域名:
api.bsp.
static-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.bsp.
5、访问: 即可
实际应用:可以使用 uni开发小程序作为前端,连接 uniCloud云服务空间,获取数据;使用 uni-admin开发后台管理程序(H5),发布到云服务空间的“前端网页托管”,就可以实现不用单独申请云主机,使用uniCloud云服务空间实现前后端系统的部署,而且云服务空间提供一定的免费流量,在开发测试阶段使用是完全没有问题的。
五、uni发布H5应用,并在nginx部署
uni发行H5-手机版,官网说的看似简单,按步骤操作下来,打开网页确实白的。一路百度查下来,终于实验成功,在此记录完整步骤如下:
一、HBuilderX配置uni工程,修改manifest.json关于h5的配置,如图:
二、nginx部署
本条默认nginx已经安装配置好
第一步,打开nginx所在目录,把打包好的h5文件放到nginx/html目录下,如图
第二步,在此目录D:\nginx-1.16.1\conf打开nginx.conf,配置好端口号,服务,
location是按照uni官方文档要求配置的
第三步,浏览器打开 访问成功,说明部署成功
六、uni打开页面显示******连接服务器超时***请重试
最近在将公司做的嵌入到统一中,我们以h5的方式打包部署到nginx里面,统一通过nginx来访问我们的,但是在测试的时候,有一个模块打开一直显示--连接服务器超时,请重试
1、首先这个页面是没有问题的,因为本地打包测试都可以进入,后台接口页没问题,但是我在这个功能的时候观察服务器,发现后台并没有调用接口的日志。而是只要是进来就显示--连接服务器超时,请重试
2、在网上搜寻了好久,最后发现可能是缓存的问题,但是我们的在退出的时候会清掉缓存的,然后又陷入沉思。。。。。。
3、最后还是坚信是缓存的问题,因为我们清除的缓存只是我们打包的h5里面用到的缓存,但是我们打包的js文件是缓存在他们统一的里面的。最后才发现他们统一上面是有清除缓存的功能的。。。。。。
关于前端,缓存问题是老生常谈的问题,写前端一年以来,缓存是要时刻考虑到的。切记切记
参考*客: vue打包部署后浏览器缓存问题,导致控制台报错ChunkLoadError: Loading chunk failed的解决方案-码农教程(manongjc.)
七、uni开发的时候别人想要访问怎么办
当你使用UniApp进行开发时,如果其他人想要访问你的应用程序,你可以采取以下措施:
1.发布应用:
将你的UniApp应用程序发布到特定的应用商店或应用分发平台,例如AppStore(iOS)或应用宝(Android)。通过发布应用,其他人可以在其设备上和安装你的应用程序。
2.Web访问:
UniApp支持将应用程序编译为Web应用,你可以将编译后的文件部署到Web服务器上,并提供一个访问给其他人。这样,其他人可以通过浏览器访问你的应用程序,无需和安装任何应用。
3.分享源代码:
如果你愿意,可以与其他人共享你的UniApp源代码。这样,其他人可以将源代码到他们的开发环境中,并自行构建、运行和访问应用程序。
需要注意的是,确保在将应用程序提供给其他人访问之前,仔细考虑和评估隐私和安全问题。如果应用程序涉及敏感数据或需要特定的用户认证,确保采取适当的安全措施和权限控制,以保护用户信息和应用程序的安全。
根据你的需求和开发方案,选择适合的访问方式,以便其他人可以方便地访问和使用你的UniApp应用程序。
以上内容是由猪八戒网精心整理,希望对您有所帮助。