uni-app快速入门(五)--判断运行环境及针对不同平台的条件编译

一、判断运行环境

在实际项目开发中,经常需要进行开发环境和生产环境的切换,uni-app可根据process.env.NODE_ENV判断当前运行环境是开发环境和生产环境,根据不同的环境调用不同的后台接口,具体实现方式:

在项目的static目录下建一个js目录,在js目录中再创建一个conf子目录,然后创建一个config.js文件:

let baseApi=process.env.NODE_ENV==='development'?"http://localhost":"http://www.xxx.com';

export default {
    baseApi
}

接下来将config.js文件导入到main.js:

import App from './App';
import config from "./static/js/conf/config";

Vue.prototype.$config=config;

在pages/index/index.vue的onLoad可以这样调用进行测试:

onLoad((opts)=>{

               console.log(this.$config.baseApi);

       ......

})

一、判断平台

1、编译期判断

uni-app平台判断包括编译期判断和运行期判断。编译期判断可以写在<script>标签、<template>标签和<style>标签,对于js文件,预编译标签使用//注释,.css文件使用/* */注释、.vue文件使用<!-----> ,换句话说,就是脚本处用//,css处用/**/,页面组件或元素处用<!---->

下面是页面组件处的写法:

js脚本处的写法:

css样式处的写法:

因为uni-app支持编译到多种平台,包括H5、微信小程序、APP等,所以预编译语句的平台编码有一套标准的定义,其中H5的编码为H5,微信小程序的编码为MP-WEIXIN,支付宝小程序的编码为MP-ALIPAY,APP的编码为APP-PLUS。

2 运行期判断

运行期判断指代码已经打入包中,需要再运行期间判断平台类型,可以使用uni.getSystemInfoSync().platform,示例:

    switch(uni.getSystemInfoSync().platform){

        case 'android':

             console.log('安卓');

             break;

         case 'ios':

             console.log('苹果');

             break;

          default:

             console.log('其他');

             break;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/16724.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

QT定时器

QT定时器 1.概述 这篇文章介绍如何使用定时器 2.定时器 2.1.创建项目 新建一个普通的widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 2.1.QTimer 在帮助文档搜索timerEvent&#xff0c;查看QTimer Class 类提供的定时器。 该类提供了一个定时事件的函…

双指针优质算法题集

目录 一、双指针算法介绍 二、移动0 1、题目链接 2、题解 3、代码实现 &#xff08;1&#xff09;、初次实现&#xff1a; &#xff08;2&#xff09;、优化后的实现&#xff1a; 二、复写0 1、题目链接&#xff1a; 2、题解 3、代码实现 一、双指针算法介绍 这里的指…

博奥龙黑胶虫去除剂,新品来袭!

形态特征&#xff1a; 大小方面&#xff1a;黑胶虫的直径通常在 0.5~1 微米左右&#xff0c;一般比细菌要小&#xff0c;但在显微镜下仍可明显观察到。 形状方面&#xff1a;其形态不规则&#xff0c;初始呈现点状&#xff0c;随着培养时间的增加其形态可以转变为密集的小黑点…

使用Element UI实现前端分页,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量

文章目录 一、前端分页1、模板部分 (\<template>)2、数据部分 (data)3、计算属性 (computed)4、方法 (methods) 二、跨页选择1、模板部分 (\<template>)2、数据部分 (data)3、方法 (methods) 三、限制数量1、模板部分 (\<template>)2、数据部分 (data)3、方法…

HTML5+CSS前端开发[保姆级教学]+基本文本控制标签介绍

引入&#xff1a;Hello&#xff0c;各位编程猿们&#xff01;前几篇文章介绍了软件的安装以及编写新闻文章的代码初体验&#xff0c;这一篇我们来巩固一些这些知识点&#xff0c;复习一下基本文本控制标签&#xff01;&#xff01;&#xff01; 知识点一&#xff1a;基本文本控…

《FreeRTOS任务基础知识以及任务创建相关函数》

目录 1.FreeRTOS多任务系统与传统单片机单任务系统的区别 2.FreeRTOS中的任务&#xff08;Task&#xff09;介绍 2.1 任务特性 2.2 FreeRTOS中的任务状态 2.3 FreeRTOS中的任务优先级 2.4 在任务函数中退出 2.5 任务控制块和任务堆栈 2.5.1 任务控制块 2.5.2 任务堆栈…

AdaBoost 二分类问题

代码功能 生成数据集&#xff1a; 使用 make_classification 创建一个模拟分类问题的数据集。 数据集包含 10 个特征&#xff0c;其中 5 个是有用特征&#xff0c;2 个是冗余特征。 数据集划分&#xff1a; 将数据分为训练集&#xff08;70%&#xff09;和测试集&#xff08;3…

ffmpeg自动手动编译安装

1.下载linux ndk并配置profile文件 本例以android-ndk-r10e为例 vi /etc/profile export NDK_HOME/root/ffmpeg/android-ndk-r10e export PATH P A T H : PATH: PATH:NDK_HOME source /etc/profile 2.下载x264并生成 git clone https://code.videolan.org/videolan/x264.g…

英伟达基于Mistral 7B开发新一代Embedding模型——NV-Embed-v2

我们介绍的 NV-Embed-v2 是一种通用嵌入模型&#xff0c;它在大规模文本嵌入基准&#xff08;MTEB 基准&#xff09;&#xff08;截至 2024 年 8 月 30 日&#xff09;的 56 项文本嵌入任务中以 72.31 的高分排名第一。此外&#xff0c;它还在检索子类别中排名第一&#xff08;…

Flume1.9.0自定义拦截器

需求 1、在linux日志文件/data/log/moreInfoRes.log中一直会产生如下JSON数据&#xff1a; {"id":"14943445328940974601","uid":"840717325115457536","lat":"53.530598","lnt":"-2.5620373&qu…

RadSystems 自定义页面全攻略:个性化任务管理系统的实战设计

系列文章目录 探索RadSystems&#xff1a;低代码开发的新选择&#xff08;一&#xff09;&#x1f6aa; 探索RadSystems&#xff1a;低代码开发的新选择&#xff08;二&#xff09;&#x1f6aa; 探索RadSystems&#xff1a;低代码开发的新选择&#xff08;三&#xff09;&…

【开发基础】语义化版本控制

语义化版本控制 基础三级结构主版本号次版本号修正版本号 思维导图在node包管理中的特殊规则 参考文件 基础 语义化版本控制是一套通用的包/库的版本管理规范。在各类语言的包管理中都有用到&#xff0c;一般以x.x.x的形式出现在包的命名中。 三级结构 在语义化版本控制中&a…

IDC 报告:百度智能云 VectorDB 优势数量 TOP 1

近日&#xff0c;IDC 发布了《RAG 与向量数据库市场前景预测》报告&#xff0c;深入剖析了检索增强生成&#xff08;RAG&#xff09;技术和向量数据库市场的发展趋势。报告不仅绘制了 RAG 技术的发展蓝图&#xff0c;还评估了市场上的主要厂商。在这一评估中&#xff0c;百度智…

操作系统——同步

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 背景 解决有界缓冲区问题的共享内存方法在并发变量上存在竞争条件&#xff0c;即多个并发进程访问和操作同一个共享数据&#xff0c;从而其执行结果与特定访问次序有关。这种…

IAR调试时输出文本数据到电脑(未使用串口)

说明 因为板子没引出串口引脚&#xff0c;没法接USB转TTL&#xff0c;又想要长时间运行程序并保存某些特定数据&#xff0c;所以找到了这个办法。为了写数据到本机&#xff0c;所以板子必须运行在IAR的debug模式下。 参考&#xff1a;IAR环境下变量导出方法&#xff1a;https…

基于Java Springboot美食食谱推荐系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA 数据库&…

Java集合(Collection+Map)

Java集合&#xff08;CollectionMap&#xff09; 为什么要使用集合&#xff1f;泛型 <>集合框架单列集合CollectionCollection遍历方式List&#xff1a;有序、可重复、有索引ArrayListLinkedListVector&#xff08;已经淘汰&#xff0c;不会再用&#xff09; Set&#xf…

vue 项目使用 nginx 部署

前言 记录下使用element-admin-template 改造项目踩过的坑及打包部署过程 一、根据权限增加动态路由不生效 原因是Sidebar中路由取的 this.$router.options.routes,需要在计算路由 permission.js 增加如下代码 // generate accessible routes map based on roles const acce…

vue3 中直接使用 JSX ( lang=“tsx“ 的用法)

1. 安装依赖 npm i vitejs/plugin-vue-jsx2. 添加配置 vite.config.ts 中 import vueJsx from vitejs/plugin-vue-jsxplugins 中添加 vueJsx()3. 页面使用 <!-- 注意 lang 的值为 tsx --> <script setup lang"tsx"> const isDark ref(false)// 此处…

uniapp如何i18n国际化

1、正常情况下项目在代码生成的时候就已经有i18n的相关依赖&#xff0c;如果没有可以自行使用如下命令下载&#xff1a; npm install vue-i18n --save 2、创建相关文件 en文件下&#xff1a; zh文件下&#xff1a; index文件下&#xff1a; 3、在main.js中注册&#xff1a…