uni-app 前后端实战课 - 《悦读》学习笔记：【创建项目、后端环境介绍】小程序开发实例教程1/

相关视频和资料代码网上非常多。大家可以去找一下哦。如果找不到可以给我留言。我可以发给你们。bilibili上就有

 

很多人想要源码：

uni-app 前后端实战课 - 《悦读》，附件链接：

 

https://pan.baidu.com/s/1wZa0z8IhUaIjsYH3DDrvOQ 提取码：bech

 

 

项目介绍：

1：创建项目

 

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

 

 

1. 打开HBuilderX -> 新建 uniapp 项目

创建项目：

项目创建成功后。的界面：

2. 创建页面

|_ index.vue 入口页面 （系统已经帮我们创建好了）
|_ write.vue 文章撰写页面

在pages下面创建页面：写作页面，用户提交文章的页面

 

|_ my.vue 账户中心页面

 

完善底部导航栏

1. 下载图标, 图标地址 :

https://pan.baidu.com/s/1iaWd6l_-cIJ3RNUsqNqFNQ

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

我们可以把资料中的【graceUI 】这个目录复制粘贴到项目里。里面是一个css文件：

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

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

修改index.vue、my.vue、write.vue这几个文件。清理一下。如下图。然后每个页面的view里面写上那个页面的名字...暂时起到一个页面内容的作用

保存好了之后：按ctrl+r运行：然后：选微信开发者工具进行调试（如果没有安装微信开发者工具的，需要先安装再使用）

第一次使用。一直报错：

于是需要打开微信开发者工具。把安全里的服务端口打开。就可以了：

成功了：可以看见自己的第一个小程序页面了！

因为默认的名字是uni-app所以我们来修改一下名称：悦读

只改这里的话。首页的名字还是没有变：可以把首页的名字删掉。用下面的全局的名字就可以了

于是成功了：

 

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			}
		}
	    ,{
            "path" : "pages/write/write",
            "style" : {}
        }
        ,{
            "path" : "pages/my/my",
            "style" : {}
        }
        ,{
            "path" : "pages/login/login",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "悦读",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"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"
	            }
	        ]
	    }
}