首次使用UniApp及其UI进行小程序开发，记录项目中需要注意事项，方便以后避坑^_^!
1、uni-forms的使用，如果需要自定义校验，uni-forms上不能绑定rules，需要在data中定义rules，然后在onReady中将uni-forms与rules绑定。
<uni-forms ref="valiForm" :modelValue="valiFormData"></uni-forms>
onReady() {this.$refs.valiForm.setRules(this.rules); },
最后，在表单提交方法中关联校验成功或失败的方法：
submit(ref) {this.$refs[ref].validate().then(res => {//校验成功}).catch(err => {//校验失败console.log('err', err);}) },
2、uni-file-picker图片上传的使用，单图片上传，需要对部分属性进行设定，如下：（黄颜色部分需要注意必须保持一致，后台接口需要根据这个字段来获取图片）
<uni-forms-item name="idcardFront">
<input class="uni-input" v-model="valiFormData.idcardFront" placeholder="" v-show="false" />
<uni-file-picker v-model="valiFormData.idFront" limit="1" :imageStyles="imageStyles" file-mediatype="image" return-type="object" file-extname="png,jpg" @select="uploadIdcardFront">
<uni-icons custom-prefix="iconfont" type="icon-xiangji" size="40" class="slot-image"></uni-icons>
</uni-file-picker>
<uni-section class="mb-10" title="身份证正面"></uni-section>
</uni-forms-item>
图片上传方法：（注意：小程序中不支持new FormData()，不能使用传统方法上传，需要遵循小程序中的规则）
uploadIdcardFront(e){const imgUrl = e.tempFilePaths[0];this.valiFormData.idFront = {"name":e.tempFiles[0].name,"extname":e.tempFiles[0].extname,"url":e.tempFiles[0].url,}uni.uploadFile({url: this.uploadURL, // 替换为你的上传API地址filePath: imgUrl, // 附件路径name: 'idcardFront',method: 'post',header: {"X-Access-Token": uni.getStorageSync("token"),"Content-Type": "multipart/form-data",},success: (res) => { //成功回调let name=JSON.parse(res.data).message; // 成功回调返回结果this.$set(this.valiFormData,'idcardFront',name);},fail: (error) => { //失败回调 console.log(error)} }) },
考虑到，新增页面跟编辑页面共用一个页面，编辑时需要数据回显，增加一个监听事件：（后台接口返回的是图片名称而不是图片路径，编辑时图片回显需要前端拼接图片路径，黄颜色部分是必须设置的字段，否则图片不显示）
watch:{'valiFormData.idcardFront':{handler(newVal, oldVal) {if(newVal && this.isEdit){if(newVal.indexOf('https')>-1){const index = newVal.lastIndexOf(".")+1;const nIndex = newVal.lastIndexOf("/")+1;const extname = newVal.substring(index,);const name = newVal.substring(nIndex,);this.valiFormData.idFront = {"name":name,"extname":extname,"url":newVal,}}}}} }
3、列表页中点击多次进入详情页后，点击小程序左上角的回退，会发现需要回退多次才能退出，解决方案：
在添加或编辑页面的表单提交成功的方法中，使用uni.navigateBack跳转对应页面，而不是使用uni.navigateTo跳转
uni.navigateBack({url: '/pages/personal/myCarList/myCarList' });
4、动态标题实现+路由传参
要实现动态标题，首先要注意pages.json文件中，对应页面的navigationBarTitleText需要设置为空，如下：
{"path": "pages/personal/correlateCar/correlateCar","style": {"navigationBarTitleText": "","navigationBarBackgroundColor": "#3B7FFC","navigationBarTextStyle": "#fff"} },
列表页中的点击事件，如下：（参数传递）
addCar(){uni.navigateTo({url: '/pages/personal/correlateCar/correlateCar?key='+encodeURIComponent(JSON.stringify({}))}); }, editCar(car){uni.navigateTo({url: '/pages/personal/correlateCar/correlateCar?key='+encodeURIComponent(JSON.stringify(car))}); },
添加页面或编辑页面中接收参数，如下：
onLoad(option) {let obj = JSON.parse(decodeURIComponent(option.key))if(obj.plateNo) {uni.setNavigationBarTitle({title:"编辑车辆"})this.valiFormData = obj;} else {uni.setNavigationBarTitle({title:"添加车辆"})} },
