本地开发环境获取远程App端环境-研发提效小技巧

1. 背景说明

我们在开发H5项目时候，当投放到App的webview中时候，在开发阶段，我们需要获取到App的登录态（token、设备信息等等），或者联调分享的时候，也是需要App环境，来实现分享功能的自测，还有某些场景，我们需要往App本地存储里读写缓存数据。还有的时候，可能需要测试多个手机系统的App的兼容性问题。

以上场景，有个致命的要求，就是很多情况需要本地将登录态写死，或者假装功能已经通了，实际上还是需要发布测试环境，或者想办法让手机能打开我本地正在开发的页面，来实现功能的验证。

为解决这个问题，曾经也写过一个小技巧，本地实现一个jssdk的mock服务，也能实现部分功能，但要更进一步提升开发效率，还是有一定的壁垒。为此，搞了一个更进阶的方式来解决以上问题-【本地开发环境使用真机App环境】，该功能支持开发环境连接多端，甚至可跨地区连接远端App。

2. 先说结论：好使

该功能适用于开发调试投放到公司内部App如：『智家App』、『移动工作台』、『三翼鸟App』等中的H5项目。因这几个App框架一样，本地开发H5项目的时候，完全可以通过该功能来获取真机的环境数据，如果需要测试页面跳转、分享微信、分享小程序、唤起面板，也完全可以实现本地开发环境的自测要求。为开发效率的提升、为真机bug问题的排查，都是有一定的作用与帮助的。

3. 架构设计

3.1架构图

3.2 时序图

4. 实现方案

4.1 核心功能模块

4.1.1 MockUplusApi

通过远程页面创建的唯一标识ID，与服务端建立Socket通信，实现实时接收响应数据
发送Beacon数据，发送开发者调用的UplusApi对应的方法数据
配置UplusApi方法，因此文件是模拟UplusApi包的，因此调用方法不全，需要开发者根据实例，配置自己需要的模拟方法

4.1.2 NodeServer

Server-用于接收开发端的UplusApi请求数据，并将数据处理，然后通过Socket发送数据给远程App环境
SocketServer-用于将本地开发环境与远程App环境建立连接，实现实时数据通信

4.1.3 RemotePage（远程载体页面）

生成唯一标识ID，用于开发者指定链接调试的App环境
执行服务端发来的调用UplusApi的方法指令
与服务端建立Socket通信，将执行UplusApi后的返回数据，格式化后发送给Server端

4.2 业务接入及影响

4.2.1 Uplusapi Mock包

可自行配置新增函数

dart 复制代码

// mock/uplus-api.js
// 以下几个方法，是我们常用的模块，按这个格式配置即可，实现获取远程App环境的真是数据
// 网络模块
upNetworkModule = {
    isOnline: async() => {
        const reqData = {eventModule: 'upNetworkModule', eventName: 'isOnline'}
        return await getAppData(reqData, code)
    }
}
// 用户信息模块
upUserModule = {
    getLoginStatus: async() => {
        const reqData = {eventModule: 'upUserModule', eventName: 'getLoginStatus'}
        return await getAppData(reqData, code)
    },
    getUserInfo: async() => {
        const reqData = {eventModule: 'upUserModule', eventName: 'getUserInfo'}
        return await getAppData(reqData, code)
    }
}

4.2.2 编译配置修改

vite.config.js

arduino 复制代码

// 开发环境使用MockUplusApi, 非开发环境使用真正的@uplus/uplus-api（jssdk）
resolve: {
  alias: {
    // 使用绝对路径配置别名
    '@uplus/uplus-api': isDev 
      ? fileURLToPath(new URL('./mock/uplus-api.js', import.meta.url))
      : '@uplus/uplus-api',
  }
}

vue.config.js

csharp 复制代码

// 开发环境使用MockUplusApi, 非开发环境使用真正的@uplus/uplus-api（jssdk）
config.resolve.alias
    .set(
        '@uplus/uplus-api', isDev
        ? './mock/uplus-api.js'
        : '@uplus/uplus-api'
        )

4.2.3 影响-因对业务代码无任何侵入，调用UplusApi的方法完全一致，故无任何影响

本地开发环境，使用mock/uplus-api文件
测试环境、生成环境，或自定义的环境，都可以通过编译配置文件，进行自定义的使用
项目中的对UplusApi（jssdk）的调用方法，完全保持一致

4.3 使用方法

真机App，通过扫码或链接方式，打开远程页面，获取到唯一编码标识
本地Mock包内配置真机获取到的唯一编码标识，实现本地连接远程真机
启动业务项目，调用UplusApi（jssdk）方法，即可实现通信，获取App返回的数据，或唤起分享功能
若需要连接多台真机，需自行更换Mock包内的编码标识（有多台手机，或异地手机，均可扫码生成唯一标识，本地环境配置哪个编码，即可联机那台手机）

5. 扩展思考

这是一个纯前端实现的方案，没有和端上的开发人员有交流沟通。如果在端上默认植入一个载体（仅限开发环境入驻），那如上设计中的前端载体页，应该就不用了。通过socket，可以实时实现本地开发环境连接App，这种方案应该是最好的开发模式。（纯意淫瞎想，不知道会不会有什么没考虑到问题）

6. 团队介绍

「三翼鸟数字化技术平台-定制平台开发」主要负责设计工具的研发，包括营销设计工具、家电VR设计和展示、水电暖通前置设计能力，研发并沉淀素材库，构建家居家装素材库，集成户型库、全品类产品库、设计方案库、生产工艺模型，打造基于户型和风格的AI设计能力，快速生成算量和报价；同时研发了门店设计师中心和项目中心，包括设计师管理能力和项目经理管理能力。实现了场景全生命周期管理，同时为水，空气，厨房等产业提供商机管理工具，从而实现了以场景贯穿的B端C端全流程系统。