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

相关推荐
骨子里的偏爱4 小时前
uniapp实现数据存储到本地文件,除非卸载app,否则数据一直存在
javascript·chrome·uni-app
_Jyann_7 小时前
uniapp两种方式实现自定义tabbar
前端·javascript·uni-app
郑州光合科技余经理7 小时前
PHP技术栈:上门系统海外版开发与源码解析
java·开发语言·javascript·git·uni-app·php·uniapp
2501_915921438 小时前
Fiddler抓包工具详解,HTTPHTTPS调试、代理配置与接口分析实战教程
服务器·ios·小程序·fiddler·uni-app·php·webview
undsky8 小时前
【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案
前端·uni-app
diygwcom8 小时前
UniApp 鸿蒙NEXT蓝牙连接及数据写入
华为·uni-app·harmonyos
00后程序员张9 小时前
数据流抓包实战指南,TCPUDP 流量分析、HTTPS 解密与多工具协同方案
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921439 小时前
iOS 性能分析工具全景解析,构建从底层诊断到真机监控的多层级性能分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_915909069 小时前
如何防止 IPA 被反编译,从攻防视角构建一套真正有效的 iOS 成品保护体系
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160074710 小时前
专业的 IPA 处理工具 构建可维护、可回滚的 iOS 成品加工与加固流水线
android·ios·小程序·https·uni-app·iphone·webview