个人笔记 uniapp 创建子组件模板 和 自定义请求

Uni 搭建子页面
先创建子页面
个人笔记 uniapp 创建子组件模板 和 自定义请求_第1张图片
在主页面引入组件
在这里插入图片描述
Components 里引入
个人笔记 uniapp 创建子组件模板 和 自定义请求_第2张图片
在template 中引入
在这里插入图片描述
在分段器选项中添加 子页面模板
个人笔记 uniapp 创建子组件模板 和 自定义请求_第3张图片
这里将v-show改成v-if 渲染问题

封装自己的请求
新建一个js 请求文件
个人笔记 uniapp 创建子组件模板 和 自定义请求_第4张图片
先写一个导出函数
在这里插入图片描述
填写函数调用的返回对象
在这里插入图片描述

在这里插入图片描述
填写形参 用 … 来解构请求的参数

在这里插入图片描述
成功失败都会触发

添加一个加载显示
在这里插入图片描述
然后在 complete 中关闭加载动画
在这里插入图片描述

封装完毕后开始挂载到原型上
在这里插入图片描述
这里分两步
先导入
在这里插入图片描述
然后挂载
在这里插入图片描述
方便获取数据显示 在封装的js 成功响应 .data
个人笔记 uniapp 创建子组件模板 和 自定义请求_第5张图片
在页面中的使用 直接this.requset
在这里插入图片描述
在子模块中请求数据
个人笔记 uniapp 创建子组件模板 和 自定义请求_第6张图片
url 是后端给的接口地址
data 是向后端发送请求的参数 一般都回有接口文档 按文档填写
.then 就是请求成功响应
Result 是请求成功响应的参数

创建一个空数组用于接收参数 data 里的数据就 相当于你在页面前面定义了一个变量用来接收
在这里插入图片描述

调用时就可以直接 this. 在data里创建的变量 在标签里用的时候不用加this

将成功请求的数据取出 赋值给这个变量
在这里插入图片描述

在标签中取出数组对象的具体数据直接在标签中进行 v-for
个人笔记 uniapp 创建子组件模板 和 自定义请求_第7张图片
当循环的数据中有唯一属性 也就是索引时 循环的对象中可以步用index
没有唯一属性的时候就添加一个index 进行循环

在这里插入图片描述
在src 前加两个冒号 相当于动态获取 因为是在循环标签中插入的图片标签 此时有几条路径就户渲染几张图片

你可能感兴趣的:(个人笔记)