uni-app分享 PHP后端 + APP前端工程实例-H5资讯APP，开源工程下载

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app分享 PHP后端 + APP前端工程实例-H5资讯APP，开源工程下载

Harmonyos Next教程
1 回复

针对您提到的“uni-app分享 PHP后端 + APP前端工程实例-H5资讯APP”需求，以下是一个简化的代码案例概述，展示了如何通过uni-app构建前端APP，并与PHP后端进行交互，实现一个简单的H5资讯展示功能。由于篇幅限制，这里仅提供关键代码片段。

前端（uni-app）

1. 项目结构

- pages/
  - index/
    - index.vue
- main.js
- manifest.json
- pages.json

2. index.vue

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

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  onLoad() {
    this.fetchArticles();
  },
  methods: {
    fetchArticles() {
      uni.request({
        url: 'https://your-server.com/api/articles', // 替换为实际PHP后端API地址
        success: (res) => {
          this.articles = res.data;
        },
        fail: (err) => {
          console.error(err);
        }
      });
    }
  }
};
</script>

后端（PHP）

1. 项目结构

- api/
  - articles.php
- index.php

2. articles.php

<?php
header('Content-Type: application/json');

$articles = [
    ['id' => 1, 'title' => 'Article 1', 'content' => 'Content of article 1'],
    ['id' => 2, 'title' => 'Article 2', 'content' => 'Content of article 2'],
    // 更多文章数据...
];

echo json_encode($articles);
?>

3. index.php（可选，用于路由分发）

<?php
// 简单的路由分发示例
$requestUri = $_SERVER['REQUEST_URI'];

if ($requestUri === '/api/articles') {
    include 'api/articles.php';
} else {
    http_response_code(404);
    echo json_encode(['error' => 'Not Found']);
}
?>

部署与运行

  1. 后端：将PHP代码部署到支持PHP的服务器上，如Apache或Nginx。
  2. 前端：使用HBuilderX等IDE打开uni-app项目，进行编译打包为H5或其他平台应用。确保uni.request中的URL为实际后端API地址。
  3. 测试：通过浏览器或APP模拟器运行前端应用，查看是否能够正确从后端获取并展示资讯内容。

此代码案例仅展示了基本的数据获取与展示功能，实际应用中还需考虑数据验证、错误处理、安全性（如CORS、身份验证）等更多细节。

回到顶部