引言
在前端开发中,掌握一些实用的技巧能够显著提升开发效率和用户体验。本文将介绍几个关键的前端开发技巧,帮助开发者更好地应对常见的挑战。
去除顶部导航
加在哪,哪就没有
"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>