APP 开发说明

安卓 PDA 终端 App 开发，常用开发资源：

• 已联网安卓 PDA (opens new window)
• HBuilderx 3.3.10 - IDE 工具 (opens new window)
• apifox - mock 工具 (opens new window)
• uni-app - 移动端跨平台框架 (opens new window)
  • UI组件文档 (opens new window)
  • UI组件示例 (opens new window)
• vue3 - JS 核心框架 (opens new window)
• typeScript - JS 超集 (opens new window)
• vuex - vue 状态管理库 (opens new window)
• vite - 构建工具 (opens new window)

环境搭建

拉取代码

开发使用develop分支，或创建独立分支。

# 拉取代码
git clone ssh://git@10.10.10.132:8222/mom-java/sx-app.git
git clone http://10.10.10.132:8888/mom-java/sx-app.git

# 切分支
git checkout -b develop origin/develop

安装 mock 工具

该工具主要用于模拟测试页面接口数据，根据实际开发情况选择安装。

• 下载安装；apifox - mock 工具 (opens new window)

• 注册账号并发送至项目管理员，加入项目组；

• 开启 mock 服务，参考开发文档使用；

• 修改代码中测试接口根路径

  // mock接口路径 '@/api/test.ts'
  const baseURL = `http://${本机IP}:4523/mock/634142`;
  

安装 HBuilderx

建议使用HBuilderx v3.3.10版本。

• 下载安装HBuilderx 3.3.10 (opens new window)
• 使用HB打开项目代码
• 将PDA连接至PC，并确认开启USB调试，连接网络
• 如图运行项目，首次编译会安装多个插件

调试技巧

调试服务

配合输出语句，方便开发过程查看开发数据；

运行成功后点击调试按钮，即可进入调试服务。

WebView调试控制台

• 项目运行后可进行单页调试
• 开启WebView调试控制台（运行 - 运行手机或模拟器 - 显示WebView调试控制台 ）
• 控制台点击打开具体调试页面，具体如下图
• 与浏览器控制台功能基本相同
• 该功能不稳定，容易闪退，酌情使用

路由跳转

• 对uni-app原生路由跳转 (opens new window)进行二次封装
• 并挂载至vue全局属性
• 源码位置（@/utils/router.ts）

页面跳转

this.$router.push(path,option = {
    type,
    param,
    animationType,
    animationDuration,
    receiveParam 
})

• path { String } ：需要跳转的应用页面的路径，不可以带参数，如：'/pages/text/WorkOrder'。
• option { Object }：配置项
  • type { String }：跳转类型，默认值‘navigateTo’，其余可选值‘redirectTo’、‘reLaunch’、‘switchTab’。
  • param { Object }：传递至下个页面的参数
  • receiveParam { Function } ：下个页面传递参数至本页面的回调函数
  • animationType { String }：窗口显示的动画效果，详见 (opens new window)
  • animationDuration { Number }：窗口动画持续时间，单位为 ms

说明跳转类型

• navigateTo 保留当前页面，跳转到应用内的某个页面
• redirectTo 关闭当前页面，跳转到应用内的某个页面。
• reLaunch 关闭所有页面，打开到应用内的某个页面。
• switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 不能带参数。

向上个页面传参

this.$router.sendUpParam.call(this, { data: '参数内容' })

• 配合$router.push中option.receiveParam函数使用
• 注意this指向

返回页面

this.$router.back({delta: 1})

• option { Object } ：配置项
  • delta： 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

api 管理

• 二次封装uni.request (opens new window)方法，实现类似axios的API管理方法
• 使用 Glob 导入自动整合所有，并挂载至vue全局属性
• 可以不用各页面分别引入api

添加api

import { request } from '@/utils/request';

const api = {
  // 登陆
  login(data) {
    return request({
      url: '/auth/login',
      method: 'POST',
      data
    });
  },
};

export default api;

调用api

// 根目录下的api 
// fileName = 文件名
this.$api.fileName.workOrderInfo().then(res => {
    console.log('返回数据：', res)
})
// 多级目录下的api
// mkdirName_fileName = 目录名_文件名
this.$api.mkdirName_fileName.workOrderInfo().then(res => {
    console.log('返回数据：', res)
})