uniapp云函数传参以及页面的渲染

在uniCloud.callFunction下的data后写入需要传递的参数

然后在云函数当中写入return event

之后我们就可以在console中看到返回值了

将传递给云函数的值给name 和 age

字符串和传递过来的变量的拼接
let {name,age}=event;
return 姓名${name},年龄${age}

上面的``是键盘左上角ESC下的小点

数据的使用，将一个数组传递给peopleData，return peopleData;，取得数据
这是我所使用的数组
[
{ name: ‘张三’, gender: ‘男’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/2f9ac94818e14f6eebb4bb337b95bba5.jpeg’, hobbies: [‘篮球’, ‘游泳’], specialSkill: ‘编程’ },
{ name: ‘李四’, gender: ‘女’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/358e61180ba0c81253fe5bed0442610e.jpg’, hobbies: [‘跑步’, ‘唱歌’], specialSkill: ‘绘画’ },
{ name: ‘王五’, gender: ‘男’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/3f8956eae5e49995eac5c522e2555bd6.jpeg’,hobbies: [‘足球’, ‘旅游’], specialSkill: ‘烹饪’ },
{ name: ‘赵六’, gender: ‘女’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/55acef7292f971d00723992055410976.jpeg’, hobbies: [‘读书’, ‘登山’], specialSkill: ‘舞蹈’ },
{ name: ‘钱七’, gender: ‘男’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/6e53ab3c4ec9dd8376c45d75eadf57ae.jpeg’, hobbies: [‘音乐’, ‘电影’], specialSkill: ‘写作’ },
{ name: ‘孙八’, gender: ‘女’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/767b431cf249751115db176d550aac3c.jpeg’, hobbies: [‘滑雪’, ‘摄影’], specialSkill: ‘编程’ },
{ name: ‘杨九’, gender: ‘男’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/a039b4409d7515360da78b1337e3addd.jpeg’, hobbies: [‘钓鱼’, ‘骑行’], specialSkill: ‘绘画’ },
{ name: ‘周十’, gender: ‘女’,avatar:‘https://mp-5a63bb79-038d-4b36-9274-9d20b464bbb4.cdn.bspapp.com/kitten/daca0fa0257429fcf0ec96b1c6e5e318.jpeg’, hobbies: [‘游戏’, ‘手工’], specialSkill: ‘烹饪’ },
];

在index.vue文件中，data的return下新建一个数组llistarr

然后我们将传递过来的值给listarr

然后我们开始做渲染，先做一个大致的结构，image是图片
border-bottom: 1px solid #eee;//的作用是设置边框
padding: 30rpx;//的作用是设置上下的间距



再然后我们将获得的数据带入其中，使用的是v-for，用以循环，:key的作用是设置每一条数据的唯一标识，index是下标


然后将姓名带入进去


然后我们将头像带入进去，注意src前面加了一个冒号且没有使用{{}}


对数据的传递，在data这里传递一个数字3

云函数接收给num

再使用slice对数组进行裁剪

结果