uni-app小程序开发踩坑记录

最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。

uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，

插件：

坑：

1覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。

2小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行 *** 作，此时可以判断appvue中的options，如果按小程序文档中来说当optionsscene === 1038时是小程序跳回来的场景，但是部分手机跳回来是optionsscene为1001，只能将这2种都作为跳转判断的条件。

3小程序跳转回来app中的onshow有时不执行，这个原因暂未找到

4在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom *** 作的，但是无效，可能跟uniAPP不支持dom *** 作有关系，采用定制接入方法一，手动调用。

最近在做一个uniapp的项目的时候，碰到了一个Tab选项卡的需求，我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。

但是很遗憾，我并没有光看就会的本事，本着遇事不决先百度的原则，就在百度找了一篇真实有用，但是有小小bug的，下面是原po地址：

uni-app使用swiper切换页面每个滑块高度自适应

懒得点的可以接着往下看哈，我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图

首先就是Tab选项卡的点击切换块，这里我是用了小程序自带的scroll-view来实现的，同时给该元素添加scroll-into-view属性来实现点击跟踪（其实这效果不是特别好，我期望的效果是点击这个的时候还留点位置给上一个，但是我太菜了加上为了省事所以就直接用这个了）

scroll-into-view的用法可自行查阅官方文档

接着是swiper标签块，这里因为实现都一样，所以我就直接把原博客那边的贴过来了，大家根据自己的需求更改类名及swiper-item内部的组件即可

这里有个注意点，就是要给swiper-item内部的组件(盒子)一个相同的类名，后面获取高度时需要用到。

初始数据方面，这里我也把我的初始数据贴出来，大家根据需求自行修改即可

后面的方法本来想一个个贴的，但是发现好像有点乱，所以就直接全贴出来了，里面的逻辑大伙应该能理清吧哈哈

到这里js部分也结束了，最后是css部分，我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题，也就是

因此大家在初始化css数据的时候需要注意一下，这里我也把我的初始css贴出来，大家根据需求自行修改即可

到这里这一块的内容就全部结束了，噢对了关于setSwiperHeight里面获取dom元素的方法，也就是

unicreateSelectorQuery() 。这玩意说实话我也搞不太懂，总之就跟selectorQuery选择器差不多，CVM大法：复制粘贴，然后修改数据即可。

第一次正经写文还是很紧张的哈哈，希望能帮到有需要的人。谢谢各位

uniapp获取当前页面路径

方式一：

方式二：

用官方已经挂在的 $mp 变量获取

var pages = getCurrentPages() // 获取栈实例

pages是一个数组对象，每个对象里面其实就是已经打开的页面的对象，可以根据pageslength查看跳转级数

应用场景（返回固定页面）：

如果A为根页面，直接使用

其中A页面不是根页面

如图

若从A页面-->B页面-->D页面，从D返回A，只需delta为 2，即

若从A页面-->C页面-->F页面-->G页面-->D页面，从D返回A，需要设置delta: 4，即

使用var pages = getCurrentPages() // 获取所有打开页面，

若A为第三级页面（即从根页面到A页面跳转两次），计算返回级数

这周做一个页面时，有一个人物排序，可以手动拖动更改排序位置的功能。在经过查找之后，找到了

sortablejs ,它可以用来实现这个拖拽的功能。

在查看 sortablejs 官方文档时，看到里面中有一个 onUpdate 事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的index值，通过这个，就可以更改数组的内容，来达到拖拽后改变位置的功能。

这里获取的节点是需要拖拽列表的父节点

因为在做的过程中，发现如果用 *** 作dom节点的位置去修改item的顺序时，会产生bug，所以经过查找资料，终于在 Vue中使用Sortable 找到了问题所在，因此在修改item顺序前，应先修改其对于的节点。

先删除移动的节点，在将移动的节点插入到原有的节点中

注意：因为当从下向上拖动时，节点会增加一个，所以原有的索引值会少一位，所在当 newIndex < oldIndex 时，因使用 oldLi 节点的下一个节点

删除原有数组，并且存储数据

将数据添加到停留的数组索引值上

场景：输入框与发送按钮是兄弟关系。输入框获取焦点时会唤起键盘，点击发送的输入框会失去焦点。

要求：点击发送按钮时，输入框不能失去焦点，键盘一直呈现唤出状态

分析：

当我们点击某一个元素时，这个元素就会默认获取焦点，在上述场景中，输入框在获取焦点时会唤出键盘，但是由于发送按钮与输入框不是同一个Dom元素，所以点击发送按钮时输入框就会失去焦点，发送按钮就会回去焦点，键盘就是收起。

如果阻止点击Dom元素的默认获得焦点这个事情，那么上一个获取焦点的Dom元素就不会失去焦点。也就是输入框不会失去焦点，键盘就不会收起

*** 作：发送按钮的事件用@touchendprevent=“ ”

touchend（触屏事件） prevent（阻止默认事件）

例子：

<view class="send" :class="sendMsgClass" @touchendprevent="sendText">

<view class="btn">发送</view>

</view>

如果分析的不对，请指教

uniapp 中要获取地址 >

以上就是关于uni-app小程序开发踩坑记录全部的内容，包括:uni-app小程序开发踩坑记录、【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡、uniapp 获取当前页面路径等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！