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

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

创建项目

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 环境搭建教程及本课程后端接口部署教程。


目录
相关文章
|
9月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
766 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
661 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
927 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
9月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
9月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
274 0
|
6月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
280 5

热门文章

最新文章