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>



相关文章
|
4月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
21天前
|
缓存 数据处理 UED
App加载页面的等待体验设计技巧
App加载页作为整个用户体验的一部分,直接影响用户对于产品服务的忠诚度和满意度。
42 13
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
852 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
移动开发 前端开发 安全
uni-app跨域调试你学会了没
uni-app跨域调试你学会了没
68 0
|
4月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
|
4月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
4月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
4月前
|
Java 应用服务中间件 Windows
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
|
4月前
|
API 网络架构 开发者
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
650 7

热门文章

最新文章