uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)-阿里云开发者社区

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

2024-10-16 126

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了几个前端开发技巧：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>