高科前端开发工具


5debug-qrcode

介绍

高科前端开发工具,是为了提高基于 WorkPlus 移动平台开发应用的开发及联调效率。工具专注于开发过程中真实环境数据及接口的模拟,通过创建角色及应用入口,可以快速切换环境,大大提升开发效率。

相比微信小程序开发工具

微信小程序开发工具是一套完整的应用开发调试工具,包含项目创建、开发调试及应用发布,但必须得使用小程序专用的开发框架,以及遵守小程序各种严格的规范。

高科前端开发工具,为的是解决开发过程中调试效率不高的问题,通过提供真实的环境数据及接口模拟,从而达到提高开发效率的效果。对于项目所使用的技术栈,构建工具等,没有任何要求。

快速开始

高科前端开发工具主要包括两个核心模块:角色应用入口。同时提供一些简单的设置功能及文档入口。

角色

角色的定义为:一个环境中的某个具体的组织下的一个用户

所以,在添加角色时,需要提供真实环境的配置,例如 API地址,域ID 等,以及在该环境下,可用的一个账号,验证服务通过后,选择其中一个组织,即可保存成角色,如下图。

5debug-qrcode

角色创建后,即可在创建应用入口时,关联起来。

API地址,域ID 等信息,需咨询产品相关负责人获取,一般会存在多个环境,如测试环境、UAT环境等,请注意区分。

应用入口

应用入口的定义为:以一个角色的身份去访问一个 URL 地址

所以,在添加应用入口时,需要启动地址及选择一个角色,如下图。

5debug-qrcode

输入完毕后,可以直接点击“保存并打开”按钮,直接打开应用;或者点击“添加应用”后,在应用列表点击打开。

启动方式

当前应用支持两种打开方式,即外部浏览器打开H5模拟器

外部浏览器打开:

外部浏览器打开打开是模拟在 PC客户端 打开应用的场景,多用于类似管理后台的单点登录,当应用打开时,url 会拼上一些关键的用户信息,如 ticket、user_id 等。

默认参数包括:

  • ticket 用户 Ticket
  • username 用户名
  • user_id 用户 ID
  • org_id 组织 ID
  • domain_id 域 ID
  • random 随机数

应用打开后,得到的 url 大概如下:

http://app-test.link?ticket={{用户_Ticket}}&username={{用户名}}&user_id={{用户_ID}}&org_id={{组织_ID}}&domain_id={{域_ID}}&random={{随机数}}
1

H5模拟器:

H5模拟器会打开一个独立的窗口,而在该窗口的 js 进程中,会动态注入部分模拟移动端 Cordova 接口的方法。

5debug-qrcode

H5模拟器模式中,可以直接使用部分在移动端才可以使用的接口,例如获取用户信息,获取用户 Ticket等。在不侵入应用本身的同时,提供跟移动端一致的接口调用体验。

同时,此模式下启动应用,并不会在 URL 上拼接参数,但支持通过占位符的方式获取部分参数,具体可以查看启动地址

关于 userAgent

首次打开时,开发工具会重写页面的 userAgent,会带上workplus等标式,但若此时切换到手机模拟器调试(如上图),userAgent 将会被刷新。如果需要通过 userAgent 来判断是否在 WorkPlus App 上访问,在开发阶段,建议通过 NODE_ENV 环境变量或其他方式来控制。

页面导航

H5模拟器模式下开发,如果应用是一个无顶部导航栏的 H5应用,可能页面无法进行上下页等操作,开发工具在该模式下,会提供一个模拟的简版导航条,如下图:

navigation

导航条会固定在左上角(如上图,默认带点透明,鼠标移上去后会去掉透明度),点击最右边的按钮,可以收起导航条。

所有按钮功能说明如下:

  • "" 页面返回(若有历史记录的情况下);
  • "" 前往上一页(若有历史记录的情况下);
  • "" 刷新当前页面;
  • "" 开启或关闭开发调试工具;
  • "" 收起导航条;
  • "" 展开导航条。

页面刷新导致认证失败?

如果应用需要通过 Ticket 做单点登录,那使用页面刷新功能时,需要注意的是:链接上的 Ticket 不会再次生成,已消费的 Ticket 将不能再使用。

建议适当的情况下,存储用户登录状态到本地,或使用 JS-SDK 的获取 Ticket 接口。

应用设置

高科前端开发工具支持切换主题和语言,同时提供一些使用说明和文档入口,后续会扩展更多的设置功能。

5debug-qrcode

方法列表

H5模拟器的打开方式下,通过接入 JS-SDK,可以使用以下方法:

功能模块支持方法
认证获取 Ticket
用户获取登录用户详情
获取用户的雇员信息
联系人单选联系人
多选联系人
多选当前组织的雇员列表
打开通用选择人员界面
图片选择照片
图片预览
网络获取当前连接 Wifi 信息
地理位置获取定位信息
设备获取 IP 地址
获取设备信息
获取 App 信息

方法未被支持怎么办?

工具仅对常用方法进行模拟支持,未被支持的方法,如果被调用,将不会得到任何相应或异常。若有需要,可以通过 JS-SDK 的接口模拟功能进行使用。

工具下载

整理中,敬请期待!

上次编辑于: