高科前端开发工具

介绍

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

相比微信小程序开发工具

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

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

快速开始

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

角色

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

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

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

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

应用入口

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

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

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

启动方式

当前应用支持两种打开方式，即外部浏览器打开及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={{随机数}}

H5模拟器：

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

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

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

关于 userAgent

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

页面导航

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

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

所有按钮功能说明如下：

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

页面刷新导致认证失败？

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

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

应用设置

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

方法列表

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

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

方法未被支持怎么办？

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

工具下载

整理中，敬请期待！