uni-appD4(uni-forms学习与回顾)
2026年1月31日 15:33
1.补充小程序路由跳转方式
·wx.navigateTo: 按照顺序向页面栈中放入打开过的页面
·wx.redierctTo: 先把上一个页面删掉,再把自己页面放入栈内
![]()
·wx.reLaunch: 清空页面栈
![]()
2. uni-file-picker:实现文件上传功能
2.1 开通uniCloud Web云存储空间
![]()
2.2 在项目中与云空间关联
先创建云开发环境
再点击关联
![]()
![]()
2.3 使用uni-file-picker
uni-app官网 上传结果可以使用v-model获取
![]()
2.3.1 验证
![]()
上面的数组和下方的数组必须至少都要有一个单元,否则‘提交’按钮不高亮
2.3.1.1 定义上凭证与下凭证数组
做判断,当两个数组都有数据时才不禁用button
![]()
2.4 接口只需要url,所以要处理掉其他的字段
![]()
![]()
![]()
![]()
2.5 当用户点击提交的时候,调用接口,提交数组的url
2.5.1 封装接口
![]()
2.5.2 监听按钮
![]()
![]()
3 在途
注意:是一对一运送,所以在途最多只能有一条任务
实现组件一加载就执行逻辑
获取接口数据
渲染数据
![]()
![]()
4 异常上报
![]()
4.1 异常时间
使用到uni-datetime-picker和uni-list组件
![]()
![]()
![]()
4.2 上报位置
需要调用wx.chooseLocation和wx.chooseLocation
去腾讯申请key
![]()
拿到用户选择的地址,渲染到页面上
![]()
4.3 异常类型
使用change事件监听用户有没有选择或者有没有取消
![]()
监听事件
![]()
![]()
![]()
![]()
4.4 异常描述
使用v-model获取即可
![]()
![]()
4.5 异常图片
![]()
![]()
4.6 调用接口用于提交数据
![]()
![]()
4.7 用户选择异常类型,并且回显到页面
渲染回显
![]()
![]()
![]()
4.8 调用接口
![]()
![]()
其中传过去的id要从url中获取,所以又要使用onLoad,来获取id(这里的id对应的参数名为transportTaskId)
![]()
![]()
![]()
5 异常信息存在就显示,没有则隐藏
渲染数据
![]()