- 博客(45)
- 收藏
- 关注
原创 uniapp开发微信小程序,根据胶囊按钮来自定义导航栏
uniapp开发小程序时候,使用自定义的导航栏,因为胶囊按钮的原因,每个设备里胶囊按钮距离顶部的位置都是不固定的,所以为了布局不乱(掩盖了胶囊按钮或者需要跟胶囊按钮对齐),需要动态计算出胶囊按钮的信息,然后动态给自定义导航栏高度。
2025-04-10 22:17:08
104
原创 报错Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
参考链接:https://blog.youkuaiyun.com/weixin_68340504/article/details/144019029。去掉,要么改成"~"只更新小版本,重新下载依赖就好了。
2025-03-11 15:54:42
706
原创 已用HBuilderX(uni-app项目)可视化界面搭建的项目用命令行打包
当你这样做的时候,可能会遇到一些问题,例如先前的可视化版本已经有了vite.config.ts和package.json文件,这个时候你需要把文件copy到外层或者将对应内容copy出来,重新执行了一遍npm i 或者yarn。第一种特点是运行和打包都在Hbuilder上方工具栏操作,第二种是可以像平常开发vue 项目一样,使用npm运行和打包。解决方法:用第二种方法再创建一个项目,然后把第一种方式创建的项目放到新项目的src文件夹下。当做了迁移的工作之后,记得在开发环境启动项目,然后一步步解决问题哦😆。
2025-03-11 15:11:39
149
原创 vue elementui layout布局组件实现规则的弹性布局
方式一:之前遇到的时候,是采用计算元素个数的方式,采用透明元素补齐的方式(比如一个有5个元素,上一行3个正常布局,剩下的2个在下一行是错乱的布局,少一个元素,凑成3个 ,改用透明的方式,就能规则排列)。项目采用的是vue结合elementui的方式,利用layout布局组件完成,这个组件可以有响应式:参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。意味着,最小的时候,列占完,即只展示一个元素,最大的时候,占用6份,即显示4个元素(一行为24份)。
2024-12-03 16:50:08
540
原创 uniapp使用elementUI的table表格组件(按需引入)
背景:项目里需要用到表格,并且是能勾选的,于是想到了elementUI的表格组件,考虑到项目体积,采用按需引入的方式。在main.js(样式一定要引入)
2024-12-02 16:51:57
400
原创 vue3 codemirror插件 格式化SQL语句
参考链接:https://blog.youkuaiyun.com/weixin_44784401/article/details/135884491。3使用 value = sqlFormatter.format(value)–value是codemirror绑定的SQL语句。2.引入 import * as sqlFormatter from “sql-formatter”;背景:一个需求是用了codemirror代码编辑器 ,输入SQL命令,并且可以对SQL格式化。1.安装 sql-formatter。
2024-11-20 10:40:48
427
原创 elementUI 表格组件结合单选框做单选效果显示
value值一定要绑定一个bool值,且为真,isChecked是row上新加的一个属性,目的是实现单选框的勾选状态。实现的效果:点击表格行,前面的radio框实现勾选。
2024-11-19 10:22:47
561
原创 后端一次性返回数据,前端分页
vue 结合elementUI 分页组件,后端一次性返回数据,前端做分页。1.template中。js从后端获取总数据。
2024-11-14 15:31:04
697
原创 前端try、catch、finally使用注意
2、try里出现了异常后,后面的代码不再执行,直接跳转到catch里执行,finally里的语句紧接着执行。3. try和catch里return的值会被finallyreturn的值替代。1、不管有没有异常,finally中的代码都会执行。
2024-11-04 16:09:47
329
原创 Vue 已解决:opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]
在package.json的scripts中加上。
2024-10-23 16:45:38
233
1
原创 uni-app使用uIview的tabbar组件,实现自定义的字体图标
在阿里字体图标下载你需要的图标,格式为svg,下载两个颜色的,一个是激活的,一个是未激活的。下载好将图标文件放在根目录的static文件夹下。这里结合了 uIview的icon组件,slot值 分别规定了激活和未激活的样式。至此,需求得以实现。
2024-07-04 16:07:25
655
2
原创 解决积木报表项目本地引入CSS,字体图标不显示问题
中转换,上传 iconfont.ttf,.勾选 Family support , Base64 encode, TTF 三个选项, 点击 “Convert” 进行转化, 然后 “Download”解压后找到stylesheet.css把里面的内容(@font-face{})拷贝到iviewuiplus.css(通过查阅发现是字体图标的.tff文件需要base64转换。,通过CDN方式引入,字体图标可以正常显示。这时会出现,字体图标不能正确显示的问题。重启项目,字体图标就能正常显示了。检查文件路径并无异常。
2024-03-15 15:45:52
606
原创 React国际化,基于react-i18next
基于i18next不仅限于react,学一次就可以用在其它地方提供多种组件在hoc、hook和class的情况下进行国际化操作适合服务端的渲染历史悠久,始于2011年比大多数的前端框架都要年长因为历史悠久所以更成熟,目前还没有i18next解决不了的国际化问题有许多插件的支持,比如可以用插件检测当前系统的语言环境,从服务器或者文件系统加载翻译资源。
2023-03-13 21:58:18
715
原创 Vue和React组件通信常用方式
Vue组件通信Vue父子组件通信1.父组件向子组件传值父组件通过在子组件的组件标签添加属性把值传递给子组件,子组件在props里声明接收父组件:<template> <div class="father"> <com-son :sons="sonList"></com-son> </div></template><script>import comSon from './son'expor
2022-03-02 18:33:48
1042
原创 React错误边界
错误边界ErrorBoundary错误边界的意义在于,如果一个组件出现问题不会影响整个应用,导致渲染失败,转而提示用户“网络忙。。。”,比如A组件的子组件B 组件出了问题,可以应用错误边界,虽然也是显示不出正确页面,但是不至于程序报错。B 组件可能出错,那么需要在父组件A组件运用新增的钩子函数getDerivedStateFromProps()里写:state= {hasError:""}static getDerivedStateFromProps(error){ return {hass
2022-03-02 17:19:20
556
原创 React扩展--类似插槽的renderProps
renderProps有两个组件A、B,单看内部结构并不能看出父子关系,但会出现B组件可能作为A组件的情况,并要从A组件传值给B组件。如下:A组件:class A extends Component{state={name:"tom"}render(){return (<div><h1>我是A组件</h1></div>)}}B组件:class B extends Component{render(){return (&
2022-03-02 17:07:53
460
原创 高阶函数和函数的柯里化
高阶函数如果一个函数符合以下条件中任何一个1.若A函数,接收的参数是一个函数,那么A就是高阶函数2.若A函数调用的返回值依然是一个函数,那么A就是高阶函数常见的高阶函数有:Promise()、setTimeout()、arr.map()等函数的柯里化通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理函数的编码形式。function sum(a){ return(b){ return(c){ a+b+c}}}...
2022-03-01 17:07:18
178
原创 React生命周期
旧生命周期原理图:可见,react包含如下生命周期函数:1.constructor()2.componentWillMount()3.render()4.componentDIdMount()5.componentWillUnmount()6.componentWillReceiveProps()7.shouldComponentUpdate()8.componentWillUpdate()9.componentDIdUpdate()其中3,4,5是最常用的,带“”will“”的2
2022-03-01 17:00:38
104
原创 React非受控组件和受控组件
1.非受控组件输入类的dom的值现用现取就是非受控组件,如下:class Login extends React.Component{handleSubmit = (event) {event.preventDefault()const {username,password} = this}render(){return (<form onSubmit = {this.handleSubmit }>用户名:<input ref = {c=>this.usernam
2022-03-01 00:48:12
224
原创 React三大属性state、props、refs
三大属性state、props、refs,function定义的函数式组件只能操作props,因为函数可以接收参数props。state类式组件特有,用于组件自身使用props用于从外部向组件内部传数据,方法是在组件标签里定义属性传递<Person name="lisi" age="19"/>在组件内部 通过props接收。另外可以对props的类型做限制,引入库。函数式组件利用参数接收propsclass Person extends ReactComponent(){ren
2022-03-01 00:17:41
100
原创 Vue路由器的两种工作模式
hash和history模式在路由定义的mode属性中,可以选择hash或者history1.对于一个url来说,什么是hash值?#及其后面的内容就是hash值2.hash值不包含在http请求中,即:hash值不会带给服务器3.hash模式:1.地址中永远带着#,不美观2.若以后将地址通过第三方app分享,若app校验严格,则地址会被标记为不合法3.兼容性好4.history模式:1.地址干净,美观2.兼容性较hash模式差3.应用部署上线时需要后端人员支持,解决刷新页面服务端40
2022-02-28 22:21:58
297
原创 Vue路由守卫(导航守卫)
路由守卫包括全局守卫(beforeEach())、路由独享守卫(beforeEnter())、组件内守卫(beforeRouteEnter()、beforeRouteLeave())1.全局守卫(beforeEach())1.全局前置路由守卫beforeEach(),初始化的时候调用,每次路由切换前调用。在定义路由router的时候,通过router.beforeEach()来做一些权限管理,比如一个页面需要登录权限,登录了的才能进入这个页面。在router.js文件router.beforeE
2022-02-28 19:35:46
508
原创 Vue的插槽
插槽:组件标签的标签体内容是不能解析的,要解析就要用到插槽,比如一个<Category/>插槽,一般使用的是自闭合就用上了这个插槽,但是如果<Category>你好!</Category>这个标签体内容“”你好!“”就不能解析出来,使用插槽解决问题。1.默认插槽在定义组件Category的时候<h2>呵呵呵</h2><slot></slot>这样“你好!”就会显示在<slot>的位置,相当于是挖了一个
2022-02-28 18:05:32
3169
原创 Vue、React脚手架解决跨域问题,配置代理
配置代理跨域问题是由于浏览器的同源策略出现的,即前端端发送Ajax到服务器请求数据,会发生跨域问题,导致拿不到返回的数据。常用3种方式解决:1.CORS这种方式是后端人员对请求做处理2.JSONP这种方式是在 script标签发请求,利用script不受同源的限制,缺点是只能发get请求,并且需要后端配合3.配置代理Vue脚手架处理跨域问题采用配置代理的方式,参考官方文档这里,比如当前前端处于http://localhost:8080,需要请求的数据在http://localhost:5000
2022-02-28 16:32:08
423
原创 React路由ReactRouter6
React路由ReactRouter6V6路由新增了一些东西,也做了一些替换,路由配置上跟vue更加相似,值得一提的是,react官方提倡函数组件,所以这个例子将使用函数组件说明。第一步安装路由npm install react-router-dom将会自动安装V6版本的路由。首先还是分清导航区和路由组件展示区,整理好布局左边的为导航区,右边为路由组件展示区,所以在APP组件里依然是定义路由链接import {NavLink,Link} from 'react-router-dom'Na
2022-02-24 22:38:24
4664
2
原创 vue状态管理vuex
说明:这个例子使用vue2.0 并且安装的vuex也要跟这个版本对应否则会出现各种各样的错误正确对应版本package.json里 "vue": "^2.6.14", "vuex": "^3.6.2"之前由于我安装的是vue3 所以我学的vuex都对应不上。vue2和vue3main.js代码都不同,加上vuex的版本也是不同为4.0,所以各种报错 ,下面为该例用的版本。npm install vuex@3目录结构vuex简单使用步骤1.安装vuexnpm install
2022-02-22 14:08:50
896
原创 react知识点
函数式组件 props.name,类式组件this.props.name**react 支持三种方式获取 ref,传统的字符串 ref,React.createRef(),回调函数,第一种需要从 refs 上去读取,第二种需要访问 myRef.current,回调函数写法:<input type=“text” ref={(node) => {this.myRef = node}} />你可以直接通过你声明的 myRef 直接访问,但是...
2022-02-19 15:04:08
193
原创 CSS知识点
意思是如果设置的不是max-width:500px,而是width:500px;那么当浏览器窗口小于500px;时会发生横向的滚动条,(横向滚动条不规范),如果是max-width的话,窗口大于或等于500就按500显示,如果窗口小于500 那么按照窗口大小显示,比如窗口只有300.那么元素的宽度就是300每个字母之间的距离 而不是单词就是说一段文字 如果超出了窗口大小,如果white-space:nowrap就不换行 出现横向滚动条,如果...
2022-02-11 21:30:07
183
原创 html知识点
1 This is a link 包含 元素 标签 元素内容 属性(键值对)2 pre 标签很适合显示计算机代码:for i = 1 to 10 print inext i使用 Target 属性,你可以定义被链接的文档在何处显示Visit W3School!alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。图像映射cellspacingcellpaddingid 必须包含至少一个字符,且不能包含空白字符(空格、制表符
2022-02-10 18:23:54
149
原创 VUE视频截图
VUE视频截图模板语法data的写法—不常用object.defineproterty数据绑定 双向代理VUE事件处理computed只能读不能改的computed 相当于只有get 没有set可以读 可以改的computed get和set都有...
2021-07-13 09:51:05
651
原创 uni-app
uniappsass安装 style里 lang=“scss”组件通信父传子子传父子组件中父组件中全局vue.prototype.baseurl="" 或者 app.vue里globalData插槽 (跟vue一样使用的)uni-ui使用步骤测试请求地址
2021-06-24 10:28:56
158
原创 微信小程序
微信小程序iconfont下载字体图标文件 以wxss的后缀引入然后这样用可滚动视图区域–区别于轮播图 类似于掌盟活动展示 那种单行文本溢出省略号多行文本溢出启动他的服务器请求受到限制解决封装功能函数先写好功能函数 然后找到动态的东西作为形参,以后通过传递实现动态,Promise风格使用封装的函数-引入函数所在的文件import,async await封装URL循环wx:for 默认是item为每个子元素自定义item名动态数据 双引号 里双花
2021-06-23 05:45:48
170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人