uni-app如何适配钉钉小程序

项目配置

在package.json中添加自定钉钉环境变量

"uni-app": {  
    "scripts": {  
        "mp-dingtalk": {   
            "title":"钉钉小程序",   
            "env": {   
                "UNI_PLATFORM": "mp-alipay"   
            },  
            "define": {   
                "MP-DINGTALK": true   
            }  
        }  
    }  
}

脚本节点添加运行和打包命令（cli项目创建专用）

{
	"dev:mp-dingtalk": "uni -p mp-dingtalk",
	"build:mp-dingtalk":"uni build -p mp-dingtalk"
}

调试运行钉钉小程序¹

Hbuilder开发

使用Hbuilder开发可参考文档uniapp 适配钉钉小程序

cli形式运行

运行启动命令

npm run dev:mp-dingtalk

编译完成后打开开发者工具，点击打开项目定位到工程dist>dev>mp-alipay文件夹

选择企业内部应用（开发者工具中企业内部应用才能真机调试）

开发注意事项

禁止使用span等html标签

span等html标签在微信小程序中可以被编译成功，但是在钉钉中不能被识别到，应使用view、text组件代替

错误写法

<span> 错误写法 </span>

正确写法

<view> 正确写法 </view>

不可以在uni-ui、自定义组件中直接写style和calss

在uni-ui组件和自定义组件中直接使用style和class，编译到钉钉小程序平台会出现样式丢失，建议在组件的外层在套一层view组件

错误写法

<comA style="color:red"> 错误写法 </comA>

正确写法

<view style="color:red"> <comA > 正确写法 </comA> </view>

使用条件编译（仅钉钉小程序运行）

// #ifdef MP-DINGTALK
dd.getLocation()
// #endif

不可使用透传插槽

使用透传插槽编译到钉钉平台，会导致页面内容出不来，甚至小程序崩溃

ref使用注意

在vue开发中经常用ref来定位到节点，而vue3的uniapp中在template里面使用在uni-form加ref需在script中也定义相对应的字段，不然在钉钉中就会报错：form is undefined

<template>
	<uni-forms ref="form">
      ....
    </uni-forms>
</template>
<script setup>

const form = ref(null)
</script>

使用自定义导航栏注意

在钉钉小程序中要使用自定义导航栏的话需要在pages.json中页面配置节点添加如下配置

"style": {
  "navigationBarTitleText": "",
  "navigationStyle": "custom",
  "transparentTitle":"always"
}

其中transparentTitle配置是为了让原生导航栏变得透明,navigationBarTitleText属性设置为空是为了不出现原生导航栏的字样，，如果不加就会出现如下效果

在加完如上配置之后，就会发现加了自定义导航栏的在首页没有什么问题，而在跳转到另外一个配置自定义导航栏页面时会出现返回按钮重叠的情况，如下图所示

出现这种问题估计还是uni-app在编译到钉钉小程序时候的bug，这种问题解决方法是在跳转时要避免使用uni.navigateToApi，转而使用uni.redirectToApi

在内网环境中 dd is undefined

有些时候要在内网环境下开发，在使用dd.getLocation等Api时出现报错dd is undefined，这其实是正常现象，钉钉的Api需要在联网环境下使用，使用uni去调的Api编译后并不是直接通过dd的Api的

例子

编译前

编译后

---

1. 这里使用的是支付宝开发者工具，新版的钉钉开发者工具无法在没有登录的情况下进行调试运行，无法在内网环境下运行 ↩︎