UniAPP笔记（五）

小徐今天学习了吗
107 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章UniAPP笔记（四）中，我们学习了UniAPP的相关知识点，包括UniAPP 常用 API 简介、自定义组件、父子组件通信、slot 数据分发与作用域插槽、全局事件定义及通信等相关知识点。在本篇文章中，我们将继续学习UniAPP的相关知识点，包括UniAPP Vuex 状态管理、运行环境判断与跨端兼容等相关知识点。

UniAPP Vuex 状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的应用场景是Vue多个组件之间需要共享数据或状态。

  • State：存储状态数据
  • Getter：从状态数据派生数据，相当于 State 的计算属性
  • Mutation：存储用于同步更改状态数据的方法，默认传入的参数为 state
  • Action：存储用于异步更改状态数据，但不是直接更改，而是通过触发 Mutation 方法实现，默认参数为context
  • Module：Vuex 模块化

使用方式

import {
		mapState,
		mapActions
} from 'vuex'
export default {
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			...mapActions(['userLoginAction', 'userLogoutAction']),
		}
}

运行环境判断与跨端兼容

开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换。

在HBuilderX 中，点击「运行」编译出来的代码是开发环境，点击「发行」编译出来的代码是生产环境。

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

判断平台

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。

编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。

// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
// 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具。

switch(uni.getSystemInfoSync().platform){
case 'android':
   console.log('运行Android上')
   break;
case 'ios':
   console.log('运行iOS上')
   break;
default:
   console.log('运行在开发者工具上')
   break;
}

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法： 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM% ：平台名称
avatar
文章
阅读
粉丝