分享下uniapp的踩坑体验

近期公司有个需求,需要开发一个h5页面内嵌到别的部门的app中,h5中需要集成pc端的一些功能,

由于pc端使用vue开发的,所以h5选型是自然考虑了unaipp(别问,问就是没工期,急着要),于是笔者第一次尝试uniapp,之前当然也开发过小程序app,不过基本是使用taro和小程序原生,不过尝试uniapp时候还是遇到了不少坑,下面就和大家总结分享下,

地图的适配

之前pc端是集成高德地图,本来想着搬过来直接用,毕竟都是js,但是没想到高德如果放在h5,会无法实现缩放,并且配置高德地图需要配置秘钥,部门提供的只有之前的key,账号早已无处可循,

最后选择使用uni的内置map组件,可是这又出现了很多问题,

1. Map load failed 这个问题一般是秘钥不正确,需要重新在manifest.json中配置

2. 配置好秘钥后仍然报错,需要配置秘钥代理地址

路由的跳转

uniapp的路由是配置在pages.json中的,跳转时候一般使用uni.navigateTo,参数url为pages.json配置的路径前需要加/

打包部署

1. 首先需要注册dc cloud账号,并认证授权

2. 新建的项目需要有appId,如果没有需要新建并获取一个

3. 打包后的路径和常规的webpack不同,uni打包为h5的默认路径是unpackage/dist/build/web/index.html(后端配置nginx时候要注意首页的位置)

跨域代理

这块我使用的是沿用pc端的axios,但是发现uni并没有提供类似vue.config.js中配置代理的地方,查看了uni官方的文档发现,uni内置的请求模块是实现了跨域,而我们使用axios这种第三方库,只能自己配置baseUrl,并且配置的就是开发环境的网址和端口