uniapp 结构
- .hbuilderx 运行到手机上有的调试相关
- common 通用文件 比如 xxx.css 通用样式
- components 组件
- lib
- 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.xxx
xxx: [],
yyy: { name: x, xx: 1 },
},
getters: {
// this.$store.getters.xxx
xxx,
},
// 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 官网 应用生命周期
| 函数名 |
说明 |
| onLoad |
监听页面加载，其参数为上个页面传递的数据，参数类型为 Object (用于页面传参)，参考示例 |
| onShow |
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady |
监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同
