【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%：平台名称

%PLATFORM% 可取值如下：

2、UniAPP 自定义组件通信

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

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

• 监听事件
  首先，在我的页面监听事件。

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

因为事件监听是全局的，所以使用 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.$on 和 uni.$once 。
  一次性的事件，直接使用 uni.$once 监听，不需要移除。

总结

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