新手使用uniapp开发项目遇到的问题总结

tabbar导航栏问题

在写项目的时候前期需求要求底部导航栏中间部分凸起,样式为一个蓝色的圈圈,而原生的uniapp不支持自定义底部导航栏,于是需要进行自定义修改。
解决方法:
在uniapp官网的插件市场中,根据别人写的插件,使用非原生的方式自行实现底部导航栏和页面跳转(此时pages.json对底部导航栏的功能将不再使用)。
实现原理:
将一个需要跳转的页面写成一个组件,当点击导航栏的时候,去判断自定义的底部导航栏index,不同的index,使不同的组件出现或消失。
优点:
可以方便的对底部导航栏进行自定义,不受原生uniapp的约束。
缺点:
在页面跳转的过程中,加载速度没有原生的快。


网格布局问题

在使用官网提供的grid布局组件的时候,实现布局很简单,并且程序在chrome浏览器上显示正常,但是在微信开发者工具上边出现布局问题,查看官网,发现grid布局组件更新之后出现了兼容性问题。
解决方法:
使用colorui组件库中的grid布局实现。


路径跳转出现问题

1、

在使用navigator标签还有uni.navigateTo的时候,页面跳转不成功,pages.json中已经注册过相应页面,没有反应。
解决方法:
在路径前边加上 / 而不使用 …/

2、

自定义底部导航栏,在页面跳转之后,原来没有返回按钮的页面出现了返回按钮。
解决方法:
将跳转方法改为返回方法,即将navigateTo改为navigateBack。


访问后端接口,请求数据

方法:
在js中在钩子函数或者在method中,通过下图的方式访问接口相应方法。fly是封装的接口地址,通过.then来获得请求结果,通过.catch来捕获错误信息。
在这里插入图片描述
获得到相应的res结果集之后,将结果集赋给在data中自己定义的参数,然后就可以在html标签中通过 {{ }} 来调用相应的数值。


实现横向滚动问题

使用<scroll-view></scroll-view>标签想要实现横向滑动的时候,发现当滑动元素的代码结构不同的时候,会出现样式上下对不齐的情况。
解决方法:
设法将代码结构统一,如果统一不了可以使用一些比较粗暴的方法,比如设置一些元素opacity:0,如果有更好的方法不建议使用粗暴方法。
实现横向滑动条件:使用<scroll-view></scroll-view>标签,设置scroll-x = "true",将需要横向滑动的元素添加css属性white-space: nowrap,必要时,可以添加display: inline-block属性。


使用微信开发者工具遇到的问题

1、

使用微信开发者工具的时候出现域名报错问题。
解决方法:
打开微信开发者工具右上角的箭头,进入详情的本地配置,勾选下图相应栏目(不保证能够处理所有域名问题)。
在这里插入图片描述
在这里插入图片描述

2、

使用微信开发者工具的时候报关于静态图片资源没有找到的错误
修改建议:
<image></image>标签中使用src而不是style="background-image:;"


父组件向子组件动态传参问题

动态传参的时候,无法用created生命周期函数从父组件中获得到相关参数。
解决参考地址:点击跳转
总结:
1 使用v-if定义一个flag,初始值为false,在组件参数动态改变的时候,将flag设置为true
2 使用watch监听数据变化


点击事件注意点

在一个点击事件中,不能写多个方法,下边是错误的
在这里插入图片描述

页面通讯

当我们在一个页面请求一个接口,获得到了参数之后,想要将相关信息实时展时到其他页面,或者跳转到其他页面需要刷新时,我们需要使用页面通讯功能,通过页面通讯,一个页面可以给另一个页面发送消息通知,另一个页面在展示的时候会接收到这个消息通知。
举个例子,现在需要先进入一个页面,然后进行一个添加朋友圈的功能,在添加完毕之后跳转出去,需要实时刷新出来新创建的朋友圈,这个时候就需要用到页面通讯。在请求添加朋友圈的接口成功之后,我们使用uni.$emit(‘通知名称’)向外发送一条通知,然后在需要刷新展示的页面使用uni.$on(‘通知名称’)接收,同时写上刷新方法。
接收通知的方法还有uni.$once('通知名称'),这个和uni.$on(‘通知名称’)不同之处在于前者只接收一次通知,后者可以实时接收通知,uni.$off('通知名称')可以对消息通知进行关闭操作。
使用消息通知的时候使用了回调函数。

猜你喜欢

转载自blog.csdn.net/weixin_42880088/article/details/107442841
今日推荐