uni-app 前后端实战课 - 《悦读》学习笔记:【创建项目、后端环境介绍】小程序开发实例教程1/
相关视频和资料代码网上非常多。大家可以去找一下哦。如果找不到可以给我留言。我可以发给你们。bilibili上就有
很多人想要源码:
项目介绍:
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"}]}
}
uni-app 前后端实战课 - 《悦读》学习笔记:【创建项目、后端环境介绍】小程序开发实例教程1/相关推荐
- Java小程序开发实例!字节跳动Java岗经典面试真题,实战解析
前言 总有一天你会明白,你的努力终究没有白费 年前辞职,人算不如天算,突如其来的疫情完全把自己的计划给打碎了,面试难度简直不亚于一场江苏高考题,后悔.焦虑不安.失眠成了我的生活状态. 从三月底开始投递 ...
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)
7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)...
2019独角兽企业重金招聘Python工程师标准>>> 7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: #小程序资讯与小程序教程 ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程 小程序进阶 王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
- 超详细域名备案+阿里云服务器配置+小程序开发(简略)+前后端分离(简略)
文章目录 前言 一.试水环节(配置阿里云服务器环境) 二.购买域名及备案 1.购买域名 2.域名备案 3.域名解析 4.白嫖SSL证书 5.在网站上链接备案号 三.设置微信小程序开发的权限 四.安装微 ...
- 微信小程序开发-微信支付功能【WxMaService 获取openid,WxPayService建微信订单,接收微信支付异步通知回调方法,附有完整前后端代码】
前提:对小程序开发有一定的基础:小程序已发布使用,已开通微信支付,关联商户号. 微信小程序平台:小程序平台 微信开发者文档:开发者文档 微信小程序支付API 地址:微信支付文档地址 微信支付平台:微信 ...
- 前后端微信小程序开发
随着移动互联网的迅猛发展,微信小程序已经成为了一种非常流行的开发方式,它不仅可以节约用户空间,提高用户体验,而且开发成本也相对较低.因此,前后端微信小程序开发技术也日渐成熟. 本篇文章将介绍前后端微信 ...
- 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
- 尚硅谷微信小程序开发 仿网易云音乐App 小程序 后端接口服务器搭建
目录 小程序学习 视频相关的教程文档与笔记分享 配套服务器 源码地址: 接口使用说明文档 接口列表 启动服务 测试服务启动OK网页 http://localhost:3000/test.html编辑 ...
最新文章
- 万物皆可JOJO:这个GAN直接让马斯克不做人啦 !Demo在线可玩!
- 实战SSM_O2O商铺_21【商铺列表】Dao层开发
- QT学习:获取文件详细信息
- JavaScript中的箭头函数
- .net redis定时_一场由fork引发的超时,让我们重新探讨Redis的抖动问题
- php mysql增删查改 主码不能修改_PHP 数据库练习
- su 、 sudo 命令及限制 root 远程登录
- jsp、servlet、tomcat中都设置了编码为UTF-8,依然报错:java.io.CharConversionException: Not an ISO 8859-1 character:
- php给点击的li设置样式,两种方法为LI列表前3行设置样式
- 控制系统数字仿真与CAD-第四次实验-附完整代码
- 二分类数据集_玩转UCI心脏病二分类数据集 领学课笔记
- 计算机主板详细维修,教你电脑主板维修必备基础知识
- PR导入视频失败、没有音频解决方法
- 红旗Linux系统安装教程
- 极光推送第一次进入APP无法获取RegistrationID
- 项目需求的重要性和开发步骤
- 剥茧抽丝,细数模块化的前世今生
- 获取html中光标位置
- 设计师常用软件合集,有一个你肯定知道!
- PY32 单片机离线烧录器使用说明