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这种方式,因为说实话有点麻烦

相关推荐
狂团商城小师妹8 小时前
经销商订货管理系统小程序PHP+uniapp
微信·微信小程序·小程序·uni-app·php·微信公众平台
Bingo_BIG12 小时前
uni-app自动升级功能
前端·javascript·uni-app·移动端开发
承前智14 小时前
基于Hbuilder X的uni-app连接OneNET云平台及AI交互 实战指南(二)——获取数据流模型的数据
uni-app·交互
蛋 卷1 天前
uni-app页面怎么设计更美观
uni-app
Dashingl1 天前
uni-app AES 加密
android·javascript·uni-app
HWT?1 天前
uni-app前端处理瀑布流V2写法
uni-app
专业系统开发老赵1 天前
[特殊字符]《多商户家政系统技术解析:SpringBoot+MyBatisPlus+UniApp高效实战指南》
spring boot·后端·uni-app
wocwin1 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
承前智2 天前
基于Hbuilder X的uni-app连接OneNET云平台及AI交互 实战指南(三)——命令下发
uni-app·交互
十八朵郁金香2 天前
【Uni-App】嵌入悬浮球全局组件的详细教程和防踩坑点
uni-app