从零开始的uniapp跨平台开发

基础篇

1.1uniapp的简介与环境配置

        1.1.1uniapp的简介

uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

uni-app特点：

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

4、开发生态、周边生态丰富（组件丰富）

5、通用技术栈，学习/开发成本低，

1.1.2uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

选择对应的版本下载即可：

二、下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：

三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

微信开发者工具安装路径可通过此方式快速查找：

1.1.3uni-app项目的创建和运行

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

第二步：选择项目

选择类型，输入工程名，选择模板，点击创建，即可成功创建

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

1.1.4uni-app项目的打包发布

uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：

1、打包为原生App（云端）

2、打包为原生App（离线）

3、发布为h5，操作流程如下：4、发布为微信小程序点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮出现此截图说明打包上传成功：此时登录微信公众平台官网。

等待审核通过之后，点击【提交发布】即可发布成功。

PS:如果在提交审核的过程中，弹出弹窗提示需要设置主营类目的话，根据指引前往设置即可。

参考网址：设置

注意：

1、主营类目有且只有一个，选择即生效，不可删除；

2、主营类目每年有 5 次修改机会，修改即生效，请谨慎修改；

3、完成主营类目设置后才可提交代码审核；

4、主营类目选择错误可能影响代码审核结果，请正确选择。

1.2uni-app基础知识

 1.2.1uni-app开发规范

uni-app开发规范遵循以下原则：

1、页面文件遵循Vue单文件组件

2、组件标签规范类似于微信小程序规范。

3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。

4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。

5、为了更好的兼容多端运行，建议使用Flex布局进行开发。

除此以外，uni-app项目的开发还需遵循以下规范：

1、目录结构规范

• 建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。
• 将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。

2、命名规范

• 文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等

3、代码规范

• 遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
• 注意代码的缩进和格式，提高代码的可读性。
• 避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。
• 合理使用生命周期函数，避免在页面加载时做过多的初始化操作。

4、样式规范

• 推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。
• 统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。
• 避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理

5、注释规范

• 在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
• 注释应该清晰简洁，描述代码的功能、参数和返回值等信息。

1.2.2uni-app文件目录结构

1.3uni-app的基础配置

概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。

配置项列表

1.3.1全局配置

属性	类型	必填	描述
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
easycom	Object	否	组件自动引入规则
subPackages	Object Array	否	分包加载配置

更多详细参考此链接：配置项列表

1.3.2应用配置

概述：应用配置主要在manifest.json文件里进行配置，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

配置项列表

属性	类型	默认值	描述
name	String	无	应用名称
appid	String	新建 uni-app 项目时，DCloud 云端分配。	应用标识
description	String	无	应用描述
versionName	String	无	版本名称，例如：1.0.0。详见下方Tips说明
versionCode	Number	无	版本号，例如：36

更多详细参考此链接：配置项列表

1.3.3页面配置

概述：页面配置主要配置页面的样式、标题、导航栏等等，主要在page.json文件中的pages节点进行页面的配置，页面配置的权重高于全局配置

pages属性表

属性	类型	默认值	描述
path	String	无	配置页面的路径
style	Object	无	配置页面的窗口表现（样式）

更多详细参考此链接：pages属性表

1.4uni-app内置组件

1.4.1外部资源的引入

在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。

1、本地图片或视频的引入

• 绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

例如：<image src="https://example.com/images/image.jpg">

• 相对路径，需提供相对于当前文件的路径

例如：<image src="../../static/images/image.jpg">或者<image src="@/static/images/image.jpg">  但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。

2、js文件的引入

例如：import "../../common/js/index.js"

或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）

写法一： import common from '@/utils/common.js'

写法二： import common from '../../utils/common.js'  具体相对路径请根据实际文件夹情况来设置

3、css文件的引入

写法一： @import "@/styles/common.css"

写法二： @import "../../styles/common.css"   具体相对路径请根据实际文件夹情况来设置

1.4.2uni-app组件基础信息

概述：组件是页面的基本组成单位，类似原HTML页面的标签，主要用于进行页面结构的搭建。

组件的组成结构：开始/结束标签、内容、属性、属性值。

基础结构如下图所示：

常用组件

属性	描述
view	类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签
scroll-view	(可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等
swiper	滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图
text	类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异
button	uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。

更多详细组件参考此链接：更多组件的使用

1.4.3uni-app的页面样式与布局

一、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.css5、在页面中通过class使用字体图标

1.5uni-app的路由和生命周期

1.5.1uni-app的路由操作

路由的跳转

概述：uni-app项目的路由由框架统一管理，每新增一个页面，都需要在page.json里面进行配置，uni-app路由的跳转有2种方式，以下对这两种方式进行讲解：

方式一：使用navigator组件进行跳转，该组件的属性说明如下：

属性名	类型	默认值	描述
url	String	无	应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀
open-type	String	navigate	跳转方式
delta	Number	无	当 open-type 为 'navigateBack' 时有效，表示回退的层数

更多详细参考此链接：navigator

方式二：使用路由API进行跳转：

API	描述
uni.navigateTo()	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo()	关闭当前页面，跳转到应用内的某个页面
uni.switchTab()	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.reLaunch()	关闭所有页面，打开到应用内的某个页面
uni.navigateBack()	关闭当前页面，返回上一页面或多级页面

更多详细参考此链接：路由API

页面的传参

概述：uni-app项目的路由由框架统一管理，每新增一个页面，都需要在page.json里面进行配置，uni-app路由的跳转有2种方式，以下对这两种方式进行讲解：

方式一：使用navigator组件进行跳转，该组件的属性说明如下：

属性名	类型	默认值	描述
url	String	无	应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀
open-type	String	navigate	跳转方式
delta	Number	无	当 open-type 为 'navigateBack' 时有效，表示回退的层数

更多详细参考此链接：navigator

方式二：使用路由API进行跳转：

API	描述
uni.navigateTo()	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo()	关闭当前页面，跳转到应用内的某个页面
uni.switchTab()	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.reLaunch()	关闭所有页面，打开到应用内的某个页面
uni.navigateBack()	关闭当前页面，返回上一页面或多级页面

更多详细参考此链接：路由API

1.5.2uni-app的生命周期

概述：uni-app完全支持Vue实例的生命周期，同时还新增了应用的生命周期和页面的生命周期。

应用生命周期列表

函数名	描述
onLaunch	应用初始化完成时触发（全局只触发一次）
onShow	应用启动，或从后台进入前台触发
onHide	应用从前台进入后台触发
onError	应用报错时触发

更多详细参考此链接：应用生命周期

页面生命周期列表

函数名	描述
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onHide	监听页面隐藏

更多详细参考此链接：页面生命周期

组件生命周期列表

函数名	描述
beforeCreate	实例初始化之后被调用
created	实例创建之后被调用
beforeMount	实例挂载之前被调用
mounted	实例挂载之后被调用