草庐IT

【笔记01】在 uniapp 安装 uview-ui

目录1、前言2、安装HBuilderX3、创建第一个项目4、安装uview-ui组件库a.在main.js加入如下代码b.在uni.css文件中引入theme.scssc.在App.vue的style中引入index.scssd.在pages.json文件中配置easycome.测试是否引入成功1、前言①第一次参与工作期间,我用vue搭建制作公司的一个项目。一个前端同事甲(甘圆圆)问我为什么不用uniapp和HBuilderX?还说用uniapp更加容易。在帮我处理某个bug(用vue创建的项目需要引入base.css和normalize.css,否则样式未清除)的使用坐离我比较近的另一个同事

uni-app - 全端兼容 Steps 步骤条组件(支持绑定点击事件、颠倒文字位置、自定义样式)解决 uview 组件库的 Steps 步骤条无法绑定点击事件且不兼容微信小程序,详细教程组件插件源码

前言uview组件库,Steps步骤条组件不兼容微信小程序,而且无法为每个“步骤阶段”绑定点击事件,图标也有白色背景块极其难用。本文实现了全平台兼容的步骤组件,支持绑定点击事件、自定义样式、显示的文字可在步骤条上方或下方,您只需要一键复制(提供了详细的注释),几分钟便可快速移植到您的项目中去,无任何第三方依赖!如下图所示,可搭配有色背景(或纯白背景)漂亮显示,可灵活更改字体、颜色、位置等样式:示例代码干净整洁,无任何乱七八糟的样式第一步

uniapp使用uview

uniapp如何使用uview框架简介安装案例简介uview框架已经出到2.0了,从当初的1.0到2.0,一路走来,在uniapp中使用框架。确实帮助自己节省许多时间,为了以后更好的应用,记录一下使用方法和使用心得。安装1.uview的安装方式有两种,一种是去插件市场下载插件,另外一种是利用npm加载。为方便使用,直接在插件市场下载,链接https://ext.dcloud.net.cn/plugin?id=1593,使用HbuilderX导入插件。2.uniapp项目中添加sass和sass-loader解析。//安装sassnpmisass-D//安装sass-loadernpmisass

uniapp+uView2.0实现自定义动态tabbar

    1.需求说明    2.实现原理说明    3.实现过程        3.1集成uView2.0        3.2自定义tabbar        3.3vuex定义tabbar共享信息        3.4tabbar显示个数控制1.需求说明    要求不同时间显示不同的tabbar.点击不同的tabbar跳转到不同的页面,能随时实现tabbar显示个数的切换。一种是只需要显示首页、我的页面;另一种是显示首页、消息、我的页面。效果图如下:2.实现原理说明    基于uview2.0的u-tabbar实现自定义tabbar,使用vuex实现tabbar显示状态数据共享。首页和我的

SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

JavaDogChatv1.0.0基于SpringBoot+uniapp简单通讯聊天软件📚项目介绍JavaDogChat简单通讯聊天软件是基于SpringBoot+MybatisPlus+uniapp+uview+stomp等更多优秀组件及前沿技术开发,注释丰富,代码简洁,开箱即用,兼容H5+小程序+APP,及其适合入门学习!将想说却不敢说,相爱去不敢爱的思绪放置与此。🎁快速链接微信公众号:JavaDog程序狗关注公众号,发送chat,无任何套路即可获得或访问https://blog.javadog.net/archives/chat🌱体验地址因二维码图被和谐,最好访问https://blog

uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)

theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目(如命令行创建失败,请直接访问gitee下载模板)npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下(uview框架不支持vue3)运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用,打包发布同样Hubil

uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)

theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目(如命令行创建失败,请直接访问gitee下载模板)npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下(uview框架不支持vue3)运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用,打包发布同样Hubil

uniapp使用uview实现弹出键盘输入密码/验证码功能

文章目录(一)效果图(二)使用组件说明(三)HTML代码及涉及到的属性解释keyboard属性:keyboard事件:MessageInput属性:MessageInput事件:(四)css样式(五)js代码实现数据:事件:(一)效果图(二)使用组件说明组件使用的是uview组件,Keyboard键盘和MessageInput验证码输入两个组件配合使用。uview官方文档:Keyboard键盘:https://v1.uviewui.com/components/keyboard.htmlMessageInput验证码输入:https://v1.uviewui.com/components/me

uniapp使用uview实现弹出键盘输入密码/验证码功能

文章目录(一)效果图(二)使用组件说明(三)HTML代码及涉及到的属性解释keyboard属性:keyboard事件:MessageInput属性:MessageInput事件:(四)css样式(五)js代码实现数据:事件:(一)效果图(二)使用组件说明组件使用的是uview组件,Keyboard键盘和MessageInput验证码输入两个组件配合使用。uview官方文档:Keyboard键盘:https://v1.uviewui.com/components/keyboard.htmlMessageInput验证码输入:https://v1.uviewui.com/components/me

uniapp 使用第三方UI库 uview-plus

前言:开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 uniapp项目使用的vue2  -----> 对应  uView uniapp项目使用vue3  ----->  对应 uview-plus一、使用Album相册功能我用这个功能开发类似动态、朋友圈那种的列表。使用起来,目前存在一个问题是,我想实现的功能是,一排展示3张图片或2张图片时,图片的大小可以自定义。解决问题方式1:根据图片数量判断,设置multipleSize大小,但排列的方式会变得奇怪。解决问题方式2:通过rowCou