当前位置: 首页 > news >正文

【Uniapp】四、运行环境、终端及组件通信(完结)

1、运行环境判断与跨端兼容

1)开发环境和生产环境

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

  • 在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

2)判断平台

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

  • 编译期判断 编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码。详见:条件编译
// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif
// 如上代码只会编译到H5的发行包里,其他平台的包不会包含如上代码。
  • 运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools)。
switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

3)跨端兼容

uniapp提供条件编译,进行跨端平台的兼容处理。

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

**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef:if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)

%PLATFORM% 可取值如下:

平台
VUE3} HBuilderX 3.2.0+ 详情
APP-PLUSApp
APP-PLUS-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应用联盟
QUICKAPP-WEBVIEW-HUAWEI快应用华为

2、UniAPP 自定义组件通信

自定义组件的概念,一般放在 components 中,除了vue常用的组件通信方法外,自·HBuilderX 2.0.0· 起支持 基于eventBus总线的uni.$emituni.$onuni.$onceuni.$off 方法进行页面的通讯,触发的事件都是 App 全局级别的。

情景假设:进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。

  • 监听事件
    首先,在我的页面监听事件。
// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
    uni.$off('login');  
},

因为事件监听是全局的,所以使用 uni. o n ,需要使用 u n i . on ,需要使用 uni. on,需要使用uni.off 移除全局的事件监听,避免重复监听。

  • 触发事件
    进入登陆页面,触发事件
// 登陆页面  
uni.$emit('login', {  
    avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
    token: 'user123456',  
    userName: 'unier',  
    login: true  
});

使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。

  • 注意
    如果页面没有打开,将不能 注册监听事件 uni.$onuni.$once
    一次性的事件,直接使用 uni.$once 监听,不需要移除。

总结

到这里,Uniapp跨端开发就完结了,撒花!
欢迎大家在评论区留言一起解决,如果这篇文章对你有所帮助就点个赞吧👍

相关文章:

  • LeetCode(Array)1365. How Many Numbers Are Smaller Than the Current Number
  • 云原生技能树-docker image 操作-练习篇
  • hids Elastic Security 系列1-Elastic Security介绍
  • 2022 自杀式年度总结(已发老板)
  • [创业之路-46] :动态股权机制 -1- 七步法(流程)
  • Python 实现 JSON 解析器
  • 【数据结构】万字深入浅出讲解顺序表(附原码 | 超详解)
  • Allegro如何设计线圈操作指导
  • c程序gcc编译常见报错及解决方法整理
  • SSH (Secure Shell)
  • 《蓝桥杯》30天拿下Python算法设计与分析【Day 11】
  • PyTorch初学者指南:数据预处理