uni-app
UserGuan
这个作者很懒,什么都没留下…
展开
-
uni-app 之 base64 格式的图片显示与保存到相册
【代码】uni-app 之 base64 格式的图片显示与保存到相册。原创 2023-12-15 13:45:00 · 1116 阅读 · 0 评论 -
如何将各种小程序(微信小程序)项目转换为 uni-app 项目
使用【miniprogram-to-uniapp】可以将微信小程序项目转为 uni-app 项目(新版本 HBuilderX 工具已经支持各种小程序转换插件)原创 2023-11-02 12:49:33 · 3472 阅读 · 0 评论 -
uniapp 关于 video 组件的缩放比例问题
在 container 样式的 padding-bottom 设置比例值。原创 2023-10-31 18:30:00 · 817 阅读 · 0 评论 -
uni-app 一些实用的页面模板
- 自定义顶部导航栏 -->data() {return {statusBarHeight: 0, // 状态导航栏高度navigationBarHeight: 0, // 导航栏高度(标题栏高度)navHeight: 0 // 总体高度},onLoad() {/** 状态栏高度 *//** 获取微信胶囊的位置信息 width,height,top,right,left,bottom */原创 2023-12-13 23:00:00 · 1711 阅读 · 0 评论 -
uni-app 小宠物 - 会说话的小鸟
【代码】uni-app 小宠物 - 会说话的小鸟。原创 2023-10-23 20:00:00 · 1123 阅读 · 0 评论 -
uni-app 在 APP 端的版本强制更新与热更新
② 热更新是指把 app 有改动的地方打包进 wgt 文件,只更新 wgt 文件中的内容,不进行整包安装,在用户视角也叫做省流量更新。② 每次打开 app(onLaunch生命周期)的时候,通过接口请求最新版本信息,再获取当前安装包信息,对比版本号。① 开发后台版本管理功能,每次发版上传 android 安装包,记录版本号、是热更新还是整包更新、是否强制更新等。③ 如果版本号不一致,且接口获取的版本号大于当前应用的版本号,则进行整包更新或热更新。主版本号:不兼容的 API 修改。原创 2023-10-23 20:15:00 · 1316 阅读 · 0 评论 -
uni-app 瀑布流布局的实现
获取每一列的高度,每次图片加载时,把该图片加载到列高度最短的那一列进行实现。注意:这个是通过图片初始化实现的,所以服务器端的数据必须含有图片。原创 2023-10-16 17:54:05 · 4022 阅读 · 5 评论 -
uni-app 在已有的数据对象中动态添加更多的数据对象
它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hello,ningzaichun')Vue.set():将 set 函数绑定在 vue 构造函数中,设置实例创建之后添加的新的响应式属性,且触发视图更新,但是不允许添加根级响应式属性,只可以向嵌套对象添加响应式属性。Vue.set() 是将 set 函数绑定在 Vue 构造函数上,this.$set() 是将 set 函数绑定在 Vue 原型上。原创 2023-10-10 16:42:08 · 1044 阅读 · 0 评论 -
uni-app 实现凸起的 tabbar 底部导航栏
- 自定义底部导航栏 -->原创 2023-09-28 10:59:06 · 3404 阅读 · 0 评论 -
uni-app 使用 scss 实现推荐标签区域显示效果
需要修改 $tagSize(总体大小) 与 $tagFontSize(字体大小) 的值。只需修改 $tagFontSize(字体大小) 即可。原创 2023-09-25 17:31:45 · 332 阅读 · 0 评论 -
uni-app 在微信小程序端预览文件时文件名是一串乱的字符串
【代码】uni-app 在微信小程序端预览文件时文件名是一串乱的字符串。原创 2023-09-23 15:06:50 · 457 阅读 · 0 评论 -
uni-app 苹果手机底部安全区域的适配问题
cursor-spacing:指定光标与键盘的距离(单位 px)。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。特性来解决,不需要自己动态计算高度,只需将如下 CSS 代码添加到样式中即可。使用获取的 bottomPadding 字段来设置光标与键盘的距离。无法解决如果底部区域是输入框,苹果手机的输入法会把输入框遮挡问题。可解决如果底部区域是输入框,苹果手机的输入法会把输入框遮挡问题。解决办法:利用 IOS 新增的。获取系统信息接口方法。原创 2023-09-23 14:07:14 · 2260 阅读 · 0 评论 -
uni-app 点击蒙版层时关闭自定义弹窗
click.stop:用于阻止冒泡@click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗@click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗。原创 2023-09-15 17:19:37 · 1761 阅读 · 0 评论 -
uni-app 实现自定义按 A~Z 排序的通讯录(字母索引导航)
页面样式就不贴了,很简单的 UI 布局。将下面的内容复制粘贴到其中。methods 里面。原创 2023-09-15 16:23:58 · 8706 阅读 · 0 评论 -
uni-app 开发小程序接入隐私协议弹窗
【代码】uni-app 开发小程序接入隐私协议弹窗。原创 2023-09-14 15:04:02 · 416 阅读 · 0 评论 -
uni-app 中 swiper 轮播图高度自适应
2、swiper 标签存在默认高度是 height: 150px;高度无法实现由内容撑开,在默认情况下,图片的高度显示总是 150px。1、在每次滑动切换的时候,动态地获取 swiper-item 内部的 DOM 的元素的高度。1、首先 swiper 标签的宽度是 width: 100%2、将获取的高度动态设置给 swiper 元素。原创 2023-09-04 16:24:45 · 5774 阅读 · 2 评论 -
uni-app 报错 navigateTo:fail page “/pages/.../...“ is not found
没有在 pages.json【微信小程序是 app.json】中定义该页面的路径。这个错误的意思是:识别不到该页面。URL的页面路径错误。原创 2023-08-30 15:19:50 · 1040 阅读 · 0 评论 -
uniapp 禁止遮罩层下的页面滚动
若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了,虽然在编译器上的滚轮依旧可以滚动,但真机环境下的手指滑动无法再触发。注意:如果使用 uview 之类的 ui 框架,@touchmove.stop.prevent 必须放在底层的 view 上面。原创 2023-08-23 21:04:35 · 1256 阅读 · 0 评论 -
uniapp 获取 view 的宽度、高度以及上下左右左边界位置
boundingClientRect 返回的 res 结果(以像素[px]为单位)原创 2023-08-12 11:42:53 · 1969 阅读 · 0 评论 -
uni-app 的 scroll-view 横向滚动右边距不生效
原因:因为 class 为 bodyBox 的子元素(view)的宽度和 scroll-view 是一致的,所以设置成 display:flex;是不管用的(即:scroll-view 并没有溢出,所以 padding 不起作用)缺点是滑动时有滚动条出现,需要手动用 css 去除滚动条。在 scroll-view 的子元素内使用。不使用 scroll-view 改为。原创 2023-03-08 11:30:54 · 975 阅读 · 2 评论 -
微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined
此处选择的基础库为微信中的基础库版本,且仅用于开发者工具内的调试,与移动设备中的基础库版本无关。微信开发者工具 —> 详情 —> 本地设置 —> 调试基础库。该错误主要是因为调试基础库过高或过低导致的。中,将调试基础库版本调低或调高即可。原创 2022-11-06 10:01:22 · 4018 阅读 · 0 评论 -
view子元素双指缩放、移动
【代码】view子元素双指缩放、移动。原创 2022-10-18 11:54:31 · 310 阅读 · 0 评论 -
uni-app判断是否安装了某个APP,有直接打开,无跳转到下载页
【代码】uni-app判断是否安装了某个APP,有直接打开,无跳转到下载页。原创 2022-10-12 17:30:44 · 1280 阅读 · 0 评论 -
uni-app通过urlencode格式化请求体
【代码】uni-app通过urlencode格式化请求体。原创 2022-10-12 16:06:10 · 2394 阅读 · 0 评论 -
uni-app去掉右侧滚动条
注意:::-webkit-scrollbar前要有 scroll-view 的标签名或类名。只能使用于在 scroll-view 中。方法二、通过CSS设置滚动条隐藏。设置为 false 即可。方法一、将滚动条的属性。原创 2022-10-12 15:29:17 · 2047 阅读 · 0 评论 -
uni-app接口请求跨域问题
2、将所有的请求域名改为 '/api',我这里是把请求封装起来的,所以只需要改一个即可。1、打开manifest.json文件,选择源码视图,在里面添加proxy代理。3、全部配置完毕后重启项目即可。原创 2022-10-10 10:30:42 · 1353 阅读 · 4 评论 -
uniapp中开启微信小程序的分包优化与按需注入以及分包预加载配置
uni-app 内支持对微信小程序、QQ小程序、百度小程序、支付宝小程序、抖音小程序(HBuilderX 3.0.3+)、快手小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。JS 文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)。静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用。QQ小程序每个分包的大小是2M,总体积一共不能超过24M。原创 2022-08-13 08:25:33 · 1983 阅读 · 0 评论 -
uni-app动态设置CSS样式
style 里面需使用 kekbeb-case 命名方式:即 --dist-menu 而不是 --distMenu 方式,否则在微信小程序模式运行无效。方法一<view class="fontTip" :style="{ '--dist-menu': distMenu }"></view>data() { return { distMenu: 20 };},<style lang="scss" scoped>$dist原创 2021-12-31 17:15:48 · 5178 阅读 · 0 评论 -
过滤input只输入数字
/* 过滤input只输入数字 */filter(event) { let i = event.target.value; let num = i.charAt(i.length - 1); var reg = new RegExp('^[0-9]*$'); if (!reg.test(num)) { return i.slice(0, -1); } else { return i; }},原创 2020-09-01 13:08:31 · 804 阅读 · 0 评论 -
uni-app 让移动端的高度自适应
<script>export default { data() { return { app_height: 0 }; }, onLoad() { const _this = this; uni.getSystemInfo({ success: res => { console.log('手机可用高度:' + res.w.原创 2020-07-14 11:23:44 · 5446 阅读 · 1 评论