uni-app怎样适配钉钉小程序

项目配置

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

1. "uni-app": {  
2.     "scripts": {  
3.         "mp-dingtalk": {   
4.             "title":"钉钉小程序",   
5.             "env": {   
6.                 "UNI_PLATFORM": "mp-alipay"   
7.             },  
8.             "define": {   
9.                 "MP-DINGTALK": true   
10.             }  
11.         }  
12.     }  
13. }

复制代码

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

1. {
2.         "dev:mp-dingtalk": "uni -p mp-dingtalk",
3.         "build:mp-dingtalk":"uni build -p mp-dingtalk"
4. }

复制代码

调试运行钉钉小程序1

Hbuilder开辟

利用Hbuilder开辟可参考文档uniapp 适配钉钉小程序
cli形式运行

运行启动下令

1. npm run dev:mp-dingtalk

复制代码

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

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

开辟注意事项

禁止利用span等html标签

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

1. <span> 错误写法 </span>

复制代码

正确写法

1. <view> 正确写法 </view>

复制代码

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

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

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

复制代码

正确写法

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

复制代码

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

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

复制代码

不可利用透传插槽

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

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

1. <template>
2.         <uni-forms ref="form">
3.       ....
4.     </uni-forms>
5. </template>
6. <script setup>
8. const form = ref(null)
9. </script>

复制代码

利用自定义导航栏注意

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

1. "style": {
2.   "navigationBarTitleText": "",
3.   "navigationStyle": "custom",
4.   "transparentTitle":"always"
5. }

复制代码

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

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

出现这种问题估计还是uni-app在编译到钉钉小程序时候的bug，这种问题解决方法是在跳转时要制止利用uni.navigateToApi，转而利用uni.redirectToApi
在内网环境中 dd is undefined

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

编译前

编译后

---

   

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。