【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 , 标签就能使用，因为该文件夹下自带 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 本身不是页面，这里不能编写视图元素，也就是没有