一 UniApp介绍
(1)什么是uni-app?
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
(2)为什么选择uni-app?
uni-app
在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
(3)UniApp功能框架
(4)uni-app开发环境
HBuilder X的安装使用——HBuilderX安装使用
二 UniApp初始化相关配置
(1)工程目录结构
components——自定义组件
pages——页面
static——引用的静态资源(比如图片、视频)
common——公共插件(比如API统一配置)(自建)
api——请求封装(自建)
store——vuex状态管理器(自建)
main.js——全局配置,初始化入口文件
App.vue——应用配置,用来配置App全局样式以及监听应用生命周期
mainfest.json——应用配置(比如appid、logo、版本等打包信息)
pages.json——页面配置(比如路由、导航条、选项卡等页面类信息)
(2)应用配置manifest.json
manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等,也可以在这里为Vue为H5设置跨域拦截处理器
(3)编译配置vue.config.js
vue.config.js是一个可选配置文件,如果项目的根目录中存在这个文件,就会被自动加载,一般用于配置webpack等编译选项。
(4)全局配置page.json
page.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。类似于微信小程序中app.json的页面管理部分。
属性 | 类型 | 必填 | 描述 |
globalStyle | Objec |