uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)

简介: 本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。

引言

在前端开发中,掌握一些实用的技巧能够显著提升开发效率和用户体验。本文将介绍几个关键的前端开发技巧,帮助开发者更好地应对常见的挑战。

去除顶部导航

加在哪,哪就没有

"navigationStyle":"custom",

跨域的问题

下载这个可以用来加载全局变量

yarn add dotenv
下载这个可以用来加载全局变量

 "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    "target" : "",
                    "changeOrigin" : true,
                    "secure" : false,
                    "ws": false,
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        }
    }

blobe查看图片

    <image :src="imgUrl?imgUrl:''"></image>


var blob = new Blob(["你的blob数据"], { type: 'image/png' });
var reader = new FileReader();
reader.onload = function(event) {
  var imgURL = event.target.result;
  // 现在你可以使用这个data URL在<image>组件中显示图片
  // 但请注意,data URL不适合大文件,因为它会将整个文件内容编码为Base64
};
reader.readAsDataURL(blob);

window.open("你的图片链接地址");

v-deep

去浏览器找类名

<template>
  <uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
    <uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input" class="my_input"></uni-easyinput>
  </uni-section>
</template>
<script setup>
import {ref} from "vue";
const value = ref("")
const input = ()=>{
  console.log(value.value)
}
</script>
<style scoped lang="scss">

:deep(.uni-easyinput__content  ){
border: 1px solid red;
  height: 100rpx;
}
</style>

修改左上角

<template>
  <view>
    测试页面2
  </view>
</template>

<script >
export default {
  data() {
    return {
      flag: true //是否弹出返回提示框
    }
  },
  // 这个onBack 是uniapp 自定义 的函数 
  // 他是页面左上角返回用的 
  onBackPress() {
    console.log("hello")
  }
}


</script>


<style scoped lang="scss">

</style>



相关文章
|
2天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1517 4
|
29天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
5天前
|
人工智能 Rust Java
10月更文挑战赛火热启动,坚持热爱坚持创作!
开发者社区10月更文挑战,寻找热爱技术内容创作的你,欢迎来创作!
492 19
|
2天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法:MVCC(多版本并发控制)和LBCC(基于锁的并发控制)。MVCC通过记录版本信息和使用快照读取机制,实现了高并发下的读写操作,而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理,包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现,并解释了事务ID的分配和管理方式。最后,对比了四种隔离级别的性能特点,帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
179 1
|
8天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】,涵盖本月产品和功能发布、活动,应用实践等内容,帮助您快速了解阿里云百炼产品的最新动态。
阿里云百炼产品月刊【2024年9月】
|
21天前
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
9天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
448 5
|
7天前
|
存储 人工智能 搜索推荐
数据治理,是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级,可演进扩展的数据架构体系为企业数据治理预留发展空间,推出敏捷版用以解决企业数据量不大但需构建数据的场景问题,基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
314 2
|
23天前
|
人工智能 IDE 程序员
期盼已久!通义灵码 AI 程序员开启邀测,全流程开发仅用几分钟
在云栖大会上,阿里云云原生应用平台负责人丁宇宣布,「通义灵码」完成全面升级,并正式发布 AI 程序员。
|
25天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛,对ABCDEF每个题进行详细的分析,涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题,解析了问题类型、专业和技能的需要。
2608 22
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析