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

Posted 2022-12-06 骑着代马去流浪

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，改成空字符串就不会白屏