uni-app

一.uni-app简介

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、通用技术栈,学习/开发成本低,

二.uni-app环境搭建

环境搭建步骤:

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

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

或者点击下方附件进行下载,可直接下载到本地,解压可直接使用,无需安装:

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

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

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

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

三.uni-app项目的创建和运行 

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

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

       第二步:选择

 
uni-app

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

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

四.uni-app项目的打包发布 

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

1、打包为原生App(云端)

2、打包为原生App(离线)

3、发布为h5,操作流程如下:

4、发布为微信小程序

点击【发行】按钮之后,会自动启动微信开发者工具,点击【上传】按钮

出现此截图说明打包上传成功:

此时登录微信公众平台官网

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

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

参考网址:设置

注意:

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

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

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

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

五.uni-app开发规范

 

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

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

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

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

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

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

更多详细可参考课表:P26~P31

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

1、目录结构规范

          • 建议按照 uni-app 默认的目录结构组织项目,以保持统一性和易读性。

          • 将不同功能和模块的文件放置在对应的目录下,如 pages 存放页面,components 存放组件等。

2、命名规范

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

3、代码规范

        • 遵循 Vue.js 官方的代码规范,保持代码风格的统一性。

        • 注意代码的缩进和格式,提高代码的可读性。

        • 避免在模板中直接编写过多逻辑,尽量将逻辑处理移到 JS 部分。

        • 合理使用生命周期函数,避免在页面加载时做过多的初始化操作。

4、样式规范

        • 推荐使用预处理器编写样式,如 Less、Sass 等,以提高样式代码的可维护性。

        • 统一使用 rpx 作为尺寸单位,以便在不同设备上进行适配。

        • 避免在样式中直接使用颜色值和尺寸值,建议提取出来作为变量统一管理

5、注释规范

        • 在关键代码和复杂逻辑处添加必要的注释,方便其他开发者理解代码意图。

        • 注释应该清晰简洁,描述代码的功能、参数和返回值等信息。

六.uni-app文件目录结构

 七.外部资源的引入

在进行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"   具体相对路径请根据实际文件夹情况来设置

八.uni-app组件基础信息

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

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

基础结构如下图所示:

常用组件

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

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

九.uni-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.css

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

 十.uni-app的路由操作

1.路由的跳转

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

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

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

更多详细参考此链接:navigator

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

API描述
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

uni.redirectTo()

关闭当前页面,跳转到应用内的某个页面

uni.switchTab()

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

uni.reLaunch()

关闭所有页面,打开到应用内的某个页面
关闭当前页面,返回上一页面或多级页面

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

 2.页面的传参

 

在使用路由操作进行页面跳转时,可以在跳转的同时传递参数到下一个页面中,并同时在下一个页面接收参数。具体步骤如下:

步骤一:使用API的方式进行页面的跳转

步骤二:在页面接收上一个页面传递过来的参数

线上参考资料:页面的传参

十一.uni-app的生命周期 

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

应用生命周期列表

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

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

页面生命周期列表

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

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

组件生命周期列表

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值