钉钉小程序踩过的坑

钉钉小程序开发注意事项-2020.05.19

一.模板

Template作为弹框切记慎用input,原因弹框写的动画用position: absolute;或者position: fixed;定位时手机端钉钉小程序input没有使用原生属性导致无法解决键盘顶起页面的BUG,会造成页面被顶起来弹框过高会造成input不可见,如果使用请把input放到最下面。 [^适用于用于所有的定位元素块上]

二.Input

钉钉小程序input目前只支持text、search所以其他多余的属性都不支持如图
在这里插入图片描述
举例:调用数字键盘做纯数字输入框
因为钉钉bug虽然不能用number属性但是直接写这个属性还是可以调起数字键盘的<但是这个键盘可以返回到英文和中文界面>那我们就可以来做些处理使用户只能输入数字了,我第一想到的是onKeypress原生方法写一个正则限制输入

onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode||event.which)))" 

正则限制为数字才能输入,后来发现我太年青了,钉钉把原生属性限制的死死的,试了好几种最后只能用最笨的方法了了:示例

  <input value="{{InsuredPrice}}" type="number" class="input" onInput="bindKeyInput" placeholder="未保价货品最高赔付9倍运费,建议保价" />

bindKeyInput(e) {
    let value = e.detail.value;
    this.setData({InsuredPrice:value});
    let KeyInput = value.replace(/[^0-9]/ig,"");
    this.setData({InsuredPrice:KeyInput})
  },

1.因为钉钉的机制你只能先给input赋值后在修改值在复制,原因是你直接赋值是不能修改页面的input的值。
2.input的onInput方法还有一个坑在手机端输入±等符号返回的值是空的你想做写修改时这时很坑的如你获取不到正常输入的值如:原来输入框中时123此时输入了一个符号e.detail.value获取到的是空导致获取不到原来值请注意<此处巨坑无比>

三.更新管理小程序

dd.getUpdateManager IDE报错不用管这个是V2引擎可用的小程序切换引擎请参考小程序引擎升级计划https://ding-doc.dingtalk.com/doc#/dev/hi3eyb <注意这个是有延迟的发布新版本后不是第一时间就能更新的>

四.企业定制应用无法进行真机测试体验版也是无法使用

             请进行发布后调试,或者开一个测试站发布测试

五. getCurrentPages页面站问题

调用页面站一般就是为了在当前页面修改上个页面的数据如:

    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
        addressArr:[],
        isPlaceholder:false,
        is_default_index:0,
        addressArr_id:[],
        addressArr_index:[],
        page:1,
        last_page:0,
        getAddressType:true
    })
    // prevPage.getAddress(1);
    dd.navigateBack()

prevPage.getAddress() 只有ios可以安卓目前是不支持的解决方法在上个页面onshow中加判断如

  onShow(query) { 
    // 页面显示
    if(this.data.getAddressType == true){
        this.getAddress(1)
    }
  },

如有下个页面则调用方法后记得把getAddressType修改为fasle

            以上请及时注意钉钉更新BUG已提交可能下个版本就修复    记于2020/5/26
<think>嗯,用户这次想了解uniapp在H5和小程序平台开发跨端项目的差异对比。从用户的问题来看,ta应该是个前端开发者,正在尝试用uniapp做跨平台开发,遇到了具体问题想寻求解决方案。用户之前提到过单位适配和条件编译的问题,说明ta在实践中已经遇到了具体的技术痛点。用户引用的资料挺有价值的,第一条提到用px导致样式错乱的问题,正好印证了我在单位适配部分的思考。第二条引用则强调了uni-app"一套代码多端运行"的核心优势,这为我回答提供了官方背书。看来用户确实做了功课,不是随便问问的。从技术维度看,这个问题需要拆解成框架实现、样式系统、API调用、性能优化等层面。uni-app虽然号称多端统一,但H5和小程序的底层运行环境差异太大:H5基于浏览器渲染线程,小程序是双线程架构,这个根本区别会引发一系列连锁反应。比如DOM操作限制这个问题,H5开发习惯了jQuery那套随心所欲操作DOM的写法,在小程序里会直接碰壁。最有趣的是原生依赖这块。用户可能没意识到,小程序平台特有的插件和SDK(比如微信的卡包功能)在H5端完全无法使用,这种平台特性会直接影响功能设计。上次我提到过条件编译,但需要更强调它的必要性——不是优化项而是生存项。性能部分要特别提醒分包问题。用户可能按H5习惯把所有代码打包成单文件,等小程序包超过2MB才后悔莫及。还有那个启动速度的对比公式$$\text{白屏时间}\propto\frac{\text{资源加载量}}{\text{网络速度}}$$,应该能让ta直观理解为什么小程序需要特定优化。用户提到过ta关注样式混乱的问题,所以案例演示很重要。同一个rpx在750基准屏上的转换算法$$\text{H5端rem值}=\frac{\text{rpx值}\times\text{html基准值}}{750}$$必须说透,否则可能又到DPR的。代码示例要展示完整平台判断写法,包括H5专有API调用时容易漏掉的__uni__变量检测。最后记得提醒用户测试要点。很多人以为跨端就是一套代码到处跑,实际编译时各种头破血流。比如那个文档对象在H5编译后正常可用,到小程序编译就报错的经典案例。</think> 下面从技术实现角度分析 UniApp 在 H5 和小程序平台开发跨端项目的核心差异,结合关键引用内容整理对比: --- ### 一、**渲染机制差异** | **维度** | **H5 端** | **小程序端** | |------------------|-----------------------------------|----------------------------------| | **渲染引擎** | 基于浏览器内核渲染 | 使用原生 WebView + 双线程架构 | | **DOM/BOM 支持** | 完整支持 DOM API 和浏览器对象模型 | 受限(无 `document`、`window` 等全局对象) | | **CSS 支持** | 支持完整 CSS3 特性 | 部分伪类/动画受限(如 `::before` 在小程序兼容性差) | > **引用验证**:框架会将 H5 样式单位自动转换(如 rpx→rem),但 CSS 特性差异需手动适配[^1]。 --- ### 二、**单位与布局适配** #### 关键问题:样式错乱(用户引用案例) - **H5 方案**: ```css /* 错误:使用 px 会导致跨端失效 */ .element { width: 100px; } /* 正确:使用 rpx 框架自动转换 */ .element { width: 750rpx; } /* 相当于 H5 的 100% 宽度 */ ``` - **转换原理**: 小程序端:$$1\text{rpx} = \frac{\text{屏幕宽度}}{750}$$ H5 端:编译为 rem 单位(可修改 HTML 的 `font-size` 全局适配) --- ### 三、**API 兼容性对比** | **API 类型** | H5 处理方式 | 小程序处理方式 | |------------------|-------------------------------|-------------------------------| | **路由跳转** | `uni.navigateTo` 调用浏览器 History API | 调用小程序原生导航栈 | | **文件操作** | 使用 HTML5 File API | 调用 `wx.getFileSystemManager` | | **支付功能** | 对接支付宝/微信网页 SDK | 直接调用 `uni.requestPayment` | > **解决方案**: > 使用条件编译实现平台差异化逻辑: > ```javascript > // 平台判断(用户引用[^1]) > #ifdef H5 > alert("H5 专属弹窗"); > #endif > #ifdef MP-DINGTALK > dd.alert({ title: '钉钉弹窗' }); > #endif > ``` --- ### 四、**性能优化重点** 1. **H5 端优化**: - 首屏加载:代码分包 + CDN 加速 - 渲染性能:避免频繁操作 DOM 2. **小程序端优化**: - 包体积控制:主包 ≤ 2MB(超限需分包) - 生命周期:避免 `onShow` 同步执行重逻辑 --- ### 五、**调试与发布流程** - **H5 调试**:直接浏览器 DevTools 调试 - **小程序调试**:需使用对应平台开发者工具(如微信开发者工具) - **发布差异**: H5 部署到 Web 服务器 → 小程序需提交平台审核 --- ### 六、**原生能力扩展对比** | **能力** | H5 实现方案 | 小程序方案 | |----------------|--------------------------------|------------------------------| | **摄像头调用** | HTML5 MediaDevices API | `uni.chooseImage()` + 原生控件 | | **蓝牙操作** | Web Bluetooth API(兼容性差) | `uni.openBluetoothAdapter()` | > 注:H5 端对硬件设备的支持受浏览器安全策略限制 --- ### 典型案例演示 ```html <!-- 同时兼容 H5/小程序的组件 --> <template> <view> <!-- H5 用 video 标签,小程序用 video 组件 --> #ifdef H5 <video src="h5.mp4" controls></video> #endif #ifdef MP-WEIXIN <video src="wx.mp4" controls></video> #endif </view> </template> ``` ---
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值