uni app跨端开发遇到的问题

技术栈

uni app,vue3,uview puls,map...

nvue

因为项目中有地图,要使用到map标签,所以考虑用原生nvue开发,它是有痛点的,首先浏览器不支持,我是要开发ios和Android,所以只能在模拟器上运行,模拟器上就没法查看元素了啊,可想而知;其次nvue的支持性本来就不好,很多样式根本不支持,这对于前端来说是痛苦的,所以该总结也尤为重要,可以规避很多问题及无厘头的查找原因。

能省则省,别人总结的我就不写了

1、nvue页面用法uniapp

2、因为uni是跨端,所以跟小程序也有很多相似的通病:小程序开发中遇到的问题,不过这个是我很早之前写的了,不完善

其它我遇到的:

1、图片要用image标签不是img(android没问题,ios就较真了),宽高都要设置,因为有默认的宽高,不能自适应。

2、up-button背景色要在元素上设置color属性(支持渐变),需要设置宽度

3、flex布局必须加flex-direction: row;

4、up-modal下面包的内容一级view class必须是slot-content,不包或者不叫slot-content,

下面元素的样式将不会生效(有class也不行),slot-content的宽度需要有文字(text)长度撑开,

如果没有文案宽度将没有,其他元素比如up-button宽度设置也无效,宽度不够元素还会换行。

5、map在真机上渲染不出来,首先最主要的原因是配置没有选Maps,其次模拟器我没有自定义基座,所以你用自定义基座的话模拟器也出不来,更有利发现和解决问题

6、横向超屏滚动

我有一个数组,需要遍历展示多个,平铺显示,超屏左右滑动

nvue是不支持overflow: scroll的,首先可以借助组件

复制代码
<scroll-view scroll-y="true" :style="{ maxHeight:  'xxrpx' }">
	......
</scroll-view>
// 或者
<swiper autoplay="false" style="height: xxrpx">
	<swiper-item v-for="(item, index) in List" :key="index">
   		 ......
    </swiper-item>
</swiper>			

我还用了一种方法,实现的效果有点复杂,代码也写的复杂,而且这个是我第一次搞,可能实现方式也不好,先不附上了,如果上面的方法不能解决你的问题,可以给我留言试下

ios上架

1、不能上来就让用户授权

本来设置的初始页为首页,但是因为首页有地图,需要获取位置信息,所以一进来就会弹窗询问用户是否允许开启位置信息,这不符合上架条件,所以最后改为登录页为初始页

2、隐私政策、服务协议

不能少,比如登录的时候:"我已阅读并同意xxxxxx",并且这两个协议需要用iframe嵌套一个地址实现(写一个html,然后发布到服务器,域名就有了),不是写在项目页面里,这个好像是在上架那里也需要把这个地址在那里配置(很多东西项目里配置过这里也要配,具体不清楚,我们是负责人配的),所以要这么弄。

3、登录页要有注册

可以做一个假的,有一个接口控制注册是否显示,当在审核过程中注册显示,当审核通过注册隐藏。

4、还有两条我在HbuilderX的使用讲到,截个图

其他

1、接口跨域

虽然是app项目,但我开始是在浏览器上运行(因为好调样式),但是接口请求跨域了,后面发现需要在模拟器上运行。

当时还遇到接口时好时坏,原来是封装接口的时候timeout设置的时间太短

2、文字转语音

看这篇看这篇:uniapp 播放文字 调用百度文字转语音,并播放

当时我以为这个很简单,结果找了两天左右吧才实现,主要还是跨端原因吧,反正查的很多方法用到项目里根本用不了,undefined,为此我还下了语音播报插件也没用

后来打算用百度那个,需要生成key的那种方法实现的时候,终于找到了,确实超简单,虽然也是百度,但不用生成key了,为什么我一开始没用key这种方式,因为说实话有点麻烦

相关推荐
小蒜学长12 小时前
基于SpringBoot+uni-app的闪洁家政系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·uni-app·家政服务
anyup_前端梦工厂13 小时前
uni-app 模板 Starter 一键清理 Skill 发布
前端·人工智能·uni-app
anyup_前端梦工厂15 小时前
将uni-app工程迁移uni-app x,AI 能帮我们做什么?
前端·人工智能·uni-app
蒿豪郝灬号18 小时前
UniApp接入鸿蒙版阿里百川
华为·uni-app·harmonyos
2501_915921432 天前
详细教程:使用Perfdog工具测量iOS应用的功耗性能与优化方法
android·macos·ios·小程序·uni-app·cocoa·iphone
梦曦i2 天前
uni-app、uni-app x 与 Flutter 深度对比:2026年跨平台开发框架选型指南
flutter·uni-app·uni-app x
普马萨特3 天前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app
Geek_Vison3 天前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器
郑州光合科技余经理4 天前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程
2501_915909065 天前
iOS应用从开发到上架App Store的完整发布流程与步骤指南
android·ios·小程序·https·uni-app·webview