钉钉小程序企业内部应用开发总结

    技术2022-07-11  90

    1,小程序对应的管理后台开发调试

    文档链接:https://ding-doc.dingtalk.com/doc#/kn6zg7/qg4y64

    需要微应用前端调试工具,直接在钉钉桌面版是没法调试,并且还需要在稳定性管理中进行人员配置

    2,文件上传

    文档链接:https://ding-doc.dingtalk.com/doc#/dev/frd69q/l4Xv3

    示例代码:

    utils/request.js

    export function upload(opt) { return new Promise((resolve, reject) => { dd.uploadFile({ url: uploadApi, //uploadApi后端上传文件接口 filePath: opt.filePath, fileType: opt.fileType, fileName: opt.name, success: (res) => { if (res.statusCode == 200) { console.log("上传成功") resolve(res.data) } else { console.log("服务器错误") reject(res) } }, fail: (err) => { console.log("请求错误") reject(err) } }) }) }

    页面中:

    //图片上传 addImg(){ let _this = this; dd.chooseImage({ count: 1, success: (res) => { app.$upload({ apiName:"uploadFile", filePath:res.filePaths[0], name:"file", fileType:"image" }).then(res => { console.log("上传成功:",res) }).catch(_ => {console.log("上传失败:",_)}) }, }); }, //视频上传 addVideo(){ let _this = this; dd.chooseVideo({ sourceType: ['album','camera'], maxDuration: 60, success: (res) => { app.$upload({ apiName:"uploadFile", filePath:res.filePath, name:"file", fileType:"image" }).then(res => { console.log("上传成功:",res) }).catch(_ => {console.log("上传失败:",_)}) }, }); },

    3,视频播放与video标签

    video标签暂时未上文档,但是可以用,src属性填写视频源

    <video class="video" src="{{videoUrl}}"></video>

    若全屏视频播放不正常,可以禁止全屏播放,在css中隐藏全屏按钮:

    video::-webkit-media-controls-fullscreen-button{ display: none; }

    4,登录授权

    登录不需要弹出授权,即免登授权;

    文档链接:https://ding-doc.dingtalk.com/doc#/dev/wcoaey

    调用dd.getAuthCode方法成功后获取用户authCode,传给后端可以获取用户信息和登录sessionId

    export function ddLogin(){ dd.getAuthCode({ success:function(res){ http({ apiName:"ddLogin", type:"POST", data:{ code:res.authCode } }).then(res => { dd.setStorageSync({ key: 'sessionId', data: res.data.sessionId }); dd.setStorageSync({ key: 'userInfo', data: res.data.wuserInfo }); }).catch(_ => { console.log(_) }) }, fail:function(err){ } }); }

    5,picker-view联动使用注意

    picker-view用于多个选择器联动,(单个选择直接使用picker即可),注意联动返回的值是每联数据的index

    文档链接:https://ding-doc.dingtalk.com/doc#/dev/picker-view-component

    每多一个联动则要多一个picker-view-column标签,在picker-view标签中可使用onChange监听联动结果,返回为一个数组,每个元素对应每联的选中的index,几联就几个值;

    需要注意的地方:多联的时候,比如2联,如果当前选择的值是[1,2],滚动第一联之后值会变为[x,2],会默认给第二联选上index为2的值,如果第二联没有这个值就会报错,同理2联以上也是;所以在滚动非最后一联的时候,前面每联变化都要做一个判断:如果值变了,就要把后面每联的值设为0。

    3联示例:

    async assignChange(e){ let _value = e.target.dataset.arr; let _arr = e.detail.value; let arrVal = await this.dealAssignChange(_value,_arr) this.setData({ [_value]: arrVal }); }, // dealAssignChange(_value,_arr){ let arr = _arr; if(this.data[_value].length == 2 && this.data[_value][0] != arr[0]){ arr = [_arr[0],0] } if(this.data[_value].length == 3){ if(this.data[_value][0] != arr[0]){ arr = [_arr[0],0,0] } if(this.data[_value][1] != arr[1]){ arr = [_arr[0],_arr[1],0] } } return arr; },

    6,textarea会显示在自定义弹窗上面

    写一个样式跟textarea一样view标签,用于弹出窗后替换textarea显示内容

    7,在一加手机上程序存在一些问题还找不到解决方法

    8,苹果手机上传到自己服务器的视频无法播放的问题

    苹果手机调用dd.chooseVideo得到的视频是.video格式,上传到服务器后需要更改为.mp4等格式才能在小程序的video标签内播放

    9,页面白屏几秒钟后报提示 api: ddExec 暂不支持,请在真机调试

    可能原因之一是textare赋值为null,改成空字符串就不会白屏

    Processed: 0.011, SQL: 12