2022-09-05 uni-app学习笔记(二) uniapp基础内容介绍,uniapp项目文件介绍,初始化相关配置

0.思维导图

1.uniapp介绍(补充)

uniapp的功能框架

uniapp的运行环境主要包括:真机运行,浏览器运行,小程序运行

2.初始化相关配置

2.1.工程目录结构

*注意事项:
static目录下的js文件不会被webpack编译,里面若有es6代码在手机设备上会报错,因为没有经过webpack编译转换就直接运行了
基于同样的原因,scss和less等公共资源不要放在static目录下,而是放在common目录下

2.2.应用配置manifest.json文件

manifest.json文件是应用的配置文件,用于指定应用的名称,图标,权限等等
可以在该文件中设置vue中h5跨域拦截处理器
它是一个页面型的文件:

2.3.编译配置vue.config.js文件

vue.config.js文件是一个可选的配置文件,如果项目的根目录存在此文件,那么它会被自动加载
不默认生成,要自己创建vue.config.js文件,一般用于配置webpack等编译选项

2.4.全局配置pages.json文件

pages.json用于对uni-app进行全局配置,决定页面文件的路径,窗口样式,原生的导航栏,底部的原生tabbar等等
(跟微信小程序中的app.json的页面管理部分有点类似)
pages.json文件中的属性列表及含义:

2.5.全局样式uni.scss文件

• uni.scss文件的用途:为了方便整体控制应用的风格(按钮颜色,边框颜色等等),此文件预置了一批scss变量样式
• uniapp官方扩展插件uni-ui以及其他第三方插件都使用了上述样式变量
• uni.scss是一个特殊文件,在代码中无需通过import引入就可以使用这些变量样式,因为uniapp的编辑器在webpack配置中已经特殊处理了这个uniapp,可以让每个scss文件都被注入这个uni.scss文件,以全局可用
  

2.6.主组件App.vue文件

App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,它是页面的入口文件
(但App.vue本身不是页面,不能在里面编写视图元素)
App.vue文件的主要作用:

• 调用应用生命周期函数
• 配置全局样式
• 配置全局的存储globalData

*应用生命周期只能在App.vue中监听,不能在页面中监听(↓下节内容)

2.7.入口文件main.js

main.js是uni-app 的入口文件,主要作用:

• 初始化vue实例
• 定义全局组件
• 使用需要的插件(如vuex)

2.8.uniapp的开发规范和资源路径

开发规范约定

即:

• uni-app中的.vue文件跟vue项目中的vue文件结构是一样的,都是由template,script,style这三个大标签组成的
• uni-app中的组件标签则是跟小程序的标签名是一样的(view,text等标签),而不是用div,h1这些标签
• 前缀的区别——微信小程序:wx.get.info==>uniapp:uni.get.info
• uni-app中的数据绑定和事件处理跟vue一样,同时uniapp也有自己的生命周期
• 在uni-app中的样式尽量使用flex布局,目的是为了兼容多端

资源路径说明

总结来说就是,template标签中的组件标签,script标签和JS文件中,style标签或者css文件中,都可以使用绝对路径或者相对路径,然后具体的引入格式如上图所示