《uniapp跨平台开发》学习心得体会

一、uni.ui扩展组件

概述：uni-app的内置组件只能满足基础的需求，当需要更多场景时，则需要用到uni-app的扩展组件来实现，扩展组件是对内置组件进行了二次封装，是官方提供的uni-ui扩展组件。

uni-ui扩展组件的使用方式：

方式一：在创建项目的时候，直接选择包含uni-ui模板进行创建的项目。

方式二：在已有项目的基础上进行下载使用，网址。

uni-ui扩展包安装成功之后，找到自己项目所需要的组件，直接复制到页面使用即可，此操作类似vue的element-ui框架的使用：

二、自定义组件使用的步骤： 

1、在components新增一个自定义组件，如custom-button

2、编写组件内容

3、在页面引入、注册、使用组件

Tip 小技巧：

如果在新建自定义组件的时候，起名字的时候以uni-开头，即可直接在页面使用，不需要引入和注册，例如：

三、uni-app的页面样式与布局

      （一）在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：

      1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。

      2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。

      3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。

（二）设置背景图片注意事项

• 支持base64格式的图片，网址

• 支持网络路径图片。

• 支持小于40KB的图片。

• 使用本地背景图需注意：在线压缩图片

  • • 若背景图小于40KB,uni-app编译到不支持本地背景图片的平台时，会自动将其转换为base64格式。

    • 若背景图大于40KB,不建议使用，若执意使用的话，需要手动将其转换为base64格式使用，或最好将其上传到服务器上面，通过网络路径来引用。

      本地背景图引用路径建议使用"~@"格式来引用，例如：

    • C/C++

      	.test{
      	background: url("~@/static/img1.png");
      	}

三、使用字体图标

uni-app支持各种字体图标的使用，以下讲解几种使用字体图标的方式：

• 方式一：使用网络路径字体图标（以阿里巴巴矢量图标库为例）

  • 1、注册登录阿里巴巴矢量图标库，找到自己想要的图标，加入购物车，然后新建一个项目，把购物车的图标加入项目中，然后进入自己的项目图标，复制css代码

    

    

  • 2、在项目的App.vue中引入刚刚复制的代码

    

  • 3、在页面中通过class使用字体图标

    

• 方式二：使用本地路径的字体图标（以阿里巴巴矢量图标库为例）

  • 1、下载字体图标

    

  • 2、把下载的字体图标放置到uni-app项目的static目录中

    

  • 3、修改iconfont.css的引入路径

    

  • 4、在App.vue中引入iconfont.css

    

  • 5、在页面中通过class使用字体图标