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

Myth丶恋晨 2023-02-22 03:56 19阅读 0赞

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

文档链接：[https://ding-doc.dingtalk.com/doc\#/kn6zg7/qg4y64][https_ding-doc.dingtalk.com_doc_kn6zg7_qg4y64]

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

### 2，文件上传 ###

文档链接：[https://ding-doc.dingtalk.com/doc\#/dev/frd69q/l4Xv3][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属性填写视频源

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

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

### 4，登录授权 ###

登录不需要弹出授权，即免登授权；

文档链接：[https://ding-doc.dingtalk.com/doc\#/dev/wcoaey][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][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，改成空字符串就不会白屏

[https_ding-doc.dingtalk.com_doc_kn6zg7_qg4y64]: https://ding-doc.dingtalk.com/doc#/kn6zg7/qg4y64
[https_ding-doc.dingtalk.com_doc_dev_frd69q_l4Xv3]: https://ding-doc.dingtalk.com/doc#/dev/frd69q/l4Xv3
[https_ding-doc.dingtalk.com_doc_dev_wcoaey]: https://ding-doc.dingtalk.com/doc#/dev/wcoaey
[https_ding-doc.dingtalk.com_doc_dev_picker-view-component]: https://ding-doc.dingtalk.com/doc#/dev/picker-view-component