开发过程中的坑(1)

v-model.number

问题

使用.number将数据转成 number类型的时候的,当数据数据到第17位的时候,精确度开始丢失,数据数据到22位的时候,数据格式也会发生变化
原因请看之前的js number 类型溢出问题

经验

可以使用type="number"这种方法有个问题就是数据类型依旧是string类型但是能够限制值输入数字

replaceAll

问题

项目中使用replaceAll IE浏览器打不开 replaceAll 不支持ie

经验

使用方法和属性的时候要考虑IE是否兼容,不确定的可以在can i use中查看

弹窗打开没有回显数据

问题

打开弹窗,有时候接口返回的慢,弹窗打开数据还没有返回会有一段时间的空白

经验

添加loading,等接口返回之后在取消loading;按钮的操作需要调用的接口的也需要添加幂等,防止多次调用接口

Modal

问题

this.$Modal.confirm 中使用this.$Modal.error 时候 不会正常显示,弹窗会一闪就消失

经验

this.$Modal.error 放在setTimeout() 中做个延时一般需要看一下组件的出现延迟的时常,项目中的常用的是300毫秒

计算属性

问题

在一个计算属性变量中使用计算属性中的另一个变量,这个时候会有一个计算属性无限循环的报错
eg:

computed: {
  aa () {
   return  1*123*3333
  }
  bb () {
  return {
   ...this.aa
   ...XXXX
   }
  }
}

经验

方案:使用lodash.cloneDeep()等方法对此类情景下的aa进行深拷贝,不影响源数据。
经验:以后的开发过程中也要充分考虑数据的深浅拷贝导致数据交叉影响的问题。

computed: {
  aa () {
   return  1*123*3333
  }
  bb () {
  return {
   ...lodash.cloneDeep(this.aa)
   ...XXXX
   }
  }
}
### 使用 UniApp 开发 App 的常见问题及解决方案 #### 1. 渲染问题 在某些场景下,UniApp 可能会出现渲染异常的现象,比如页面滚动时发生卡顿或闪烁。这是由于 UniApp 需要将 Web 页面转换为原生页面,而这一过程可能导致性能瓶颈[^1]。 **解决方案**: - 减少复杂 DOM 结构的使用,优化页面布局。 - 对频繁操作的组件启用 `v-if` 替代 `v-show` 来减少不必要的重绘。 - 如果涉及动画效果,建议优先采用 CSS 动画而非 JavaScript 实现。 ```css /* 示例:通过硬件加速提升动画流畅度 */ .animated-element { transform: translateZ(0); } ``` --- #### 2. 性能问题 当处理大量数据或执行复杂的逻辑运算时,UniApp 应用可能出现卡顿或延迟现象。这是因为跨平台框架需要兼顾不同终端的能力差异[^1]。 **解决方案**: - 数据分页加载:对于大数据量列表,可以考虑按需加载的方式(如懒加载)。 - 利用 Vue 的响应式特性,仅更新必要的部分视图。 - 在 HBuilderX 中开启调试模式下的性能分析工具,找出潜在的性能瓶颈。 ```javascript // 示例:实现简单的分页功能 export default { data() { return { currentPage: 1, pageSize: 10, totalData: [] }; }, computed: { paginatedData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.totalData.slice(start, end); } } }; ``` --- #### 3. 兼容性问题 由于 UniApp 支持多端运行,因此可能存在特定设备上的兼容性问题,例如闪退、崩溃等情况。 **解决方案**: - 测试覆盖多种机型和操作系统版本,确保基础功能稳定。 - 查阅官方文档中的已知问题清单并及时升级到最新版本。 - 若发现特殊兼容性错误,可尝试自定义 Native 插件替代标准 API。 --- #### 4. 更新问题 在项目迭代过程中,如果涉及到 UniApp 版本更替,则原有配置文件或者依赖库可能失效;另外,应用商店审核周期较长也可能拖慢上线节奏。 **解决方案**: - 提前规划好迁移路径,并仔细阅读新版变更日志。 - 定期备份重要资源以防意外丢失。 - 向目标市场提交之前做好充分预演工作以缩短最终审查等待时间。 --- #### 5. 打包与签名问题 安卓平台上有时即使完成了云端构建流程仍无法正常使用地理位置服务等功能模块,其根源在于未正确指定正式环境所需的安全散列算法值(SHA1)[^3]。 **解决方案**: - 确认所使用的是否为私有密钥而不是共享测试证书。 - 修改 manifest.json 文件里的 debuggable 属性设为 false 并同步调整对应 SHA1 参数至开发者后台管理系统里登记备案。 --- #### 6. UI 组件交互障碍 针对像输入框被设定成不可编辑状态之后点击事件失灵这类情况也有相应的修正手段可用作参考[^5]。 **解决方案**: - 添加额外样式规则屏蔽掉浏览器自带行为干扰因素从而恢复预期动作触发链路畅通无阻。 ```css .input-disabled-click { pointer-events: auto !important; } ``` --- #### 7. 时间选择器初始化失败 关于日期控件默认选中项未能成功展示的问题同样存在有效应对策略可供采纳实施。 **解决方案**: 手动赋初值给内部变量实例使其能够按照当前时刻点进行呈现安排合理展现形式满足实际业务诉求表达清晰直观易懂便于理解接受程度高用户体验良好反馈积极正面评价较高满意度水平显著提高总体成效明显优于传统方式表现优异值得推广普及广泛应用于各类应用场景当中去创造更大价值回报社会贡献力量推动行业发展进步共同成长壮大携手共创美好未来前景广阔充满希望令人期待不已! ```javascript mounted() { this.$refs.NowEndPick.innerValue = Number(new Date()); } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值