uniapp 结构

.hbuilderx 运行到手机上有的调试相关
- launch.json 配置了启动调试时相关设置
common 通用文件比如 xxx.css 通用样式
components 组件
lib
- api 接口
pages 页面
static 静态资源，图片图标(英文命名)
store 存储数据和管理数据方法的仓库
uni_modules 引用的 uni 组件(非必须)
unpackage 运行到手机上就会有的打包文件
App.vue 根组件，所有的页面都是在 App.vue 下进行切换的，是页面入口文件，可调用应用的生命周期函数，其下的 style 样式会应用到各个页面
index.html
main.js 项目的入口文件，在项目加载时候首先加载此文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件
manifest.json 配置 app 的属性
pages.json 全局文件，配置页面，导航栏等
uni.scss 全局 scss 文件

1.1 pages.json

uniapp 官网 pages.json
uniapp 官网 app-plus

{"pages": [{"path": "pages/xxx/xxx","style": {}},],"globalStyle": {}
}

常用配置项：

pages 设置页面路径及窗口表现
globalStyle 设置默认页面的窗口表现，以下配置可在 globalStyle 全局设，也可在 pages 中 style 单个页面设
- "navigationStyle":"custom", 导航栏样式，custom 表示取消默认导航栏
- "navigationBarTitleText": "xxx" 导航栏标题
- "navigationBarTitleSize": "20rpx", 导航栏标题文字大小
- "navigationBarTextStyle": "black", 导航栏标题颜色
- "navigationBarBackgroundColor": "#FFFFFF" 导航栏背景颜色
- "enablePullDownRefresh": false 是否开启下拉刷新
- "disableScroll": true 整体页面不能上下滚动（只在 style 中有效，在 globalStyle 中无效）
- "app-plus":{} 配置编译到 App 平台时的特定样式
  - "background": "transparent" 背景透明
  - "backgroundColor": "rgba(0,0,0,0)" 背景颜色
  - "scrollIndicator": false 滚动条，不显示
  - "animationType": "fade-in" 窗口显示动画，淡入
  - "animationDuration": 200 窗口显示动画持续时间
  - "softinputMode": "adjustResize" 软键盘弹出模式 adjustResize、adjustPan 关于软键盘弹出的逻辑说明
  - "popGesture": "none" 侧滑返回功能（iOS 上），“close”（启用侧滑返回）、“none”（禁用侧滑返回）
安卓若要禁用侧滑返回，使用 onBackPress(event) 生命周期函数
uni-app 自定义返回逻辑教程
uniapp 关闭默认返回安卓和 ios
uniapp 修改 navigationBar 字体大小

1.2 uni_modules 文件夹

uni_modules 是 uni-app 的插件模块化规范，可直接使用也可自己开发插件

使用时，在自己项目下新建 uni_modules 文件夹
在插件市场查找插件，选择使用 HBuilderX 导入插件
整个插件文件夹(如：uni-nav-bar 文件夹)就会出现在自己项目的 uni_modules 文件夹下
之后无需 import , <uni-nav-bar></uni-nav-bar> 标签就能使用，因为该文件夹下自带 package.json 文件
图标 uni-icons 图标名称可在这里查找

1.3 store 文件夹

uniapp 官网项目结构
vuex 中 this. s t o r e . c o m m i t 和 t h i s . store.commit 和 this. store.commit和this.store.dispatch 的用法

Store 就是提供一个仓库，Store 仓库里面放了很多对象。
- state 就是数据源存放地，对应于一般 Vue 对象里面的 data
- actions 和 mutations 对应于 methods
在使用 Vuex 的时候通常会创建 Store 实例 new Vuex.store({state,getters,mutations,actions}) 有很多子模块的时候还会使用到 modules。
Store 类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中。要注意一个应用或是项目中只能存在一个 Store 实例
this.$store.dispatch() 与 this.$store.commit() 方法：
- 在 store 中注册了 mutation 和 action，在组件中用 dispatch 调用 action，然后 action 用 commit 调用 mutation。
- 同：两个方法都是传值给 vuex 的 mutation 改变 state
- 异：存取方式不同
  - this.$store.commit() 用来触发同步操作 commit => mutations
    - 存储：this.$store.commit('方法名',值)
    - 取值：this.$store.state.方法名
  - this.$store.dispatch() 用来触发异步操作 dispatch => actions
    - 存储：this.$store.dispatch('方法名',值)
    - 取值：this.$store.getters.方法名
    - 当操作行为中含有异步操作：比如向后台发送请求获取数据，就需要使用 action 的 dispatch 去完成了。其他使用 commit 即可。

// store 文件夹下 xxxSrv.js      // xxx.vue 中调用 store，不用写 import
export default {state: {//       this.$store.state.xxxxxx: [],yyy: { name: x, xx: 1 },},getters: {//       this.$store.getters.xxxxxx,},// mutations 更改状态的唯一方法mutations: {//       this.$store.commit("xxxSrv/mfun", xxx);mfun(x) {},},actions: {// await this.$store.dispatch("xxxSrv/afun", xxx);async afun(x) {context.commit("mfun", xxx);},},
};

1.4 manifest.json

manifest.json 启动配置

{"name" : "xxx","app-plus" : { /* 5+App特有相关 */"splashscreen" : {"alwaysShowBeforeRender" : false,  // 是否等待首页渲染完毕后再关闭启动界面"waiting" : true,  // 是否在程序启动界面显示等待圈或雪花"autoclose" : false,  // 是否自动关闭启动界面"delay" : 0},"modules" : {}, /* 模块配置 */"distribute" : { /* 应用发布信息 */"android" : { /* android打包配置 */"permissions" : [],"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]},"ios" : {}, /* ios打包配置 */"sdkConfigs" : { /* SDK配置 */"ad" : {}},}},"quickapp" : {}, /* 快应用特有相关 */"mp-weixin" : {}, /* 小程序特有相关 */
}

1.5 App.vue

<script>export default {onLaunch: function () {console.log("App Launch");plus.navigator.setFullscreen(true); // 撑满全屏plus.screen.lockOrientation("portrait"); // 锁定竖屏// 登录后plus.navigator.closeSplashscreen(); // 关闭加载页},onShow: function () {console.log("App Show");},onHide: function () {console.log("App Hide");},};
</script><style>/* 1. 每个页面公共css */@import "./common/uni.css";
</style><style lang="scss">/* 2. 如果引入scss，要加上 lang="scss" */@import "./common/base.scss";
</style>

uni-app 横屏设置

锁定屏幕方向可取值：plus.screen.lockOrientation('portrait');
- “portrait-primary”: 竖屏正方向；
- “portrait-secondary”: 竖屏反方向，屏幕正方向按顺时针旋转 180°；
- “landscape-primary”: 横屏正方向，屏幕正方向按顺时针旋转 90°；
- “landscape-secondary”: 横屏方向，屏幕正方向按顺时针旋转 270°；
- “portrait”: 竖屏正方向或反方向，根据设备重力感应器自动调整；
- “landscape”: 横屏正方向或反方向，根据设备重力感应器自动调整；
App.vue 是 uni-app 的主组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件。
App.vue 本身不是页面，这里不能编写视图元素，也就是没有<template>

1.6 main.js

import App from "./App"; // 引入了 App.vue// #ifndef VUE3
import Vue from "vue"; // 引入了 Vue 库
Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({// 创建了一个vue实例...App,
});
app.$mount(); // 挂载 Vue 实例
//即
//app.$mount()
//Vue({...App}).$mount()// #endif// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {const app = createSSRApp(App);return {app,};
}
// #endif// app.$mount()
// createSSRApp(App).$mount()

Vue3 中的应用是通过使用 createApp 函数来创建的，参数是根组件（例：HelloVueApp）

Vue.createApp({...}).mount('#hello-vue')

main.js 是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 vuex。
无法使用 vue-router，路由须在 pages.json 中进行配置。如果开发者坚持使用 vue-router，可以在插件市场找到转换插件。
使用 Vue.use 引用插件，使用 Vue.prototype 添加全局变量，使用 Vue.component 注册全局组件。
nvue 暂不支持在 main.js 注册全局组件

1.7 pages 文件夹

<!-- pages/xxx/xxx.vue -->
<template> </template><script>import xxx from "@/xxx/xxx.js";import xxx from "yyy";import { xxx } from "yyy";export default {data() {return {name: "",};},computed: {},onReady() {},onLoad() {},watch: {},methods: {},};
</script><style></style>

<template></template> 中必须先有一层 <view></view>

<!-- 正确 -->
<template><view> ... </view>
</template><!-- 错误 -->
<template><view> ... </view><view> ... </view>
</template>

1.7.1 watch 监听属性

uni-app watch 事件监听三种用法

监听数据的变化: data(){ } 或 ...mapState({ }) 中定义的数据

watch: {nameList: {handler(item) {console.log(item);  // 当 nameList 的值改变时，执行该语句},immediate: true, // 普通监听（可监听到第一次绑定的变化）deep: true       // 深度监听（可监听对象内属性变化）}
}

1.7.2 生命周期

uniapp 官网应用生命周期

页面生命周期: uni-app 提供

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object (用于页面传参)，参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

组件生命周期: vue 提供

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同

【uniapp】结构相关推荐

uni-app入门及练手项目
1多端的介绍 pc:web,桌面应用移动端:移动端–web app(android,ios) - 小程序(微信小程序,百度小程序,支付宝小程序,头条小程序,qq小程序,360小程序,华为小程序) 1 ...
开发小程序用php框架,微信小程序框架目前比较火的是？
微信小程序框架目前比较火的是? 微信小程序框架目前比较火的应该就是uniapp,该框架是一个使用Vue开发的小程序框架,其优势在于开发者只需编写一套代码,即可发布到iOS.Android.H5.以及各 ...
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
- 前言这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要 1.为uni-forms中的"modelValue"数据设置" ...
【第三趴】uni-app页面搭建与路由配置（了解工程目录结构、学会搭建页面、配置路由并成功运行）
文章目录写在前面工程结构新页面呈现写在最后本期推荐写在前面聚沙成塔--每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端 ...
uniapp 学习笔记二十二购物车页面结构搭建
uniapp 学习笔记二十二购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
uniapp目录结构
学习开发uniapp 必须对新建项目的结构有所了解,才能知根知底 components uni-app组件目录,放可复用的组件 pages 业务页面文件存放的目录 static 存放应用引用静态资源( ...
① uni-app 介绍、项目搭建、目录结构
uni-app uni-app介绍项目搭建目录结构 App.vue 和 main.js manifest.json uni.scss pages.json 页面配置 tabbar的配置 condi ...
前端vue uni-app仿企查查、天眼查关联投资机构股权结构树形结构控股结构
快速实现vue uni-app前端仿企查查.天眼查关联投资机构股权结构树形结构控股结构, 下载请访问uni-app插件市场:https://ext.dcloud.net.cn/plugin?id ...
uniapp的目录结构反思与整理 app.vue【base】pages.json【配置】main.json【框架入口文件】
App.vue 作用是全局样式+全局的生命周期相当于PHP里面的BaseControlller文件 [Base] pages.json作用是配置路由+导航条+选项卡+tabbar ...

【uniapp】结构

目录