钉钉小程序开发遇到的坑

一、技术背景

二、需求

三、功能实现

       根据钉钉开发文档进行钉钉小程序原生开发https://ding-doc.dingtalk.com/doc#/dev/ed25rr

四、钉钉小程序与微信小程序的区别

       可参考：https://www.cnblogs.com/dora-zc/p/10963644.html

五、开发中遇到的问题及解决方案：

1、dd.navigateTo跳转到 tabbar 页面，底部不显示tab 栏？

解决方案：dd.navigateTo 和 dd.redirectTo 不允许跳转到 tabbar 页面；如果需要跳转到 tabbar 页面，请使用 dd.switchTab。

2、登录页面报错：setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.Please check the code for the xxx component.

原因：登录页面用了计时器，当页面跳转到主页后，登录页被关闭，但计时器的setData依然在执行

解决方案：在onUnload里执行清除计时器 →    onUnload() { this.countdownHoldStop()},

3、事件如何传参？

（1）给组件设置data-*属性，如：<view class="item-box" data-item="{{item}}" onTap="toSignedDetailPage">

（2）获取参数：toSignedDetailPage(event){console.log(event.target.dataset.item)}

4、当参数为对象或数组时，页面跳转时如何传递参数？

解决方案：

（1）通过encodeURIComponent() 函数可以把字符串作为 URI 组件来进行编码，例如：

let detailData=JSON.stringify(event.target.dataset.itemDetail)

dd.navigateTo({ url: '/pages/signedDetail/signedDetail?detailData='+encodeURIComponent(detailData) })

（2）在跳转到目标页面接收时用decodeURIComponent对URI 组件进行解码，后面在通过JSON.parse()将变量还原,这样子就能达到预期效果了。

例如：let jsonData=decodeURIComponent(query.detailData)

5、scroll-view（可滚动视图区域）设置height:100%或flex:1无效

解决方案：可以动态计算高度或者使用height:calc(100vh) 。一定要给 scroll-view 设置方向属性 如：scroll-y="{{true}}" 

6、父子组件如何通信？

https://www.cnblogs.com/wgl0126/p/11419345.html

7、各个单独页面的json文件的defaultTitle配置不生效？

解决方案：通过dd.setNavigationBar设置，例如： dd.setNavigationBar({title: "登录"})，放在onLoad里

六、钉钉小程序存在的bug

1、dd.showToast经常不起作用

2、canvas执行clearRect()清除后依然存在，不能有效清除

3、自定义组件路径一定要放在项目根目录，否则会解析不出来

七、钉钉小程序H5集成