uni-app 实现基于dedecms的小程序

在uni-app中实现基于DedeCMS（织梦内容管理系统）的小程序，主要涉及到前后端的交互和数据展示。下面是一个简要的代码案例，展示如何从DedeCMS获取数据并在uni-app小程序中展示。

后端（DedeCMS）

假设DedeCMS已经安装并配置好，且有一个用于获取文章列表的API接口。例如，可以通过DedeCMS的模板标签或自定义API来获取文章数据。这里为了简化，我们假设有一个API接口http://yourdomain.com/api/articles返回JSON格式的文章列表。

前端（uni-app）

1. 创建uni-app项目： 使用HBuilderX或命令行工具创建一个新的uni-app项目。

2. 配置请求： 在manifest.json中配置合法域名（包括你的DedeCMS域名）。

3. 页面代码： 创建一个页面用于展示文章列表，例如pages/index/index.vue。

<template>
  <view>
    <block v-for="(article, index) in articles" :key="index">
      <view class="article">
        <text class="title">{{ article.title }}</text>
        <text class="content">{{ article.brief }}</text>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  onLoad() {
    this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await uni.request({
          url: 'http://yourdomain.com/api/articles',
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        });
        this.articles = response.data;
      } catch (error) {
        console.error('Error fetching articles:', error);
      }
    }
  }
};
</script>

<style>
.article {
  margin-bottom: 20px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.content {
  color: #555;
}
</style>

说明

• 模板部分：使用v-for指令循环渲染文章列表，每个文章包含标题和内容摘要。
• 脚本部分：在onLoad生命周期钩子中调用fetchArticles方法，通过uni.request发送GET请求到DedeCMS的API接口，并将返回的数据赋值给articles数组。
• 样式部分：简单的样式定义，可以根据实际需求进行调整。

注意事项

• 确保DedeCMS的API接口能够正确返回JSON格式的数据。
• 处理跨域问题，如果DedeCMS和uni-app小程序部署在不同的域名下，需要在服务器端配置CORS（跨来源资源共享）。
• 根据实际业务需求，可能需要处理更多的数据字段和逻辑，例如分页、错误处理等。

这个代码案例提供了一个基本的实现思路，你可以根据具体需求进行扩展和优化。