当前位置：首页 > uni-app

uniapp我的文章

2026-02-06 10:00:09uni-app

uniapp 文章管理实现方法

数据绑定与列表渲染
在 data 中定义文章列表数组，通过 v-for 渲染到页面。示例代码：

data() {
  return {
    articles: [
      { id: 1, title: '文章标题1', content: '内容摘要...' },
      { id: 2, title: '文章标题2', content: '内容摘要...' }
    ]
  }
}

模板中使用循环展示：

<view v-for="item in articles" :key="item.id">
  <text>{{item.title}}</text>
  <text>{{item.content}}</text>
</view>

文章详情页跳转
通过 navigateTo 传递文章 ID，在详情页接收参数：

// 列表页跳转
uni.navigateTo({
  url: '/pages/detail/detail?id=' + item.id
});

// 详情页接收
onLoad(options) {
  const articleId = options.id;
  // 根据ID请求数据
}

后端数据请求
使用 uni.request 获取远程文章数据：

uni.request({
  url: 'https://api.example.com/articles',
  success: (res) => {
    this.articles = res.data;
  }
});

本地存储方案
适合轻量级数据缓存，使用 uni.setStorage：

// 保存文章数据
uni.setStorage({
  key: 'cached_articles',
  data: this.articles
});

// 读取缓存
uni.getStorage({
  key: 'cached_articles',
  success: (res) => {
    this.articles = res.data;
  }
});

发布文章功能
通过表单提交数据到服务器：

<template>
  <input v-model="form.title" placeholder="标题" />
  <textarea v-model="form.content" placeholder="内容"></textarea>
  <button @click="submit">发布</button>
</template>

<script>
methods: {
  submit() {
    uni.request({
      url: 'https://api.example.com/articles/create',
      method: 'POST',
      data: this.form,
      success: () => {
        uni.showToast({ title: '发布成功' });
      }
    });
  }
}
</script>

注意事项