uniapp+hbuilder学习记录

最新推荐文章于 2024-05-19 23:07:11 发布

玄机凭测

最新推荐文章于 2024-05-19 23:07:11 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： javascript html html5 vue.js css

本文链接：https://blog.csdn.net/weixin_37480339/article/details/109786008

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

项目结构

	——pages ---- 存放页面
	——static ---- 存放静态资源
	——unpackage ---- 存放最终打包输出的文件
		——dist
	——App.vue ---- 项目的根组件（页面的入口文件） 所有页面都是在App.vue下进行切换的，可以调用应用的生命周期函数
	main.js ---- 项目的入口文件 ，主要作用：初始化vue实例并使用需要的插件
	manifest.json ---- 配置应用的打包的文件
	pages.json ---- 配置页面的存放路径以及项目的窗口外观
	uni.scss ---- 常用的样式变量声明

组件

text

	属性： 
	1. selectable :文字可以被选中 true
	2. space = "ensp" //中文字符空格一半大小
		space="emsp" //中文字符空格大小
		space= "nbsp" // 根据字体设置的空格大小
	3. decode 解析特殊字符 ：&nbsp;&lt;&amp;等，默认可以解析

	<text selectable space="nbsp">跳舞   rap 篮球</text>

view

	属性：
	1.hover-class: 指定按下去的样式类
	2.hover-stop-propagation: 阻止冒泡
	3.:hover-start-time: 按住后多久开始显示效果
	4.:hover-stay-time:手指离开元素后效果延迟多久隐藏

		<view class="box1" hover-class="hover_box1" :hover-start-time="2000" >
			<view class="box2" hover-class="hover_box2" hover-stop-propagation :hover-stay-time="3000">
				我是个盒子
			</view>
		</view>

	.box1{
		background-color: #007AFF;
		width: 300rpx;
		height: 300rpx;	
	}
	.box2{
		background-color: #4CD964;
		width: 100rpx;
		height: 100rpx;
	}
	.hover_box1{
		background-color: #2C405A;
	}
	.hover_box2{
		background-color: #808080;
	}

在这里插入图片描述

button

	属性：
	1. size: 尺寸--- mini
	2. type: 按钮类型--- primary
	3. loading :将在按钮内部显示加载状态
	4. plain : 按钮是否镂空
	5. disable: 按钮是否禁用

image

	属性：
	1.src: 图片资源路径
	2. mode: 图片裁剪、缩放的模式 
		常用：aspectFit 、 aspectFill

uni-app中的样式

rpx: 响应式px

根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

@import:导入外联样式表

<style>
	@import url("css文件路径");
</style>

注意：在uni-app中不能使用*选择器

<page>标签相当于<body>

全局样式、局部样式

定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式。

uni-app中如何使用字体图标

	使用方式于普通web项目相同，需要注意几点：
	1. 字体文件小于40kb，uni-app会自动将其转化为base64格式
	2. 字体文件>= 40kb,需要开发者自己转化，否则将不生效
	3. 字体文件的引用路径推荐使用以~@开头的绝对路径

@font-face {
font-family: test1-icon;
src:url(’~@/static.iconfont.ttf’);
}

uni-app中使用sass,less

在这里插入图片描述

安装插件，引入sass

	<style lang="scss"></style>

基础的数据绑定–延用vue

如何注册事件和传递参数及获取事件对象

在这里插入图片描述

同时传递参数以及获取事件对象，需要$event
不传递参数，则方法的形参event中可以获取到事件对象

uni的生命周期函数

应用的生命周期

	应用的生命周期函数定义在App.vue中
	onLaunch: 应用启动的时候触发，整个生命周期只触发一次，除非再次刷新应用
	onShow:应用显示到页面的时候触发
	onHide: 应用隐藏的时候触发
	onError: 应用出现异常时触发

页面的生命周期

	每个页面都有自己的生命周期
	onLoad: 页面加载，在整个生命周期中只加载一次
	onShow: 页面显示，随着页面显示隐藏可以多次触发
	onReady:页面渲染完成，在整个生命周期中只加载一次
	onHide:页面隐藏，多次触发
	onUnload: 监听页面卸载
	onPullDownRefresh: 监听用户下拉// 下拉逻辑完成后停止当前页面的下拉操作：uni.stopPullDownRefresh()
	onReachBottom: 监听触底

注意： tabbar的页面展示过一次后就保留在内存中，再次切换tabbar页面，不会触发onLoad,onReady

在这里插入图片描述

触发下拉刷新的两种方法

	1. 在pages.json文件中进行配置
	2. 通过uni.startPullDownRefresh()触发监听

1
在这里插入图片描述
2

数据缓存

	uni.setStorage //异步接口
	uni.setStorageSync // 同步接口

异步操作

在这里插入图片描述

同步操作

在这里插入图片描述

上传图片、预览图片

上传图片

	uni.chooseImage()
	属性：
	count : 最多可以选择的图片张数，默认9
	sizeType: "original" , "compressed"（原图，压缩图，默认都有）
	sourceType: "album","camera" (从相册选图，使用相机，默认都有)
	success: 成功则返回图片本地文件路径列表
	fail: 接口调用失败
	complete: 接口调用结束的回调函数

在这里插入图片描述

预览图片

	uni.perviewImage()
	属性： current:当前显示图片的链接
	urls: 需要预览的图片链接列表[]
	loop: 是否可循环
	success
	fail
	complete

在这里插入图片描述

跨端兼容

条件编译

用特殊的注释作为标记，在编译时根据这些特殊注释，将注释里面的代码编译到不同平台
写法：以 #ifdef 加平台标识开头，以 #endif 结尾

平台标识

值	平台
APP-PLUS	5+APP
H5	H5
MP-WEXXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP	各类小程序

在这里插入图片描述

uni中的导航跳转

利用navigator进行跳转

open-type:跳转方式
	open-type="redirect",将会把上一个页面关闭，并跳转至指定页面，之后将不可通过返回按钮进行返回
	open-type="switchTab", 跳转tabbar页面，必须设置switchTab

在这里插入图片描述

利用编程式导航进行跳转

在这里插入图片描述

导航跳转传递参数

在这里插入图片描述

	在onLoad(option){}方法中，通过获取参数option,获得导航跳转传递过来的参数

玄机凭测

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
uniapp+hbuilder学习记录

项目结构 ——pages ---- 存放页面 ——static ---- 存放静态资源 ——unpackage ---- 存放最终打包输出的文件 ——dist ——App.vue ---- 项目的根组件（页面的入口文件）所有页面都是在App.vue下进行切换的，可以调用应用的生命周期函数 main.js ---- 项目的入口文件，主要作用：初始化vue实例并使用需要的插件 manifest.json ---- 配置应用的打包的文件 pages.json ---- 配置页面的存放路径以及
复制链接

扫一扫