Uni-App - 实战《悦读》之创建项目、后端环境介绍

最新推荐文章于 2025-06-28 19:24:00 发布

原创最新推荐文章于 2025-06-28 19:24:00 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Uni-App #实战《悦读》之创建项目、后端环境介绍

Uni-App 专栏收录该内容

30 篇文章

订阅专栏

本教程详细介绍如何使用HBuilderX创建uniapp项目，包括页面创建、底部导航栏设置、图标部署及graceUI框架加载，同时简介后端环境搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目

1. 打开HBuilderX -> 新建 uniapp 项目;
2. 创建页面
|_ index.vue 入口页面
|_ write.vue 文章撰写页面
|_ my.vue 账户中心页面

完善底部导航栏

1. 下载图标, 图标地址

悦读项目图标.zip_免费高速下载|百度网盘-分享无限制

2. 将图标部署至 /static 目录

3. 修改 page.json

"tabBar" : {
        "color" : "#707070",
        "selectedColor" : "#DE533A",
        "list" : [
            {
                "pagePath" : "pages/index/index",
                "text" : "文章",
                "iconPath" : "static/nav1.png",
                "selectedIconPath" : "static/nav1-a.png"
            },
            {
                "pagePath" : "pages/write/write",
                "text" : "写作",
                "iconPath" : "static/nav2.png",
                "selectedIconPath" : "static/nav2-a.png"
            },
            {
                "pagePath" : "pages/my/my",
                "text" : "我的",
                "iconPath" : "static/nav3.png",
                "selectedIconPath" : "static/nav3-a.png"
            }
        ]
    }

4. 修改项目名称

"globalStyle" : {
    "navigationBarTextStyle" : "black",
    "navigationBarTitleText" : "悦读",
    "navigationBarBackgroundColor" : "#F8F8F8",
    "backgroundColor" : "#F8F8F8"
}

加载 graceUI 框架

graceUI : http://grace.hcoder.net
收费框架，本教程中使用部分免费分享给大家，在课程内下载即可！
部署：

|_ 项目根目录
|_ graceUI
|_ graceUI.css

在app.vue 内添加以下代码：

<style>
@import 'graceUI/graceUI.css';
</style>

后端介绍

本教程将以 php + MySQL 为后端环境，为大家详细讲解服务端代码编写！
如果您没有后端基础并不想学习后端写法，课程将提供完整后端源码及数据库，您可以快速将后端部署在自己的电脑完成接口的部署工作 ^_^
我们将以 php 原生作为开发，开发过程中的基础架构和类库，请在腾讯课堂课程内获取；
本套课程也提供了 php 环境搭建教程及本课程后端接口部署教程。