记录uniapp使用uView组件遇到的问题

先记录一下，后续更新！！！

1、出现Cannot read properties of undefined (reading 'setRules')问题：

a方案：在onReady生命周期调用组件的setRules方法绑定验证规则

	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}

b方案：如果已经绑定验证规则还是报错，那就检查是不是在页面使用了v-if，把它改为v-show就可以解决了 

c方案：如果你使用的表单是嵌套在popup或者modal里面的时候，这时候表单的元素display为none，所以在onReady里面设置是无效的。应该监听控制表单出现的属性，并利用nextTrick在里面设置规则（亲测有效）：

<u-popup :show="approvalShow" mode="center" :round="10" closeOnClickOverlay @close="approvalShow = false">
   	<view class="approval-popup">
		<u--form
			labelPosition="left"
			:model="approvalForm"
	        :rules="approvalRules"
	        ref="approvaForm"
	     >
         ......
        </u--form>
	</view>
</u-popup>

		  watch: {
		    approvalShow(newVal) {
		      if(newVal){
				  this.$nextTick(() => {
				    this.$refs.approvaForm.setRules(this.approvalRules)
				  });
			  }
		    }
		  },

参考文章：uniapp uview form组件setRules_uview-plus的form表单setrules-CSDN博客

2、this.$refs.uForm.validate不生效

a方案：检查页面是否存在不需要验证规则的prop，把它们去掉再尝试提交，如下在页面prop="password"，但rules规则里没有出现password：

<u-form-item label="密码:" label-width="140" prop="password" :border-bottom="false">
  <u-input v-model="form.password" type="number" placeholder="请输入密码" border="true" border-color="#4692ef" />
</u-form-item>

rules: {
  userName: [{
	 required: true,
	 message: '请输入用户名',
	 trigger: ['change', 'blur'],
	}]
}

 b方案：检查使用的uView版本，注意区分：

1.X使用的是：this.$refs.uForm.validate(valid => {})

2.X使用的是：this.$refs.uForm.validate().then(res => {}).catch(errors => {})

3、使用底部导航栏u-tabbar时，运行到微信小程序时选中的tab图片和文字不会高亮（这个错误显得我很傻诶...）

错误代码：因为是自定义的图标但是这里没有配置，而且value并不是使用标签名称name的值匹配的方式

		<view class="tabBar_css">
			<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" >
				<u-tabbar-item v-for="(item,index) in tabBarList" :key="index" :text="item.text"
					:name="item.pagePath" @click="click_page(item)">
				</u-tabbar-item>
			</u-tabbar>
		</view>

正确代码： 

		<view class="tabBar_css">
			<u-tabbar
			 :value="value" 
			 :fixed="true" 
			 :placeholder="true"
			 :safeAreaInsetBottom="true"
			 active-color="#FA5151">
				<u-tabbar-item v-for="(item,index) in tabBarList" :key="index" :text="item.text"
					 @click="click_page(item)">
					 		<image
					 			class="slot-img"
					 			slot="active-icon"
					 			:src="item.selectedIconPath"
					 		></image>
					 		<image
					 			class="slot-img"
					 			slot="inactive-icon"
					 			:src="item.iconPath"
					 		></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>