【踩坑】uni-app使用踩坑总结
最近在重构公司的小程序，用的框架是uni-app，记录一下使用中的一些踩坑点
check-group组件在百度小程序中的问题
在项目中有用到 checkbox-group 这个组件，这个组件在百度小程序里的问题比较多，已知的有：
-
重新渲染
checkbox-group的数据时会多次触发表单的change事件如图所示：
图片
只要一重新赋值就会触发
change事件，微信小程序不会有这种情况。 -
重新赋值时表单会带上上一次表单选择的值
还是看上图所示： 本来是只有
1-6的，重新赋值后变为1-12了，把上一次里的值也带进去了。 -
百度小程序选择其中一个
checkbox后所有checkbox的checked会变为false这个在我做的demo里没有复现，但在项目中是确实存在的，不清楚在什么条件下才会复现，先记录下
-
如果值类型是Number类型的话，选择表单后返回的值在微信小程序里为String类型，在百度小程序里则还是Number类型
如下图所示：
百度小程序结果
微信小程序结果
这个其实不算百度小程序的问题，百度小程序能正常返回值类型，而微信小程序是直接把值转为String类型了，这样在进行比较的时候比如用
indexOf()时会有一些问题
解决方案：
这个在之前做百度小程序的时候就发现了，当时是用原生开发的，所以直接做了兼容处理，但现在要一码多端，如果单独针对百度小程序进行兼容的话后期也不太好维护，所以就放弃使用这个组件，改用 view 布局加 js 的方式实现所需逻辑以此来方便对其它端的兼容。
数组更新时，如果新数组比旧数组少的时候lenght的值可以更新到，如果新数组比旧数组多了则不能更新到
比方说这里有三个数组
let arr = [
{
lang: 'javascript'
},
{
lang: 'css'
},
{
lang: 'wxml'
}
];
let arr1 = [
{
lang: 'javascript'
},
{
lang: 'css'
}
];
let arr2 = [
{
lang: 'javascript'
},
{
lang: 'css'
},
{
lang: 'wxml'
},
{
lang: 'wxss'
}
];
arr 是页面上要显示的，它的长度是3，如果把 arr1 赋值给 arr 的话是正常的，长度会变成2， 但是把 arr2 赋值给 arr 的话就有问题了，内容可以正常更新，但是它的 length 值还是上一次显示的2，说明只更新了内容而长度值没有更新到，这样我们在页面根据数组的长度进行判断做一些处理的话就会出现问题了。
这个问题我猜想是跟vue有关，毕竟uni-app也是基于vue的，所以我查了一下vue文档，找到了 https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 中的第2点，官网给出的解决方案是使用Vue.set()方法 ，不过有一个限制，不能是 Vue 实例，或者 Vue 实例的根数据对象，由于我在项目中用到这个值刚好是根数据对象，所以这个方法我试了一下没用，最后的解决方案是将长度用另一个单独的值进行赋值。
navigator样式问题
image
如果直接选择navigator设置标签在百度小程序中是无效的，编译出来是以swan-nav的形式存在的，所以要给navigator设置样式的话建议设置一个类名
尽量少用block标签
如果可以在原标签上进行for循环或if判断的尽量不要在外层再套一层block，因为编译之后uni-app会自动在外层套一层block，如果再套一层的话编译之后就变成两层了，会增加不必要的代码量
不能编译<i>标签
<i></i> 标签编译出来会转为 <view></view> 标签，有使用到的要注意下样式
为input赋值时如果值跟上次赋值一样不会触发页面更新
在页面里有一个输入框，它会根据输入的内容进行正则判断从而返回符合要求的值，在uni-app里发现如果返回的值跟上次的值是一样的不会触发页面更新，比如你输入5.922，它会返回5.92，但是如果你再继续在5.92后输入的话比如5.923，它还是返回5.92，跟上次一样所以不会触发更新，因此输入框里显示的还是5.923，不符合提交要求。
image
发现在vue里也有这个问题，但是vue可以通过绑定v-model解决，uni-app试了v-model发现没效果，目前的解决方案是在输入时先清空原来的值再设置一个定时器去再次更新，大概如下：
this.inputVal = '';
setTimeOut(_ => {
this.inputVal = newVal;
},0)
最终效果如下：
image
页面结构化数据
wx:scope-data 是微信小程序搜索SEO能力提供的结构化数据格式，使用方式如下:
<view class="layout_a" wx:scope-data="{{...articleobjforwx}}">
如果在uni-app中则写法如下
<view class="layout_a" :wx:scope-data="'{{...articleobjforwx}}'">
注意 {{...articleobjforwx}} 外面还有一对单引号 '' ，这样才能保证编译出来的跟前面保持一致，一开始我用了这种写法 :wx:scope-data="articleobjforwx" 编译出来的结果是下面这种格式的
<view class="layout_a" wx:scope-data="{{articleobjforwx}}">
双括号内少了前面三个点，微信小程序识别不到数据，所以我才使用上面的方法，用单引号把整个内容包起来当做一个字符串，这样编译出来就跟微信要求的格式一样了。
总结
uni-app虽然好用，但是要注意的点还蛮多的，毕竟各个平台都有差异，想要完全兼容是不太可能的，这就需要我们对各个平台的小程序比较熟悉，出现问题能及时找到原因并解决。
