uni-app小程序怎么写前后端对接给个案例

要实现uni-app小程序的前后端对接，可以使用uniCloud云开发来进行操作。下面是一个简单的案例，演示了如何在uni-app小程序中与后端进行数据交互。

创建云函数：
- 在uniCloud控制台中创建一个云函数，例如名为"getUserInfo"。
- 在云函数中编写后端代码，例如获取用户信息的代码。
在uni-app小程序中调用云函数：
- 在uni-app小程序的pages目录下创建一个页面，例如名为"userInfo"。
- 在userInfo页面中使用uniCloud.callFunction方法调用云函数，获取后端返回的数据。

下面是具体的代码示例：

创建云函数（getUserInfo）：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  // 从event中获取前端传递的参数
  const { userId } = event
  // 在此处编写后端逻辑，例如从数据库中获取用户信息
  const userInfo = await db.collection('users').doc(userId).get()
  
  return {
    code: 200,
    data: userInfo.data
  }
}

在uni-app小程序中调用云函数：

<template>
  <view>
    <button @click="getUserInfo">获取用户信息</button>
    <view v-for="(user, index) in userList" :key="index">
      <text>{{ user.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    getUserInfo() {
      uniCloud.callFunction({
        name: 'getUserInfo',
        data: {
          userId: '123456' // 假设userId为123456
        },
        success: res => {
          console.log(res)
          if (res.result.code === 200) {
            this.userList = res.result.data
          }
        },
        fail: err => {
          console.error(err)
        }
      })
    }
  }
}
</script>

通过以上代码，当点击"获取用户信息"按钮时，uni-app小程序会调用云函数"getUserInfo"并传递用户id参数，后端会从数据库中获取对应用户信息，并将结果返回给前端，前端再将数据显示在页面上