unicloud3--event云函数传参渲染列表页面

新手一号
271 阅读5分钟

向云函数请求数据uniapp提供了两种方法：

视频中用的是promise方式

// promise方式
uniCloud.callFunction({
    name: 'hellocf',
    data: { a: 1 }
  })
  .then(res => {});

// callback方式
uniCloud.callFunction({
	name: 'hellocf',
	data: { a: 1 },
	success(){},
	fail(){},
	complete(){}
});

客户端向服务端传参

第二节调用云函数时属性只写了一个name，还有一个data，这个data就是用来向服务端传递参数的

then()方法是异步执行，then前面的代码执行完了才能执行then内部的代码，用于避免没有获取到数据后面的方法就拿不到值而导致的报错，需要通过网络请求拿值的方法就带一个then来避免报错

image.png

在前端写一个方法连接云函数后，传一个值到云函数，需要云函数接收这个值 index.vue

onLoad() {
      uniCloud.callFunction({
        // name是自定义的云函数名,data是传的参数
        name:"myCloudFun",
        data:{
          name:"王五",
          age:"20"
        }
      }).then(res=>{
        console.log(res);
      })
},

云函数 index.js

// 'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	// console.log('event : ', event)
	
	//返回数据给客户端
	return event
};

代码逻辑是：

前端传递一个json对象data到云函数，云函数通过event接收之后。通过return将接收到的值返回到前端，前端又通过then打印接收到的值到控制台

image.png

还可以在云函数里这样写的更清晰一些： 通过解构赋值把值拿出来，用模板字符串语法返回到前端

// 'use strict';
exports.main = async (event, context) => {
  // 接收前端传递的参数,并解构赋值给两个自定义变量,然后返回这两个变量
let {name, age} = event
	//返回数据给客户端
	return `我的名字是${name},我的年龄是${age}`;
};

前端获取到值之后，打印出来的结果 image.png

模拟返回一个数组包含的一堆json字符串，这堆数据就是网络接口请求到的数据,以后模拟查询数据库获取到的数据就是基本这样的

// 'use strict';
exports.main = async (event, context) => {
  let arr = [{
      "id": "28ee4e3e6050598b0af006d25246ec3f",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/a95e5617-49b9-4613-aa8c-a8e529a28ba6.jpg",
      "price": "5208/饼",
      "title": "六妙紫印"
    },
    {
      "id": "28ee4e3e6050b76c0b014bdb0431265a",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/eb9ffa17-b85c-4a95-a01a-454b7396bf91.jpg",
      "price": "3120/箱",
      "pronum": "LM-2020018",
      "title": "老树贡眉"
    },
    {
      "id": "79550af26050b9d00a6375ad20319360",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/7cbba642-5338-4a34-9f67-9e83ad122005.jpg",
      "price": "936/盒",
      "pronum": "LM-201810",
      "title": "贡眉散茶"
    },
    {
      "id": "28ee4e3e60507a2f0af735f57087eaa5",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/5d094288-2503-48c1-b145-e6270bccc774.jpg",
      "price": "1949/饼",
      "pronum": "LM-201868",
      "title": "改革开放四十周年纪念茶"
    },
    {
      "id": "79550af260ab47ef19ae99816311552f",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/611f7546-7663-4d57-a131-df6be5932d68.jpg",
      "price": "23610/箱",
      "pronum": "LM-2021010",
      "title": "白毫银针"
    },
    {
      "id": "79550af260507cec0a59d68c0fdb5323",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/b9b62c3a-f8e4-47f6-9260-9a24128890ca.jpg",
      "price": "1799/罐",
      "pronum": "LM-2020011",
      "title": "老茶牡丹（2006年）"
    },
    {
      "id": "28ee4e3e6050b4320b00e94b00e1fb56",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/96047f75-6840-4594-8d1d-773965487e9a.jpg",
      "price": "1466/饼",
      "pronum": "LM-2019033",
      "title": "有机寿眉"
    },
    {
      "id": "b00064a76050b3cd0a550ad50b996430",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/996656b3-556e-4cbc-9f37-55429032464c.jpg",
      "price": "328/袋",
      "pronum": "J-LM201728",
      "title": "寒露茶"
    }
  ]
  return arr;
};

现在就拿到8条数据了 image.png

image.png

在页面中渲染这些数据出来，将获取到的值赋值到data中自定义的变量listArr，这样，标签模板中就能通过data拿到值了,然后在标签模板中将数据遍历出来，遍历要写id

<template>
	<view class="home">
    <view class="row" v-for="item in listArr" :key="item.id">
      <image :src="item.picurl" mode=""></image>
      <view class="">{{item.title}}</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        listArr:[]
			}
		},
		onLoad() {
      uniCloud.callFunction({
        // name是自定义的云函数名,data是传的参数
        name:"myCloudFun",
        data:{
          name:"王五",
          age:"20"
        }
      }).then(res=>{
        this.listArr = res.result;
        console.log(this.listArr);
      })
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.row {
  border-bottom: 1px solid #ccc;
  padding: 30rpx;
}
</style>

现在就已经把数据渲染到页面了一共8条数据

image.png

传参： 写一个小功能，在云函数请求中写一个数，然后后台根据这个数决定返回多少条数据，在云函数中，要先通过解构赋值，从event中把传递的参数num解构出来，然后接下来对数组进行裁剪，数组就是接口返回的数据条数，裁剪的值就是传过来的参数

前端代码index.vue

<template>
	<view class="home">
    <view class="row" v-for="item in listArr" :key="item.id">
      <image :src="item.picurl" mode=""></image>
      <view class="">{{item.title}}</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        listArr:[]
			}
		},
		onLoad() {
      uniCloud.callFunction({
        // name是自定义的云函数名,data是传的参数
        name:"myCloudFun",
        data:{
          num:3
        }
      }).then(res=>{
        this.listArr = res.result;
        console.log(this.listArr);
      })
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.row {
  border-bottom: 1px solid #ccc;
  padding: 30rpx;
}
</style>

云函数代码：

// 'use strict';
exports.main = async (event, context) => {
  let {num} = event
  let arr = [{
      "id": "28ee4e3e6050598b0af006d25246ec3f",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/a95e5617-49b9-4613-aa8c-a8e529a28ba6.jpg",
      "price": "5208/饼",
      "title": "六妙紫印"
    },
    {
      "id": "28ee4e3e6050b76c0b014bdb0431265a",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/eb9ffa17-b85c-4a95-a01a-454b7396bf91.jpg",
      "price": "3120/箱",
      "pronum": "LM-2020018",
      "title": "老树贡眉"
    },
    {
      "id": "79550af26050b9d00a6375ad20319360",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/7cbba642-5338-4a34-9f67-9e83ad122005.jpg",
      "price": "936/盒",
      "pronum": "LM-201810",
      "title": "贡眉散茶"
    },
    {
      "id": "28ee4e3e60507a2f0af735f57087eaa5",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/5d094288-2503-48c1-b145-e6270bccc774.jpg",
      "price": "1949/饼",
      "pronum": "LM-201868",
      "title": "改革开放四十周年纪念茶"
    },
    {
      "id": "79550af260ab47ef19ae99816311552f",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/611f7546-7663-4d57-a131-df6be5932d68.jpg",
      "price": "23610/箱",
      "pronum": "LM-2021010",
      "title": "白毫银针"
    },
    {
      "id": "79550af260507cec0a59d68c0fdb5323",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/b9b62c3a-f8e4-47f6-9260-9a24128890ca.jpg",
      "price": "1799/罐",
      "pronum": "LM-2020011",
      "title": "老茶牡丹（2006年）"
    },
    {
      "id": "28ee4e3e6050b4320b00e94b00e1fb56",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/96047f75-6840-4594-8d1d-773965487e9a.jpg",
      "price": "1466/饼",
      "pronum": "LM-2019033",
      "title": "有机寿眉"
    },
    {
      "id": "b00064a76050b3cd0a550ad50b996430",
      "picurl": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8c036f36-4afa-43c7-9a76-ffc7e5723056/996656b3-556e-4cbc-9f37-55429032464c.jpg",
      "price": "328/袋",
      "pronum": "J-LM201728",
      "title": "寒露茶"
    }
  ]
  arr = arr.slice(0,num)
  return arr;
};

这样传的3表示请求三条数据，请求的三条数据就渲染到页面中了,要请求几条数据直接改前端的传值就可以了

image.png

image.png

avatar
文章
阅读
粉丝