【uniapp】结构

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.$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 官网 应用生命周期

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

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

• 组件生命周期: vue 提供

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