阅读视图

发现新文章,点击刷新页面。

uni-appD4(uni-forms学习与回顾)

1.补充小程序路由跳转方式

·wx.navigateTo: 按照顺序向页面栈中放入打开过的页面

image.png·wx.redierctTo: 先把上一个页面删掉,再把自己页面放入栈内

image.png

·wx.reLaunch: 清空页面栈

image.png

2. uni-file-picker:实现文件上传功能

2.1 开通uniCloud Web云存储空间

dev.dcloud.net.cn/

image.png

2.2 在项目中与云空间关联

先创建云开发环境 image.png 再点击关联

image.pngimage.png

2.3 使用uni-file-picker

uni-app官网 上传结果可以使用v-model获取

image.png

2.3.1 验证

image.png
上面的数组和下方的数组必须至少都要有一个单元,否则‘提交’按钮不高亮

2.3.1.1 定义上凭证与下凭证数组

image.png做判断,当两个数组都有数据时才不禁用button image.png

2.4 接口只需要url,所以要处理掉其他的字段

image.pngimage.png

image.png

image.png

2.5 当用户点击提交的时候,调用接口,提交数组的url

2.5.1 封装接口

image.png

2.5.2 监听按钮

image.png

image.png

3 在途

注意:是一对一运送,所以在途最多只能有一条任务

image.png 实现组件一加载就执行逻辑 获取接口数据 image.png渲染数据

image.png

image.png

4 异常上报

image.png

4.1 异常时间

使用到uni-datetime-picker和uni-list组件

image.png

image.png

image.png

4.2 上报位置

需要调用wx.chooseLocation和wx.chooseLocation

image.png 去腾讯申请key

image.png

image.png 拿到用户选择的地址,渲染到页面上 image.png

4.3 异常类型

使用change事件监听用户有没有选择或者有没有取消

image.png

image.png 监听事件

image.png

image.png

image.png

image.png

4.4 异常描述

使用v-model获取即可

image.png

image.png

4.5 异常图片

image.png

image.png

4.6 调用接口用于提交数据

image.png

image.png

4.7 用户选择异常类型,并且回显到页面

image.png渲染回显 image.png

image.png

image.png

4.8 调用接口

image.png

image.png

image.png 其中传过去的id要从url中获取,所以又要使用onLoad,来获取id(这里的id对应的参数名为transportTaskId)

image.png

image.png

image.png

5 异常信息存在就显示,没有则隐藏

渲染数据 image.png

❌