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月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
18小时前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5天前
|
移动开发 前端开发 安全
uni-app跨域调试你学会了没
uni-app跨域调试你学会了没
21 0
|
2月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
|
2月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
2月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
2月前
|
Java 应用服务中间件 Windows
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
|
2月前
|
API 网络架构 开发者
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
|
2月前
|
Web App开发 开发者
【Azure 应用服务】App Service 进入后台管理(Kudu)页面,因为文件过多而显示不全的问题
【Azure 应用服务】App Service 进入后台管理(Kudu)页面,因为文件过多而显示不全的问题
|
移动开发 Android开发 iOS开发
H5页面打开app的一些思考
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 1. 需求 前段时间开发项目,遇到了一个需求,简单来说,就是我们H5的页面有一个“在App中打开”的按钮,用户点击后,如果用户已经安装app,则直接打开app,如果用户没有安装app,那就跳转到下载app的页面 首先,在我的认知中,H5应该是没有能力检测到某一款app是否有安装的(如果有小伙伴知道如何检测,欢迎评论区告诉我,感谢!),所以我们需要一些技巧来完成判断app是否安装这一过程。
H5页面打开app的一些思考