新手使用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标签中通过 {{ }} 来调用相应的数值。

---

实现横向滚动问题

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

---

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

1、

使用微信开发者工具的时候出现域名报错问题。
解决方法：
打开微信开发者工具右上角的箭头，进入详情的本地配置，勾选下图相应栏目（不保证能够处理所有域名问题）。

2、

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

---

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

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

---

点击事件注意点

在一个点击事件中，不能写多个方法，下边是错误的

页面通讯

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