uni-app 实现类似微博发布功能

实现类似微博发布功能在uni-app中涉及前端页面的搭建、数据绑定、事件处理以及与后端接口的交互。以下是一个简化的代码示例，展示如何实现这一功能。

1. 页面布局（pages/publish/publish.vue）

<template>
  <view class="container">
    <textarea v-model="content" placeholder="说点什么吧..." class="textarea"></textarea>
    <button @click="publish">发布</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    publish() {
      if (this.content.trim() === '') {
        uni.showToast({ title: '内容不能为空', icon: 'none' });
        return;
      }
      
      uni.request({
        url: 'https://your-backend-api/publish', // 后端接口地址
        method: 'POST',
        data: {
          content: this.content
        },
        success: (res) => {
          if (res.data.success) {
            uni.showToast({ title: '发布成功', icon: 'success' });
            this.content = ''; // 清空输入框
            // 可选：导航回主页或刷新列表
            uni.navigateBack();
          } else {
            uni.showToast({ title: '发布失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络错误', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
}
button {
  width: 100%;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
}
</style>

2. 后端接口（示例，假设使用Node.js + Express）

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/publish', (req, res) => {
  const { content } = req.body;
  // 这里可以添加保存内容的逻辑，比如保存到数据库
  res.json({ success: true, message: '内容已发布' });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

以上代码展示了如何在uni-app中创建一个简单的发布功能界面，并通过uni.request与后端接口进行交互。后端接口部分仅作示例，实际项目中需要根据具体需求进行实现，如用户认证、内容验证、数据存储等。