Uni-App课程学习心得

   通过学习uni-app这个框架，我首先了解到Uni-App是一个跨平台开发工具，它提供了一些特殊的API和组件，用于开发iOS、Android、H5、小程序等多个平台的应用程序。

   看了老师给的文档，不难发现其实文档的三大章节就主要体现在框架、组件、API

   编译工具我们使用的是HBuilder X,它提供了很多高效、方便的操作功能，来提高我们开发和编辑的效率~，HBuilderX 为 uni-app 的条件编译提供了丰富的支持；代码块支持在HBuilderX 中开发 uni-app 时,通过输入 ifdef 即可快速生成条件编译的代码片段语法。

   在这门课程上我们做了一个新闻博客

部分功能实现过程展示

1.创建和初始化项目

第一步：创建项目，项目名为bolgs

这是它的开发目录结构（ps:由于我已经创建过blogs，新建的AAA用于目录结构讲解）

 pages目录：用于存放业务页面

staitc目录：存放本地静态资源

App.vue文件：用来配置APP全局样式和监听

main.js文件：vue的初始化入口文件,就是项目进行加载时，先加载此文件

manifest.json文件：用于配置一些打包信息。比如应用名称、版本、logo之类的

pages.json文件：用于配置一些页面类的信息。比如页面路由，页面上的logo、Banner、文本、图像、导航栏等信息。

uni.scss文件：uni-app内置的常用样式变量

第二步：添加5个页面

• blog页，用于显示详情页
• charts页，用于显示个人数据的统计图表
• 默认创建的index，作为主页，启动显示blogs列表
• profile页，用于显示个人信息
• register页，用于显示注册

1. 在static中添加静态资源，主要是一些icons
2. 在pages.json中修改全局外观配置，主要是标题栏文本和颜色（属性列表）
3. 设置tabBar，在页面底部添加3个标签 

• 在pages.json中添加tabBar节点
• 设置color和selectedColor属性，设置图标及文本的不同状态颜色
• 设置list属性，tab页面数组，元素包括页面路由、文本、不同状态的图标路径