【小结】uni-app遇到的几个小问题

一、开发调试下，HTTP请求跨域问题

【问题描述】

1、uni-app开发调试端口为9090

2、这时请求后端接口（http://localhost:18080）就会出现跨域问题

 【解决方案】

        配置代理！

1、修改开发调试下的http请求接口为：http://localhost:9090/api（以 /api 为代理转发前缀）

2、打开manifest.json，在源码视图下添加以下配置（将 /api 前缀请求代理转发至后端接口）

二、H5打包，图标不能正确显示问题

【问题描述】

1、iconfont的引入方式如下，在开发调试下字体正常显示

 2、部署运行，字体无法正确显示

【解决方案】

        静态资源引用问题！

1、H5运行url为http://xxx.com/h5/，manifest.json的h5配置如下：

 2、将url修改为相对路径引入即可

3、开发和运行环境下显示正常

 

三、详情页onLoad方法不执行问题 

【问题描述】

1、从列表页进入详情页

2、列表页的onLoad方法正常执行，详情页的onLoad方法不执行

【解决方案】

1、这跟uni-app的页面生命周期相关，onLoad方法属于uni-app的页面生命周期函数，当从列表进入详情页面时并非创建一个新页面，而是初始化一个子组件，因此不触发onLoad方法！

关于uni-app页面生命周期函数：页面简介 | uni-app官网

2、可以使用vue组件的生命周期函数

 

四、返回上一页，数据不刷新问题

【问题描述】

1、从列表进入详情页面编辑数据，保存返回列表

2、列表onLoad代码如下，列表页面数据不刷新

 

【解决方案】

        这个问题其实跟上一个问题的原因其实是一样的！onLoad方法仅当在页面加载时触发一次，当从详情页面（子组件）返回列表时，页面并没有重新加载，因此onLoad方法不会触发！

1、列表页面增加一个刷新数据的监听事件

2、详情页面在返回列表时发布刷新数据事件

 五、微信小程序获取路由参数报错问题

【问题描述】

1、详情页面获取列表的路由传参，在H5下正常

2、在微信小程序下报错，无法正确获取路由传参

【解决方案】

1、通过uni-app提供的getCurrentPages方法获取路由参数id

 2、获取路由参数id

 六、微信小程序启用组件按需注入失败问题

【问题描述】

1、上传微信小程序时，提示如下：

【解决方案】

1、修改app.json，添加lazyCodeLoading配置如下：

2、再次上传，问题解决！