uniapp学习知识精简一

生命周期

• onLaunch 初始化时完成，全局触发一次。一般用于项目的初始化，如token验证、版本验证、生成唯一标识等
• onShow 页面显示时，触发，包括从后台进入
• onHide 页面隐藏时触发，如清除倒计时
• onError 当uniapp报错时触发，如

（1）.msg:错误消息。
（2）.url:发生错误的页面的地址。
（3）.line:发生错误的代码行。

• 一共八个应用生命周期，其他四个不常用

• onUniNViewMessage 对 nvue 页面发送的数据进行监听，
• onUnhandledRejection对未处理的 Promise 拒绝事件监听函数
• onPageNotFound 页面不存在监听函数
• onThemeChange 监听系统主题变化

• 传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM树，导致页面看起来非常卡顿。

• vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

vue的优势：

• 轻量级渐进式框架 视图、数据和结构的分离 响应式双向数据绑定 组件化 虚拟DOM 运行速度快，易于上手 便于与第三方库或既有项目整合
• 文件类型变化
  以前是.html文件，开发也是html，运行也是html。
  现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
  现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以uni-app 有编译器、运行时的概念。

使用 Vuex 需要遵守的规则：

• 应用层级的状态应该集中到单个 store 对象中。
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action 、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── pages
├── static
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules           # 模块文件夹
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

核心概念

每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。
状态管理有5个核心：

• state、getter、mutation、action、module。

Module

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
  在 store 文件夹下新建 modules 文件夹，并在下面新建 moduleA.js 和 moduleB.js 文件用来存放 vuex 的 modules 模块。

├── components             # 组件文件夹
    └── myButton 
        └── myButton.vue   # myButton组件
├── pages
    └── index 
	    └── index.vue      # index页面
├── static
├── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules           # 模块文件夹
        ├── moduleA.js    # 模块moduleA
        └── moduleB.js    # 模块moduleB
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

2：在 main.js 文件中引入 store。

// 页面路径：main.js 
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
	store,
	...App
})
app.$mount()

条件编译

#ifdef APP-PLUS
需条件编译的代码
#endif