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.mzph.cn/news/886226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北京大学c++程序设计听课笔记101

基本概念 程序运行期间&#xff0c;每个函数都会占用一段连续的内存空间。而函数名就是该函数所占内存区域的起始地址&#xff08;也称“入口地址”&#xff09;。我们可以将函数的入口地址赋给一个指针变量&#xff0c;使该指针变量指向该函数。然后通过指针变量就可以调用这个…

离散:消解与归结规则的使用 例子详细分析

我们来详细分析一下这个逻辑表达式&#xff1a; \[(p \vee r) \land (q \vee r)\] 首先&#xff0c;我们回顾一下析取&#xff08;OR&#xff09;和合取&#xff08;AND&#xff09;运算的基本性质&#xff1a; 1. **析取&#xff08;OR&#xff09;**: \(A \vee B\) 为真当且…

构建客服知识库:企业效率提升的关键步骤

客服知识库是企业提升客户服务效率和质量的重要工具。它不仅帮助客服团队快速准确地回答客户问题&#xff0c;还能通过数据分析来优化服务流程和提升客户满意度。 1. 明确知识库的目标和范围 构建客服知识库的第一步是明确其目标和范围。这包括确定知识库的主要用户群体、需要…

Linux运维工程师推荐学习的开发语言

前言&#xff1a;会开发的运维和不会开发的运维可以说是两个世界的运维。 个人推荐python和go&#xff0c;前者可以做自动化运维&#xff0c;后者可以深挖k8s&#xff1b;最近就不先演示运维服务技术的部署和架构搭建了&#xff0c;在深挖自动化运维&#xff0c;为了让现在的工…

整合seata遇到的问题

自己遇到的问题&#xff0c;记录一下。 1、版本问题 我seata用的是1.7&#xff0c; 数据库驱动是 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><version>8.0.31</version><scope>…

Android View 调用基础 通用属性基础 方法场景说明

调用基础 一般常用的方法和属性说明一下情况1.坐标系getX和getY 相对于父布局getTranslationX和getTranslationY 偏移量getRawX和getRawY 相对于屏幕原点 2.margin3.setTag 存储额外的数据 我都有哪些场景需要使用 简单记录下1.更新所有Viewgroup下的View 一般常用的方法和属性…

从零到一:利用 AI 开发 iOS App 《震感》的编程之旅

在网上看到一篇关于使用AI开发的编程经历&#xff0c;分享给大家 作者是如何在没有 iOS 开发经验的情况下&#xff0c;借助 AI&#xff08;如 Claude 3 模型&#xff09;成功开发并发布《震感》iOS 应用。 正文开始 2022 年 11 月&#xff0c;ChatGPT 诞生并迅速引发全球关注。…

.netcore + postgis 保存地图围栏数据

一、数据库字段 字段类型选择(Type) 设置对象类型为&#xff1a;geometry 二、前端传递的Json格式转换 前端传递围栏的各个坐标点数据如下&#xff1a; {"AreaRange": [{"lat": 30.123456,"lng": 120.123456},{"lat": 30.123456…

系统掌握大语言模型提示词 - 从理论到实践

以下是我目前的一些主要个人标签&#xff1a; 6 年多头部大厂软件开发经验&#xff1b;1 年多 AI 业务应用经验&#xff0c;拥有丰富的业务提示词调优经验和模型微调经验。信仰 AGI&#xff0c;已经将 AI 通过自定义 Chatbot /搭建 Agent 融合到我的工作流中。头部大厂技术大学…

k8clone二进制工具迁移k8s中的无状态应用

1 概述 k8clone是一个简便的Kubernetes元数据克隆工具&#xff0c;它可以将Kubernetes元数据&#xff08;对象&#xff09;保存为本地压缩包&#xff0c;在恢复时可将这些元数据恢复到目标集群中&#xff08;已存在的资源不会被覆盖&#xff09;。它不依赖远程存储&#xff0c…

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

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

芯原科技嵌入式面试题及参考答案

Linux 相关驱动怎么写? 在 Linux 中编写驱动主要有以下步骤。 首先,需要了解设备的硬件特性。这包括设备的工作原理、寄存器地址和功能、中断号等信息。例如,对于一个简单的 GPIO 设备,要知道其数据寄存器、方向寄存器的位置以及读写操作的规则。 然后是模块的初始化部分。…

计算机毕业设计Python+CNN卷积神经网络股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Nginx SSL+tomcat,使用request.getScheme() 取到https协议

架构上使用了 Nginx tomcat 集群, 且nginx下配置了SSL,tomcat no SSL,项目使用https和http协议。 发现 request.getScheme() //总是 http&#xff0c;而不是实际的http或https request.isSecure() //总是false&#xff08;因为总是http&#xff09; request.getRemoteAddr(…

机器学习 ---线性回归

目录 摘要&#xff1a; 一、简单线性回归与多元线性回归 1、简单线性回归 2、多元线性回归 3、残差 二、线性回归的正规方程解 1、线性回归训练流程 2、线性回归的正规方程解 &#xff08;1&#xff09;适用场景 &#xff08;2&#xff09;正规方程解的公式 三、衡量…

琐碎笔记——pytest实现前置、后置、参数化、跳过用例执行以及重试

pytest的fixture中文介绍可参考&#xff08;不过文档稍微有点老&#xff09;&#xff1a; https://www.osgeo.cn/pytest/fixture.html#what-fixtures-are pytest各个作用域的fixture scope “function” 可作用于每个用例 fixture使用的声明放在类定义前面&#xff0c;类中的…

蓝桥杯c++算法学习【3】之思维与贪心(重复字符串、翻硬币、乘积最大、皮亚诺曲线距离【难】:::非常典型的必刷例题!!!)

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 思维与贪心 一、重复字符串 【问题描述】 如果一个字符串S恰好可以由某个字符串重复K次得到&#xff0c;我们就称S是K次重复字 符串…

Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

兼容性注意&#xff1a; Vite 需要 Node.js 版本 18 或 20。然而&#xff0c;有些模板需要依赖更高的 Node 版本才能正常运行&#xff0c;当你的包管理器发出警告时&#xff0c;请注意升级你的 Node 版本。【摘抄自vite官网】 这里我用的node版本是 v18.20.2 创建项目&#xf…

低代码集成多方API的简单实现

在现代软件开发中&#xff0c;集成多个API服务提供商已成为常见需求。然而&#xff0c;不同的API认证机制和数据格式使得集成过程变得复杂且耗时。为了应对这些挑战&#xff0c;本文将介绍一种低代码解决方案&#xff0c;通过配置化管理和简化的代码逻辑&#xff0c;帮助开发者…

C++ 编程基础(5)类与对象 | 5.8、面向对象五大原则

文章目录 一、面向对象五大原则1、单一功能&#xff08;Single Responsibility Principle, SRP&#xff09;2、开放封闭原则&#xff08;Open/Closed Principle, OCP&#xff09;3、里氏替换原则&#xff08;Liskov Substitution Principle, LSP&#xff09;4、接口隔离原则&am…