钉钉小程序开发那些事（复盘） —— 与微信小程序的区别和一些注意事项

不是阿怪的阿怪
3,175 阅读8分钟

前言

项目立项背景（看了会犯困，可跳过看开发相关）

项目开发前：

公司有自己的维修中心，经销商和维修站师傅无法解决的事情，就会把产品寄给到维修中心来，由维修中心处理，处理流程主要有这几个步骤，入库、检测、检测得出报价结果（委托方需要确认价格）、维修、复检、打包、出库。

痛点场景：

  1. 检测和维修项目的记录通过纸张来记录，不仅麻烦，还不易储存
  2. 检测和维修分别由不同的师傅来完成的时候，沟通成本过高
  3. 检测完成之后，需要根据维修项目和用到的备件计算报价，联系委托方确定。整人过程由人工完成，太耗时耗力
  4. ERP系统、CSS（售后系统）、wms等之间的同步协助。
  5. ...

项目构成：

  1. 小程序，主要是给维修中心的工作人员使用
  2. 售后管理后台，公司售后部门、维修中心、委托方（维修站或者经销商）

小程序主要是售后管理后台「维修中心」这一模块功能的替代品，维修中心工作人员因为要四处跑，手机肯定比PC方便

项目具体实现（看了会犯困，可跳过看开发相关）

小程序配合管理后台主要是为了简化这些的流程，更精细化得管理整个维修的过程。

  1. 维修站（委托方）通过管理后台，创建一个返修申请单，维修中心管理员审核通过，维修站（委托方）通过物流把产品发给维修中心，并在返修单中记录物流单号，系统自动生成入库单
  2. 维修中心的工作人员，通过小程序扫码快递外包装的物流单号「一维码」，直接找到入库单，核对产品数量，并给每个产品贴上维修码「一维码」，没问题之后，点击「签收确认」，系统自动创建维修工单（检测、维修、复检、打包都是同一个维修工单，可以理解为针对维修工单拆分出来的任务）
  3. 检测工作人员需要检测时，直接去仓库里拿产品，然后通过小程序扫描贴在上面的维修码，找到维修工单，进行检测，并在小程序记录检测的结果，添加需要更换的备件和维修项目。系统生成报价单，报价单里会列举出备件和维修项目的费用。
  4. 报价单，需要委托方在系统同意确认，如果同意，就可以进行下一个步骤，维修。
  5. 维修师傅通过小程序，扫描产品的维修码，找到维修工单，开始维修工作。录入检测的结果，更换的备件和维修项目。点击维修完成之后，就可以进行下一个步骤，复检
  6. 复检不通过，回到上一个步骤，继续维修，通过则进行下个步骤，打包
  7. 打包完成，小程序点击打包确认。
  8. 最后就是出库，维修中心管理可以在管理后台上，合并同一个委托方生成的维修工单（每个维修工单对应一个产品），然后生成出库单。
  9. 维修中心根据出库单的产品信息，统一出库。寄回给委托方，并在小程序中点击「出库确认」

注意：「扫码」不是必须的，只是为了省去工作人员找单的时间，这些只是项目的大体流程，还有很多细节就不一一赘述了。

技术栈选择：

本人前端渣渣，主要负责基于钉钉的小程序前端开发，管理后台偶尔也会帮一下忙。这里只说小程序，钉钉小程序和微信小程序大致相同，语法和api都类似，上次整理的小程序通用版本，稍微改一下，基本都适用。

  • 钉钉小程序通用模版 （修改自微信小程序通用模版）
  • 组件库：mini-ali-ui-rpx （mini-ali-ui的rpx单位版本，支付宝小程序团队开发的）

钉钉小程序和微信小程序的一些区别（主要是开发上基本会用到的点）

  • 钉钉小程序放在 data 里面的数据，一定要通过 setData 来修改，不要通过this.data.xxx来修改，即使你不需要刷新视图。不然重新进入这个界面的时候，data里面的数据不能进行初始化，还是上次页面修改的数据，有时还会出现各种怪异的情况，例如：小程序卡死，奔溃、无响应等等，微信小程序则不会，你不需要刷新视图的时候，通过this.data.xxx来修改数据也不怎么样

  • 发起请求API： 微信小程序 wx.request 、 钉钉小程序 dd.httpRequest ，这个方面，微信的 api 做得比钉钉的好

    • dd.httpRequest:
      • 只支持 GET、POST；
      • 不会自动序列化url参数；
      • 异常处理方面，状态码不为 2xx 时，都当作异常处理，例如：5xx 、4xx 、请求格式错误或者请求失败时，需要在fail里面做处理
    • wx.request
      • GET、POST、PUT、DELETE等等都支持；
      • 支持配置是否开启http2、缓存，quic等等；
      • 会自动序列化url参数（需要注意数组序列化的格式）；
      • 异常处理方面，状态码为 2xx 、5xx 、4xx 时，都放在success里面，微信应该是这样界定的，因为请求和响应都完成了，所以都放在success里 ;只有请求格式错误或者请求失败时，则会被当做异常，需要在fail里面做处理
    • 异常处理，推荐就是封装到一个函数里，写成通用的，统一管理，suceess和fail中都调用。

  • 钉钉缓存相关 api dd.setStorage、dd.setStorageSync等等，参数都是以{key:xxx,data:xxx}来传递，微信缓存 api 除了可以写之外，还使用wx.setStorageSync('key', 'value')的传参方式

  • 钉钉在获取子组件实例上和微信小程序有些区别， 微信上获取非常方便 this.selectComponent('选择器')来获取子组件实例，钉钉只能通过间接的方式来获取。我们知道子组件可以调用父组件的函数并传递参数，我们可以在调用时，把子组件的实例（this）作为参数，传给父组件。 //例子：

    //父组件
// father.axml
// 使用子组件并，并传递 onGetInstance 方法
  <child onGetInstance="onGetInstance"></child>

//father.js
onGetInstance(instance){
    console.log(instance) //instance 就是实例
}

//子组件
//child.js
//在子组件挂载完成之后，调用 onGetInstance方法把子组件的this传给父元素
didMount() {
  this.props.onGetInstance(this)
}

  • 钉钉组件没有样式隔离，page上写的样式会作用到组件上，微信默认是有样式隔离的，可通过 styleIsolation 来配置不同的样式隔离模式。

  • 钉钉没有程序分包，微信有，微信也是为了 ToC 端用户体验而产生的功能,提高初次打开的加载速度

  • 「钉钉企业内部小程序」，免密登陆（无须用户授权，可以直接获取到员工的信息）、不需要审核，如果你公司刚好都用钉钉，基于钉钉来开发企业内部的应用是个不错的选择。你还可以根据企业部分来分配小程序权限。微信小程序由于是面向 ToC ，定位不一样，自然在这些方面没得比。企业微信目前也开始支持小程序，有时间可以研究一下。

还有一些 api 上的小细节，就不一一对比。整体来说除了一些「钉钉」和「微信」中特有的API，两平台都有那些 ，基本都是微信的功能更完善强大。这也可以理解，毕竟微信小程序和钉钉小程序的「用户数量」、「平台属性」、「服务群体」都有差异。

钉钉小程序一些需要注意的点

  • 钉钉小程序开发者工具，强烈推荐下载最新版，项目构建预览的速度快很多，低版本有些奇怪的bug。

  • 钉钉小程序生态社区一般，组件库、插件可选择的不多

  • 钉钉小程序使用 mini-ali-ui组件库，需要到支付宝看开发文档，支付宝部分 api 和 钉钉是通用的

  • 小程序开发工具, dd 可以换成 my

  • 一定要勾选「component2」，不然「受控属性」没法用。

  • mini-ali-ui 的 Collapse组件动态添加内容的时候，高度不会自适应，需要先折叠再打开才能适应高度。为了解决这个坑爹bug，特意去看了下源码，发现可以调用am-collapse-updates-collapse里面的方法来刷新视图,在我的项目中，用到了很多 Collapse 组件，就动手简单封装了个方法，参考下面：

      	// 刷新 Collapse 视图
  	// collapsKeys collapse-item 组件对应的 key
  	export function updateCollapse(...collapsKeys) {
  		collapsKeys.forEach(x => {
  			let index = null
  			if (this[`am-collapse-ids-collapse`]) {
  				index = this[`am-collapse-ids-collapse`].findIndex(y => y === x)	
  			}
  			if (index || index === 0) {
  				try {
  					this[`am-collapse-updates-collapse`][index]()
  				} catch (error) {
  					console.log(error)
  				}
  			}
  		})

  	}

    钉钉小程序通用模版「企业内部应用」

    和上次「微信通用模版」一般，抽空整理了一下，感兴趣可以移步 「Github」查看拉取

avatar
文章
阅读
粉丝