草庐IT

uniapp-uni-easyinput

全部标签

uniapp开发小程序解析经纬度获取当前位置信息(高德地图三)

选择了高德地图定位高德地图官网小程序步骤如下:   1.首先创建应用    2.点击增添key按钮申请小程序key    3.然后下载它的微信小程序版SDK:微信小程序SDK    4.把下载的sdk放在公共的文件里,这里我放在了utils文件目录下     5.使用页面导入此方法 //引入高德地图sdk importamapfrom'@/utils/amap-wx.130.js';    6.全部高德地图获取小程序当前位置代码importamapfrom'@/utils/amap-wx.130.js';exportdefault{data(){return{amapPlugin:null,k

uniapp正确引入本地iconfont(阿里图标库)(亲测无问题)

1.文件说明从阿里巴巴iconfont下载的文件中包含iconfont.ttf、iconfont.css,将iconfont.ttf文件转位base64。2.转换地址转换地址3.操作方式3.1打开iconfont.css文件,修改@font-face部分,将转换好的base64代码粘贴到对应位置,并且设置代码如下:@font-face{font-family:"iconfont";src:url(data:font/truetype;charset=utf-8;base64,转换的base64内容

uniapp小程序自定义签名面板组件,小程序页面引用实现横屏签字(亲测有效)

需求:uniapp小程序自定义签字面板组件,canvas手写签名画板,小程序页面引用实现横屏签字实现效果:一、自定义组件在项目中创建components文件夹,在文件夹下创建my-sign组件,组件下创建my-sign.vue和index.jsmy-sign.vue组件代码:template> viewclass="signature-wrap"> canvas :canvas-id="cid" :id="cid" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" di

有关Vue、微信小程序、UniApp中的CSS中的宽度width单位、自适应

在Vue中,可以使用以下单位来设置宽度(width)像素(px):最常用的单位,表示一个绝对长度单位。例如,width:200px;表示宽度为200像素。百分比(%):相对于父元素的宽度计算。例如,width:50%;表示宽度为父元素宽度的50%。视窗宽度(vw):相对于视口(浏览器窗口)宽度的百分比。例如,width:25vw;表示宽度为视口宽度的25%。视窗高度(vh):相对于视口(浏览器窗口)高度的百分比。例如,height:50vh;表示高度为视口高度的50%。em:相对于元素自身字体大小的倍数。例如,width:2em;表示宽度为字体大小的两倍。rem:相对于根元素(html)字体大

uniapp 获取元素位置信息

在uniapp中,可以使用DOM节点的getBoundingClientRect()方法来获取元素的位置信息。该方法返回一个DOMRect对象,包含元素左上角和右下角在视口坐标系中的坐标。例如,下面的代码可以获取元素的顶部位置:letelement=this.$refs.myElement;letrect=element.getBoundingClientRect();lettop=rect.top;注意,获取到的坐标是相对于视口的坐标(即浏览器窗口的左上角),如果需要获取相对于整个文档的坐标,可以使用pageXOffset和pageYOffset属性。letelement=this.$ref

uni-app编译报caniuse-lite is outdated的处理方案

caniuse库过期问题的原因uni-app的编译器是基于npm的,依赖了众多包括mpvue、webpack在内的npm库,这些库又引用了一个三方库caniuser-lite。caniuser-lite这个库的代码里有个浏览器兼容数据的更新检查,过老的数据影响自动补齐css前缀。开发者平时写uni-app时并不需要手动补浏览器的css前缀,就是因为这个库在自动补前缀。这个库它自己每半年过期一次,过期后会报错如下:Browserslist:caniuse-liteisoutdated.Pleaserunnextcommandnpmupdatecaniuse-litebrowserslist``这

uniapp、微信小程序返回上页面刷新数据

目录前言:方法1:方法2:方法3:前言:返回上页面刷新数据这个功能主要用于在当前页面点击跳转到另一个页面之后,在另一个页面对数据进行了操作,比如:阅读量,然后返回上页面,让阅读量随之改变方法1:使用uniapp和微信小程序的跳转api进行跳转,这样会重新执行onload事件方法2:不经常用,没用过,只听说过//页面A.vue//触发自定义事件this.$emit('refreshData',data);//页面B.vue//监听自定义事件并执行数据刷新操作this.$on('refreshData',(data)=>{//执行数据刷新操作});方法3:通过onshow钩子函数进行重新请求接口、

uni-app 微信小程序之好看的ui登录页面(一)

文章目录1.页面效果2.页面样式代码更多登录ui页面uni-app微信小程序之好看的ui登录页面(一)uni-app微信小程序之好看的ui登录页面(二)uni-app微信小程序之好看的ui登录页面(三)uni-app微信小程序之好看的ui登录页面(四)uni-app微信小程序之好看的ui登录页面(五)1.页面效果2.页面样式代码template> viewclass="t-login"> imageclass="img-a"src="https://zhoukaiwen.com/img/loginImg/2.png">image> imageclass="img-b"src="http

uniapp-vue2-微信小程序-滑块验证组件wo-slider

wo-slider是一款支持高度自定义的滑块验证组件,采用uniapp-vue2编写采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序(其他小程序未试过,可自行尝试)可到插件市场下载尝试:https://ext.dcloud.net.cn/search?q=wo-slider使用示例template> viewstyle="height:100vh;font-size:12rpx;margin-top:20px;"> viewv-for="(item,index)incompOptions":key="index"style="displa

uni-simple-router:使用vue-router管理uniapp路由

    笔记中的内容仅适用于HBulider构建的uniapp项目,通过其他方式构建的uniapp项目请参考uni-simple-router官网uni-simple-router(hhyang.cn)    uniapp用到了vue的很多api,但在路由管理的功能上相较于vue-router还是比较欠缺的,比如全局导航守卫。    我们可以通uniapp的插件uni-simple-router来实现类似于vue-router的功能,但多端兼容时,一些用法还需要注意,我们会讲到。一、安装如果你的项目没有使用package,请先初始化:$npminit-y安装依赖:$npminstalluni-