# yanglao

**Repository Path**: nieps/yanglao

## Basic Information

- **Project Name**: yanglao
- **Description**: 智慧养老移动端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-27
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

## 项目结构

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

## 页面

每个页面是一个vue文件，这个文件的组成分为三部分：

~~~vue
<!-- 这是模板 html结构 -->
<template>
   hello uniapp
</template>

<!--这是vue逻辑-->
<script>
</script>

<!--样式  scoped 说明当前定义的css只对当前组件有效-->
<style scoped>
	
</style>
~~~



## javascript对象

数据类型：

* 基本类型

  > 1. 字符串  string
  > 2. 数字  number
  > 3. null 
  > 4. undefined 
  > 5. boolean 
  > 6. symbol  

* 引用类型

  > 1. 数组     [12,4,6]
  >
  > 2. 函数  可以重复调用 的一段代码    function  add(){}
  >
  > 3. 对象   是一组的属性的无序集合 
  >
  >    ~~~javascript
  >    //普通对象
  >    {} 
  >    //属性:属性值  属性是字符串类型 ""   属性值理论上 是各种类型   属性值对之间用,隔开 
  >    
  >    {
  >        "name":"张三",
  >         "age":23,
  >          "contact":{
  >              "qq":"2222",
  >               "weixin":""
  >          }
  >    }
  >    ~~~
  >
  >    

##  pages属性

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



## 单位

* px 

* rpx

  > rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，

* rem  相对单位---   换算



## api调用 

跨域：非同源即跨域

同源策略： 协议、域名、端口号一致  

http://localhost:5173

# CSS

## 样式引用方式

样式的引用方式：

1. 行内样式   通过style属性 在元素内定义

   ~~~vue
    <view style="width: 200rpx;height: 200rpx;background-color: #f00;"></view>
   ~~~

2. 内部样式  无论 是在html页面 还是组件内，都是通过<style>标记定义的样式 

   ~~~vue
   <!--样式  scoped 说明当前定义的css只对当前组件有效-->
   <style scoped>
   	.search{
   		width: 750rpx;
   		height: 50rpx;
   		background-color: #f00;
   	}
   </style>
   ~~~

## CSS 基本语法

CSS 由 **选择器** + **声明块** 组成：

```css
选择器 {
  属性名: 属性值;  /* 一条样式声明 */
  属性名: 属性值;
}
```

- **选择器**：选中你要修改的 HTML 元素（比如文字、按钮、图片）
- **属性**：要改什么样式（颜色、大小、位置）
- **值**：改成什么样

## 选择器

* 元素选择器  直接通过元素名定义   如   选择所有view元素

  ~~~css
  	view  {
  		width: 750rpx;
  		height: 50rpx;
  		background-color: #f00;
  	}
  ~~~

* 类选择器  定义   .类名   类名任意定义合法 

  ~~~css
  .search {
      
  }
  ~~~

  引用时通过 class="类名"    如 class="search "

* id选择器   #id的值  来选择目标元素 

* 后代选择器   

  ~~~css
  /* view 元素下面的 image元素的样式 */
  view image {}
  /*class="search"  元素下面的 image元素 */
  .search image {}
  ~~~

* 并集选择器  同时 有多个选择器，选择器之间用 逗号隔开  

  ~~~css
  /* view 元素  ，class="search" 的元素 应用下面的样式 */
  view ,.search {}  
  
  /* html  body 两个元素同时应用的样式 */
  html,body{
  	background-color: #e8f1f8;
  }
  ~~~



## 外边局

margin-top: 数值;    /* 上外边距 */
margin-right: 数值;  /* 右外边距 */
margin-bottom: 数值; /* 下外边距 */
margin-left: 数值;   /* 左外边距 */

/* 4个值：上 右 下 左 */
margin: 10px 20px 30px 40px;

/* 2个值：上下 左右 */
margin: 10px 20px;

/* 1个值：上下左右全部相同 */
margin: 10px;

特殊值: auto   自动适配



## 边框

### border 三要素（必须记住）

边框必须有 **3 个属性** 才能显示：

1. **宽度**：`border-width`（粗细）

2. **样式**：`border-style`（实线 / 虚线等，**必须写！**）

   > style可选值
   >
   > 这是最常用的几种：
   >
   > - `solid` —— **实线（最常用）**
   > - `dashed` —— 虚线
   > - `dotted` —— 点线
   > - `double` —— 双实线
   > - `none` —— **无边框**（默认）

3. **颜色**：`border-color`（颜色）

> 颜色： rgb   每个颜色值的范围0-255   值越小颜色越深，通常使用十六进制表示： a-10  b-11 c-12 d-13  e-14 f-15
>
> * #ffffff   白色
> * #000000  黑色 
> * #111111 #333 #666 #999 #ccc  灰色
> * #f00  红色 
> * #0f0  绿色 
> * #00f 蓝色
>
> rgba   alpha：透明度  

~~~css
         border-width: 1rpx;
		border-color: #f00;
		border-style: solid;     

  /*简化  只要保证提供3种属性值  值之间用空格隔开    */
        border:  1rpx solid #0f0 ;
~~~

分别设置4个边框：(简化写法)

* border-left

  > 拆开写，分别对应3属性：
  >
  > * border-left-width  宽度
  > * border-left-style  样式
  > * border-left-color 颜色 
  >
  > 

* border-top

* border-right

* border-bottom

## 圆角

- border-top-left-radius（左上圆角）
- border-top-right-radius（右上圆角）
- border-bottom-right-radius（右下圆角）
- border-bottom-left-radius（左下圆角）

## 块元素 行内元素

* 块元素  独占一行 
* 行内元素  并列放在同一行 



## flex布局

#### justify-content属性

`justify-content`属性定义了项目在主轴上的对齐方式。

```css
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
```

![img](assets/1773020034952-15a1cd73-586e-4d2a-8d6c-25f02e879505.png)

#### align-items属性

`align-items`属性定义项目在交叉轴上如何对齐。

```css
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```

![img](assets/1773020034746-490c6c1c-5094-492c-8a6e-740dcb03949c.png)



## 文字与文本

* 字体 大小   font-size      pc浏览器默认字体大小是16px  
* `font-weight` —— 文字粗细
* `line-height` —— 行高（行距）
* `color` —— 文字颜色
* `text-align` —— 文本水平对齐



颜色：  rgb  



## 内容溢出

应用场景：’

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

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

### 单行溢出

~~~css
/*不换行*/
		white-space: nowrap;
		/*内容溢出后隐藏*/
		overflow: hidden;
		/*多余的内容通过...显示 */
		text-overflow: ellipsis;
~~~



### 多行溢出

~~~css
  overflow: hidden; /* 隐藏溢出内容 */
		  text-overflow: ellipsis; /* 显示省略号 */
		  display: -webkit-box; /* 弹性盒模型 */
		  -webkit-line-clamp: 2; /* 控制显示行数：2行就写2，3行就写3 */
		  -webkit-box-orient: vertical; /* 垂直排列 */
		  /* 可选：修复部分浏览器间距问题 */
		  word-break: break-all;
~~~





## 内边距

/* 上 右 下 左 四个方向单独写 */
padding-top: 10px;    /* 顶部内边距 */
padding-right: 20px;  /* 右侧内边距 */
padding-bottom: 15px;/* 底部内边距 */
padding-left: 25px;   /* 左侧内边距 */



/* 4个值：上 右 下 左 */
padding: 10px 20px 15px 25px;

/* 2个值：上下 左右 */
padding: 10px 20px;

/* 1个值：四个方向全部相同 */
padding: 10px;



/*内边距  不会撑大元素大小 */
box-sizing: border-box;



## 定位

应用场景：

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

电商详情页：

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

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

常用定位：

* position: relative;   /* 相对定位 */*      

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

* *position: absolute;   /* 绝对定位 */*（用的少 ）

* *position: fixed;      /* 固定定位 */  

偏移位置：

- `top` 距离顶部
- `bottom` 距离底部
- `left` 距离左侧
- `right` 距离右侧

## AI



## 发布





# 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开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。







## 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/)