移动端应用开发总结

梦里醒来是平凡
342 阅读4分钟

1. 钉钉应用

应用类型

  • 企业内部应用
  1. 开发者：企业内部人员/授权的服务商开发(企业创建应用，授权服务商(CorpId指定)开发，应用开发发布由服务商完成)。
  2. 使用者：企业/组织内部使用 不支持上架
  • 第三方企业应用

适用于服务商研发通用的产品应用

  1. 开发者：软件服务商，开发并上架（需经钉钉团队审核）
  2. 使用者：购买并授权开通该应用的企业
  • 第三方个人应用

开放能力有限，仅支持小程序应用

  1. 开发者：软件服务商
  2. 使用者：个人用户

应用开发流程

大致开发流程: 创建应用 -> 应用配置 -> 开发应用(应用关联) -> 应用测试 -> 应用发布

小程序和h5微应用区别

小程序：只支持移动端，接近原生的性能体验，提供IDE可方便开发调试项目，支持es6模块化，支持灰度发布，不支持开源ui组件，支持个人应用和应用离线化。

支持：自定义组件、sjs语法、版本更新机制、标准框架和组件库、内置高德地图、web-view组件渲染h5网页（实现H5和小程序的双向通信）

h5微应用：支持pc端和移动端，在电脑上只能调 UI、涉及到钉钉的JSAPI必须真机调试，需手动搭建项目、成本高，jsApi需要鉴权处理，使用Vue、React等框架可以获得模块化支持，不支持个人应用和应用离线化

小程序基础库

基础库是负责小程序框架的加载的容器, 基础库版本根据钉钉客户端版本进行更新

小程序性能优化方案
  1. 首屏优化
  • 控制资源包大小
  • 将数据请求提前至 onLoad, 避免首屏渲染延缓
  • 控制首屏一次性渲染节点数量，减少setData数据量
  1. 优化setData
  • 减少setdata数据量
  • 长列表数据触发渲染，使用 $spliceData
  • 频繁触发渲染，使用组件级别的 setData 或 $spliceData
  1. 列表渲染使用key参数

钉钉免登授权

小程序：步骤同微应用, 除了免登授权码直接获取之外

微应用：

  1. 前端根据 corpId 获取免登授权码
  2. 后台根据 AppKey/AppSecret (应用的唯一标识)获取 access_token
  3. 后台根据 access_token 和 授权码获取用户信息，以token形式返回前端
  4. 前端配置请求头，进行接口鉴权: config.headers.Authorization = token

jsApi鉴权

适用于微应用, 针对钉钉业务、安全相关的api，例如钉钉会话、视频会议

鉴权流程参考

大致流程：

  1. 后台根据 AppKey/AppSecret (应用的唯一标识)获取 access_token，access_token 是后台调用钉钉服务端api的凭据, 有效期2小时，需以应用为维度进行缓存
  2. 后台根据步骤一的 access_token 获取 jsapi_ticket，有效期2小时，需以应用为维度进行缓存
  3. 后台根据 jsapi_ticket，url (前端需要鉴权的页面地址(微应用的首页地址))等签名参数计算签名
  4. 前端根据提供的签名进行api鉴权
  5. 前端调用已鉴权的 jsapi

补充说明

后台调用服务端api的流程：

获取应用唯一标识 -> 添加接口调用权限 -> 获取access_token -> 调用服务端api

应用管理

服务器出口IP、http请求域名等的配置

应用权限管理

配置oa审批、考勤、通讯录等接口权限，实现跟钉钉核心能力的全面互通

版本管理

  1. 灰度发布
  2. 小程序版本更新机制(冷启动、热启动): 冷启动时会进行版本检测，若有新版本，用客户端本地的包进行启动且新版本的小程序需要等下一次冷启动才会生效，若经过新版本发布超过 48 小时，则会等待新版本的代码包被下载后，直接使用新版本启动

小程序分包加载

后续补充~~~~

2. 企业微信

小程序

网页授权登录实现：OAuth2

  • 配置应用可信域名(与应用的访问链接域名一致)
  • 构造OAuth2网页授权链接： 使用企业CorpId和重定向链接redirect_uri（需进行URL编码，这里即应用主页地址）等参数生成授权码code, 用户访问应用地址变为：redirect_uri?code=CODE&state=STATE
  • 通过授权码code获取用户信息: 根据后端提供接口获取, 前端将token信息（包括用户信息userid等，签名信息）放置localStorage缓存中
  • jsapi鉴权 使用token中存储的签名信息进行鉴权, 每一个url路由需进行一次配置
wx.config({
    beta: true,
    debug: true,
    appId: '', // 企业微信的corpID
    timestamp: , // 生成签名的时间戳
    nonceStr: '', // 生成签名的随机串
    signature: '',// 签名，见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 需要使用的JS接口列表
});

参考链接： 钉钉应用类型、 微应用jsapi鉴权、 支付宝小程序文档

avatar
文章
阅读
粉丝