草庐IT

uni app 微信小程序 一次性加载几千条数据优化处理

背景公司销售订单详情里 机器明细数据超过4、5000台的时候整个页面出现空白,当然也别问我为什么要一次性加载这么多条数据,问就是需求设计如此。分析因为需要显示每个类别需要统计总数量、总金额,所以后台返回的数据格式是包裹两层list,前端需要遍历两次。setData一次性能超过限制、child项没有修改为组件的方式。自定义组件的更新只在组件内部进行,不受页面其他部分内容的影响。 后台返回数据格式HTML(按照之前代码优化,命名各种行内样式就懒得修改了) {{item.name}} 共{{item.s

关于荣耀手机在HBuilderX中运行uni-app真机测试检测不到设备的解决方案

本人使用的荣耀手机,安卓11,一开始不管是下载荣耀手机助手还是360手机助手都是检测不到手机设备或者能检测到,但是启动真机调试就会断掉。解决方案:1.手机具有开启开发人员选项2.数据线连接电脑,之后选择传输文件3.在开发人员选项中点击USB调试 4.最重要的荣耀的特殊操作的一步,选择USB配置-->音频来源 

使用uni-app框架中uni.chooseAddress()接口,获取不到用户收货地址

错误描述在我们使用uni-app框架或微信原生开发微信小程序时,使用到uni.chooseAddress(OBJECT)接口获取用户收货地址时,无法跳转到收货地址页面获取。打印接口返回信息,显示"chooseAddress:failtheapineedtobedeclaredintherequiredPrivateInfosfieldinapp.json/ext.json"等内容,意思是此API接口需要在app.json中做声明才可以使用。产生原因我们来到微信官方文档可以发现如下图,在使用方法中,明确指出自2022年7月14日后发布的小程序,若使用该接口,需要在app.json中进行声明,否则

uniapp表单uni-forms校验自定义校验规则,手机校验、身份证校验

validateFunction自定义校验规则如果需要使用validateFunction自定义校验规则,则不能采用uni-forms的rules属性来配置校验规则,这时候需要通过ref,在onReady生命周期调用组件的setRules方法绑定验证规则无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。uni-formsref="form"> uni-forms-itemrequiredlabel="手机号"name="mob"> uni-easyinputv-model="mob"placeholder="手机号"/> /un

uni app Signalr 支持 微信小程序和支付宝小程序

constprotocal={ protocol:"json", version:1};constMessageType={ /**IndicatesthemessageisanInvocationmessageandimplementsthe{@linkInvocationMessage}interface.*/ Invocation:1, /**IndicatesthemessageisaStreamItemmessageandimplementsthe{@linkStreamItemMessage}interface.*/ StreamItem:2, /**Indicatesthemes

【小程序】uni-app自定义导航栏适配小程序,对齐胶囊

实现效果 自定义导航栏对齐胶囊按钮,实现方法是通过获取胶囊按钮的顶部(top)高度和自身高度(height),动态设置导航栏的样式(style)。通过uni.getMenuButtonBoundingClientRect(),可以获取胶囊按钮的布局位置信息,包括width、height、top、bottom、left、right。1、定义变量exportdefault{data(){ return{searchBarTop:0,//搜索栏的外边框高度,单位px searchBarHeight:0,//搜索栏的高度,单位px } }}2、获取胶囊按钮的布局位置信息onLoad(){letm

uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

一、创建项目架构首先使用官方提供的脚手架创建一个项目在这里插入代码片,这里我创建的vue3+vite+ts的项目:npxdegitdcloudio/uni-preset-vue#vite-tsproject-name(如命令行创建失败,请直接访问gitee下载模板)[gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip)二、下载依赖yarninstall启动yarndev:mp-weixinyarndev:h5三、下载安装包1.yarnadd@types/node-D2.yarnaddsass

Uni-App在UI设计领域的应用

在当今数字化时代,移动应用程序成为了人们生活中不可或缺的一部分。而UI设计作为移动应用开发中至关重要的一环,扮演着塑造用户体验和提升产品价值的关键角色。而在众多开发工具中,Uni-App以其跨平台、高效率和丰富的生态系统而备受推崇。本文将探讨Uni-App在UI设计领域的应用,展示其为UI设计师带来的便利和创新。第一部分:Uni-App简介1.开发效率高:uni-app是一款跨平台的应用开发框架,可以使用一套代码,同时发布到iOS、Android、H5、小程序等多个平台,大大提高了开发效率。2.功能强大:uni-app提供了丰富的组件和API,可以满足开发者的大部分需求,可以快速实现复杂的功能

小程序-uniapp:uni-app-base 项目基础配置及使用,开箱可用

目前(20230605)uni-app最新版本(3.8.4.20230531)一、官网文档uni-app官网二、创建项目项目目标:vue3+ts+vite+vscode创建以typescript开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)npxdegitdcloudio/uni-preset-vue#vite-tsuniapp-base​本文创建成功​为了验证gitee下载下来的项目是否完全一致,下载下来看一下除了项目名不一样,其他完全一致,两种方法均可放心使用​ 安装依赖pnpmi project.config.json增加"miniprogramRoot":"dist/

uni-app 中使用背景图片

uni-app中使用背景图片一:H5上使用(但是在微信小程序中报错)background-image:url(../../static/images/bg.png);background-size:100%100%;background-position:50%50%;background-repeat:no-repeat;二:微信小程序中可以1,使用网络图片(对不同环境需要不同配置),2,或者base64(需要本地转换),3,或者使用标签(推荐使用)viewclass="out"> imageclass="image-bg"src="/static/images/bg.png"/> //..