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

相关推荐
华玥作者41 分钟前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang1 小时前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008892 小时前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW19 小时前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz24685920 小时前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs1 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人61 天前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
PedroQue993 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue993 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
CHB5 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app