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"
}
调试运行钉钉小程序1
Hbuilder开辟
利用Hbuilder开辟可参考文档uniapp 适配钉钉小程序
cli形式运行
运行启动下令
npm run dev:mp-dingtalk
编译完成后打开开辟者工具，点击打开项目定位到工程dist>dev>mp-alipay文件夹
https://i-blog.csdnimg.cn/direct/6974b51ba91e43128276a09644e1f7cf.png
选择企业内部应用（开辟者工具中企业内部应用才能真机调试）
https://i-blog.csdnimg.cn/direct/880776d587b2499ebd08a5272986b84e.png
开辟注意事项
禁止利用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属性设置为空是为了不出现原生导航栏的字样，，如果不加就会出现如下效果
https://i-blog.csdnimg.cn/direct/d339220cb60c4074b476c8d0e4c93d9d.png
在加完如上配置之后，就会发现加了自定义导航栏的在首页没有什么问题，而在跳转到另外一个配置自定义导航栏页面时会出现返回按钮重叠的情况，如下图所示
https://i-blog.csdnimg.cn/direct/1551bff701a142bd853736b6d891ec46.png
出现这种问题估计还是uni-app在编译到钉钉小程序时候的bug，这种问题解决方法是在跳转时要制止利用uni.navigateToApi，转而利用uni.redirectToApi
在内网环境中 dd is undefined
有些时候要在内网环境下开辟，在利用dd.getLocation等Api时出现报错dd is undefined，这其实是正常现象，钉钉的Api需要在联网环境下利用，利用uni去调的Api编译后并不是直接通过dd的Api的
例子
编译前
https://i-blog.csdnimg.cn/direct/e29345062569406391db1f61e541792b.png
编译后
https://i-blog.csdnimg.cn/direct/1bb99c3e7f0647b1b049802571dbbefc.png
[*]这里利用的是支付宝开辟者工具，新版的钉钉开辟者工具无法在没有登录的情况下举行调试运行，无法在内网环境下运行 ↩︎
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]