# wms-pda

**Repository Path**: nieps/wms-pda

## Basic Information

- **Project Name**: wms-pda
- **Description**: wms pda移动应用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-24
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp

> [官网](https://uniapp.dcloud.net.cn/)

`uni-app` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

`DCloud`公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群，开发者可以放心选择。

`uni-app`在手，做啥都不愁。即使不跨端，`uni-app`也是更好的小程序开发框架（[详见](https://ask.dcloud.net.cn/article/35947)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

![image-20260424095600413](assets/image-20260424095600413.png)

## 单位

* px 
* rpx  响应式 px      750稿  



## 事件  跳转

* ## uni.navigateTo(OBJECT)    

  > 1. 跳转非tabBar页面路径
  > 2. 保留页面，可以回退  uni.navigateBack(OBJECT)

* ## uni.redirectTo(OBJECT)  知道就行 

  > 关闭当前页面跳转，无法回退 

* ## uni.switchTab(OBJECT)

> 跳转tabBar页面 

## 页面生名周期

[文档](https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle)

## 请求

### 原生请求

~~~javascript
import {ref,onMounted} from 'vue'
	import host from '../../utils/env.js'
	
	//请求
	function query(){
		uni.request({
			url:host+"/api/arrivalList/query",
			data:{
				 "pageNum": 0,
				  "pageSize": 0
			},
			header:{
				"satoken":"b0e0057d-f411-4680-b770-70f53a97fd6a"
			},
			method:"POST",
			success:function(res){
				console.log("res>>>",res)
			},
			fail:err=>{
				console.log("err===",err)
			}
		})
	}
	
	
	onMounted(()=>{
		query()
	});
~~~









## vue-cli创建项目

创建 vue3 项目

~~~shell
npx degit dcloudio/uni-preset-vue#vite  mshop
~~~

> 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 [gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip) 下载模板）

安装依赖

~~~shell
#切换到项目所在目录
pnpm install 
#根据平台运行 如h5
pnpm dev:h5
~~~

## 目录结构

一个uni-app工程，默认包含如下目录及文件：

```
┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件（已废弃）
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module 详见
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放微信小程序、QQ小程序组件的目录，详见
├─mycomponents          存放支付宝小程序组件的目录，详见
├─swancomponents        存放百度小程序组件的目录，详见
├─ttcomponents          存放抖音小程序、飞书小程序组件的目录，详见
├─kscomponents          存放快手小程序组件的目录，详见
├─jdcomponents          存放京东小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量
	
```

### static目录

* 编译器会把这个目录整体复制到最终编译包内。如果static里有一些没有使用的废文件，也会被打包到编译包里，造成体积变大。
* 非 `static` 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。
* `css`、`less/scss` 等资源不要放在 `static` 目录下，建议这些公用的资源放在自建的 `common` 目录下。
* static目录下的文件，在app第一次启动时，解压到了app的外部存储目录（external-path）,所以注意控制static目录的大小，太大的static目录和太多文件，会造成App安装后第一次启动变慢。

## 页面简介

> [参考文档](https://uniapp.dcloud.net.cn/tutorial/page.html)

uni-app项目中，一个页面就是一个符合`Vue SFC规范`的 vue 文件。

- 在 uni-app js 引擎版中，后缀名是`.vue`文件或`.nvue`文件。 这些页面均全平台支持，差异在于当 uni-app 发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](https://uniapp.dcloud.net.cn/tutorial/nvue-outline)。

  一个页面可以同时存在vue和nvue，在[pages.json](https://uniapp.dcloud.net.cn/collocation/pages.html)的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：

  - 在非app平台，先使用vue，忽略nvue
  - 在app平台，使用nvue，忽略vue

### 关键点

* `uni-app`中的页面，默认保存在工程根目录下的`pages`目录下。

* 每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中注册的页面，`uni-app`会在编译阶段进行忽略   

  > [页面配置](https://uniapp.dcloud.net.cn/collocation/pages.html)

* 删除页面

  > 删除页面时，需做两件工作：
  >
  > - 删除`.vue`文件、`.nvue`、`.uvue`文件
  > - 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）

* 页面改名

  操作和删除页面同理，依次修改文件和 `pages.json`。

* pages.json

  > pages.json是工程的页面管理配置文件，包括：页面路由注册、页面参数配置（原生标题栏、下拉刷新...）、首页tabbar等众多功能。
  >
  > [pages.json配置参考](https://uniapp.dcloud.net.cn/collocation/pages.html)

* 页面内容组成

  > uni-app 页面基于 vue 规范。一个页面内，有3个根节点标签：
  >
  > - 模板组件区 `<template>`
  > - 脚本区 `<script>`
  > - 样式区 `<style>`

* 页面生命周期

  > `uni-app` 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：[Vue2 组合式 API 使用文档](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html) 和 [Vue3 组合式 API 使用文档](https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html)。

## 绝对路径和相对路径

在日常开发中，经常会遇到使用绝对路径还是相对路径的问题，下面我们介绍下这两种路径。

### 绝对路径

绝对路径：是指从项目根目录开始的完整路径。它用于指定文件或目录的确切位置。绝对路径通常以斜杠（/）开头，表示从根目录开始。

例如：

```vue
<template>
  <!-- 图片组件引用绝对路径 -->
  <image src="/static/logo.png" />
  <!-- 视频组件引用绝对路径  -->
  <video src="/static/demo.mp4" />
  <!-- 其他需要引用资源的媒体组件均可以使用绝对路径 -->
</template>
<script setup>
// 使用一个图片资源时，可以使用绝对路径
uni.getImageInfo({
  src: "/static/logo.png",
});
// 跳转页面时，可以使用绝对路径
uni.navigateTo({
  url: "/pages/login/login",
});
</script>
```

这里的`/static/logo.png`就是一个绝对路径，表示图片文件位于项目根目录下的 static 文件夹中。

绝对路径的优点是可以直接定位到文件的确切位置，不受当前目录的影响，通常需要动态传递的路径，我们建议使用绝对路径。

**注意**

- 当使用`import`语句导入代码文件或静态资源时，`@/`表示项目根目录的绝对路径。如`import { add } from "@/common/utils"`

### 相对路径

相对路径：在编译时是指一个文件或目录相对于另一个文件或目录的位置，在运行时是指一个文件相对于当前页面路由的位置（不建议使用运行时的相对路径，应该优先使用绝对路径）。

例如：

组件 components/custom/custom.vue

```vue
<template>
  <!-- 绑定动态路径 -->
  <image :src="src" />
</template>
<script setup>
// 编译时：使用 import 语句相对路径导入图片
import logo from "../../static/logo.png";
console.log(logo); // import 语句会在编译阶段根据当前文件位置转换为绝对路径

// 运行时
// 错误的相对路径用法，image组件会在运行时根据当前页面路由来转换该相对路径，当不同的页面使用custom组件时，转换的路径是不同的
// 应该使用绝对路径：/static/logo.png，这样可以确保在任意页面都访问到正确的图片地址
const src = "../../static/logo.png";

uni.navigateTo({
  // 运行时
  // 错误的相对路径用法，路由会在运行时根据当前页面路由来转换该相对路径
  // 应该使用绝对路径：/pages/index/index
  url: "../../pages/index/index",
});
</script>
```

**注意**

- 在 uni-app x 项目中，dialogPage 不影响页面栈和路由地址，所以也不会影响运行时的相对路径转换

## 组件引用

> [文档参考](https://uniapp.dcloud.net.cn/tutorial/page-component.html)
>
> [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)

`uni-app`的`easycom`机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效.

只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用.

`路径规范`指：

1. 安装在项目根目录的 components 目录下，并符合`components/组件名称/组件名称.vue`
2. 安装在 uni_modules 下，路径为`uni_modules/插件ID/components/组件名称/组件名称.vue`

工程目录：

```
┌─components
│  └─comp-a
│    └─comp-a.vue      符合easycom规范的组件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件
   └─uni_modules
     └─uni-list
       └─components
         └─uni-list
           └─ uni-list.vue
```

## js 文件引入

> `js`文件或`script`标签内（包括 renderjs 等）引入`js`文件时，可以使用相对路径和绝对路径，形式如下

```js
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';
```

**注意**

- js 文件不支持使用`/`开头的方式引入

## 引用CSS

使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。

**示例代码：**

```html
<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>
```

## 引入静态资源

> [文档](https://uniapp.dcloud.net.cn/tutorial/page-static-assets.html)

## 高效开发技巧

> [参考](https://uniapp.dcloud.net.cn/tutorial/snippet.html)

为提升开发效率，HBuilderX将 `uni-app` 常用代码封装成了以 `u` 开头的代码块，如在 `template` 标签内输入 `ulist` 回车，会自动生成如下代码：

```html
<uni-list>
	<uni-list-item title="" note=""></uni-list-item>
	<uni-list-item title="" note=""></uni-list-item>
</uni-list>
```

注意：需确保`uni-list`组件已保存在项目的`components`目录下。比较简单的方式，是新建项目时，选`uni-ui`项目模板，在里面即可随便敲所有u开头的代码块。如果你的项目不是`uni-ui`项目模板，那么你需要去插件市场手动把[uni ui组件](https://ext.dcloud.net.cn/plugin?id=55)下载到工程里。

代码块分为`Tag`代码块、`JS`代码块，如在 `script` 标签内输入 `uShowToast` 回车，会自动生成如下代码：

```js
uni.showToast({
	title: '',
	mask: false,
	duration: 1500
});
```



## 全局文件

[文档](https://uniapp.dcloud.net.cn/collocation/pages.html)

## 组件

[文档](https://uniapp.dcloud.net.cn/component/)

## API

[文档](https://uniapp.dcloud.net.cn/api/)