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

相关推荐
狼性书生10 小时前
uniapp实现的简约美观的星级评分组件
前端·uni-app·vue·组件
Jiaberrr17 小时前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活
不老刘17 小时前
uniapp+vue3实现CK通信协议(基于jjc-tcpTools)
前端·javascript·uni-app
疯狂的沙粒19 小时前
uni-app 如何实现选择和上传非图像、视频文件?
前端·javascript·uni-app
^Rocky19 小时前
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
uni-app·腾讯云·媒体
$程19 小时前
Uniapp 二维码生成与解析完整教程
前端·uni-app
tryCbest19 小时前
UniApp系列
uni-app·web
iOS阿玮21 小时前
社交的本质是价值交换,请不要浪费别人的时间。
uni-app·app·apple
monika_yu21 小时前
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uni-app
大阳光男孩1 天前
Vue3 + UniApp 蓝牙连接与数据发送(稳定版)
uni-app