资讯活动

不断进行技术创新、设备创新、服务创新和管理方式创新来继续研发出更多满足客户需要的产品
首页 - 资讯 - 公司新闻

钉钉小程序开发总结

项目立项背景

项目开发前:

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

痛点场景:

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

项目构成:

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

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

项目具体实现(看了会犯困,可跳过看开发相关)

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

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

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

技术栈选择:

个人前端渣渣,主要负责基于钉钉的小程序前端开发,管理后台偶尔也会帮一下忙。这里只说小程序,钉钉小程序和微信小程序大致相同,语法和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:
      • 只支持 GETPOST
      • 不会自动序列化url参数;
      • 异常处理方面,状态码不为 2xx 时,都当作异常处理,例如:5xx 、4xx 、请求格式错误或者请求失败时,需要在fail里面做处理

 

  • wx.request
    • GETPOSTPUTDELETE等等都支持;
    • 支持配置是否开启http2、缓存,quic等等;
    • 会自动序列化url参数(需要注意数组序列化的格式);
    • 异常处理方面,状态码为 2xx5xx4xx 时,都放在success里面,微信应该是这样界定的,因为请求和响应都完成了,所以都放在success里 ;只有请求格式错误或者请求失败时,则会被当做异常,需要在fail里面做处理

 

  • 异常处理,推荐就是封装到一个函数里,写成通用的,统一管理,suceessfail中都调用。

 

  • 钉钉缓存相关 api dd.setStoragedd.setStorageSync等等,参数都是以{key:xxx,data:xxx}来传递,微信缓存 api 除了可以写之外,还使用wx.setStorageSync('key', 'value')的传参方式
  • 钉钉在获取子组件实例上和微信小程序有些区别, 微信上获取非常方便 this.selectComponent('选择器')来获取子组件实例,钉钉只能通过间接的方式来获取。我们知道子组件可以调用父组件的函数并传递参数,我们可以在调用时,把子组件的实例(this)作为参数,传给父组件。
//例子:
//父组件
// father.axml
// 使用子组件并,并传递 onGetInstance 方法
  

//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-uiCollapse组件动态添加内容的时候,高度不会自适应,需要先折叠再打开才能适应高度。为了解决这个坑爹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)
  				}
  			}
  		})

  	}
免费咨询

我们用“态度决定一切”的服务
立志用心对待每一位客户

{}