uni-app基础知识介绍

uni-app的基础知识介绍

1、在第一次将代码运行在微信开发者工具的时候，应该进行如下的配置:

（1）将微信开发者工具路径进行配置；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lbyk5Jw2-1679025184071)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024954729.png)]

（2）在微信开发者工具中的设置里面==》安全设置==》服务端口打开；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3IhwQH3-1679025184073)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024983105.png)]

2、全局配置：

（1）在pages.json里面有个gloablStyle进行配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVYYEIwo-1679025184073)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210503194138648.png)]

（2）属性有：

属性类型默认值描述
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色（同状态栏背景色）
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉Loading的样式，仅支持dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距离页面底部距离，单位仅支持px

3、页面的创建

在pages中去创建页面，在这里我们需要注意的是：在创建了页面之后，必须将此页面在全局中的pages.json中pages项进行页面路径配置；

"pages": [ //pages数组中第一项表示应用启动页
	{
	    "path" : "pages/message/message",
	    //在这个里面我们可以针对当前页面的一些基础样式进行设置，当前页面的设置会覆盖掉全局的设置
	    "style":{
			"navigationBarTitleText":"信息页面",
			"navigationBarBackgroundColor":"#4CD964",
			//我们在这里给h5单独设置
			"h5":{
				"pullToRefresh":{
					"color":"#007AFF"
				}
			}
	    } 
	},
	{
		"path": "pages/index/index"
	}  
]

4、tabBar 页面配置

属性说明：

属性类型必填默认值描述平台差异说明
colorHexColor是tab上面文字默认颜色
selectedColorHexColor是tab上的文字选中时的颜色
backgroundColorString是tab的背景色
borderStyleString否blacktabBar上边框的颜色，仅支持black/whiteApp2.3.4+支持其他颜色值
listArray是tab的列表，最少2个，最多5个tab
positionString否bttom可选值bottom、toptop仅微信小程序支持

在list数组里面所拥有的配置项：

pagePath:页面路径，必须在pages中先定义

text:tab上按钮文字

iconPath：图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效，不支持网络图片，不支持字体图标

selectedIconPath:选中时的图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效

5、condition启动模式配置

启动模式配置，仅支持开发期生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

属性说明：

属性类型是否必填描述
currentNumber是当前激活的模式，list节点的索引值
listArray是启动模式列表

list说明：

属性类型是否必填描述
nameString是启动模式名称
pathString是启动页面路径
queryString否启动参数，可在页面的onload函数里获得
pages.json
{
 "condition": {
    "current" : 0,
    "list": [
        {
        "name": '详情页面',
        "path":"pages/detail/detail",
        "query":"id=80"
        }
      ]
    }
}

6、组件的基本使用

（1）text文本组件的用法

属性类型默认值必填说明
selectablebooleanfalse否文本是否可选
spacestring否显示连续空格，可选线束：ensp/emsp/nbsp
decodebooleanfalse否是否解码

text 组件相当于行内标签，在同一行显示

（2）view视图容器组件的用法（类型于div）

属性类型默认值必填说明
hover-classstringnone否指定按下去的样式类，当hover-calss="none"时，没有点击态效果
hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber50否按住后多久出现点击态，单位是毫秒
hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒

（3）buttom按钮组件的用法

属性名类型默认值说明
sizestringdefault按钮大小
typestringdefault按钮的样式类型
plainBooleanfalse背景色透明
disabledBooleanfalse是否按钮
loadingBooleanfalse是否是带loading图标

（4）image组件的用法

7、uni-app中的样式

（1）rpx即响应式px,一种根据屏幕宽度自适应的动态单位，以750px宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大；

（2）使用@import语句可以引入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;分号表示语句结束；

（3）支持基本常用的选择器class/id/element等；

（4）在uini-app里面不能使用*选择器；

（5）page相当于body的节点；

（6）定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器；

（7）uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意一下几点：

字体文件大小40kb，uni-app会自动将其转化为base64格式；

字体文字大小等于40kb,需开发者自己转化，否则试用期不生效；

字体文字的引入路径推荐使用以~@开头的绝对路径

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

8、uni-app中的数据绑定

用法和vue中的相同；

9、uni-app中的事件绑定

用法同vue中的相同；

10、uni-app中的生命周期

属性名说明
onLaunch当uni-app初始化完成时触发（全局只触发一次）
onShow当uini-app启动，或者从后台进入前台显示
onHide当uini-app从前台进入后台
onError当uini-app报错时触发

页面的生命周期

函数名说明
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onPullDownRefresh监听用户下拉动作，一般用于下拉刷新
onReachBottom页面滚动到底部的事件，常用于下拉下一页数据
onShow监听页面显示，页面每次出现在屏幕上都触发
onReady监听页面初次渲染完成
onHide监听页面隐藏
onUnload监听页面卸载

11、下拉刷新

（1）在uni-app中有两种方式开启下拉刷新

第一种：需要在pages.json里，找到当前页面的pages节点，并且在style选项中开启enablePullDownRefresh

第二种：通过调用uni.startPullDownRefresh方式开启下拉刷新

（2）监听下拉刷新：

通过onPullDownRefresh可以监听到下拉刷新的动作

（3）关闭下拉刷新

uni.stopPullDownRefresh，停止当前页面下拉刷新

代码示例：

onPullDownRefresh() {
	console.log('下拉事件触发了');
	//当数据已经更新之后，不希望还是一种下拉刷新的状态，所以在这里我们需要将下拉刷新取消掉，在此我们需要调用停止下拉刷新的函数,因为我们的数据在一瞬间进行改变的，所以这个改变之后停止下拉刷新我们的效果并不是很明显，所以在这个时候我们可以添加一个定时器
	setTimeout(()=>{
	this.list = ['前端课程','Java','UI课程','大数据课程'];
	uni.stopPullDownRefresh();
	},2000)
}

12、网络请求

在uni中可以调用uni.request方法进行请求网络

需要注意的是：在小程序中网络相关的API在使用前需要配置域名白名单；

13、数据缓存

uni.setStorage

uni.setStorageSync

uni.getStorage

uni.getStorageSync

uni.removeStorage

uni.removeStorageSync

14、上传图片、预览图片

（1）上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照

（2）预览图片

uni.previewImage(object)这个方法可以预览图片

15、条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台

写法：以#ifdef加平台标识开头，以#endif结尾；

平台标识

值平台
APP-PLU55+APP
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO头条小程序
MP-QQQQ小程序
MP微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序

代码案例：

<!-- #ifdef H5 -->
<view >
	我只希望在H5页面中可以被看到
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view >
	我只希望在微信小程序被看到
</view>
<!-- #endif -->

onLoad() {
	// #ifdef H5
    console.log('我希望在H5中打印')
    // #endif
    // #ifdef MP_WEINXIN
    console.log('我希望在微信小程序中打印')
    // #endif
}

<styel>
 	/* #ifdef H5*/
    view {
		color: white;
    }
	/* #endif */
 </style>

16、两种方式导航跳转和传参

声明式导航：

<navigator url="/pages/detail/detail?id=80">跳转至详情页面</navigator>
<!-- 当我们要跳转到tabbar页面的时候，需要添加open-type -->
<navigator url="/pages/index/index" open-type="switchTab">跳转至首页</navigator>
<navigator url="/pages/index/index" open-type="redirect">跳转至详情页面</navigator>

详情页面的接收：
onLoad(options){
    console.log(options)
}

编程式导航：

<button type="default" @click="toDetail">跳转到详情页面</button>
<button type="default" @click="toIndex">跳转到首页</button>
methods:{
	toDetail(){
		uni.navigateTo({
			url:"/pages/detail/detail?id=80&age=90"
		})
	},
	toIndex(){
		 uni.switchTab({
			url:"/pages/index/index"
			})
		}
	}

详情页面的接收：
onLoad(options){
    console.log(options)
}

17、组件的创建使用和组件的生命周期函数

uni里面的使用和vue一致

18、组件的通讯

uni里面的使用和vue一致

19、uni-ui组件库

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/2930.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

静态版通讯录——“C”

静态版通讯录——“C”

各位CSDN的uu你们好呀&#xff0c;之前小雅兰学过了一些结构体、枚举、联合的知识&#xff0c;现在&#xff0c;小雅兰把这些知识实践一下&#xff0c;那么&#xff0c;就让我们进入通讯录的世界吧 实现一个通讯录&#xff1a; 可以存放100个人的信息每个人的信息&#xff1a;名…
阅读更多...
FPGA打砖块游戏设计（有上板照片）VHDL

FPGA打砖块游戏设计（有上板照片）VHDL

这是一款经典打砖块游戏，我们的努力让它更精致更好玩，我们将它取名为打砖块游戏（Flyball），以下是该系统的一些基本功能：  画面简约而经典，色彩绚丽而活泼，动画流畅  玩家顺序挑战3个不同难度的级别，趣味十足  计分功能，卡通字母数字  4条生命值，由生命条显示…
阅读更多...
智能扑克牌识别软件（Python+YOLOv5深度学习模型+清新界面）

智能扑克牌识别软件（Python+YOLOv5深度学习模型+清新界面）

摘要&#xff1a;智能扑克牌识别软件利用视觉方法检测和识别日常扑克牌具体花色与数字&#xff0c;快速识别牌型并标注结果&#xff0c;帮助计算机完成扑克牌对战的前期识别步骤。本文详细介绍基于深度学习的智能扑克牌识别软件&#xff0c;在介绍算法原理的同时&#xff0c;给…
阅读更多...
[数据结构]排序算法

[数据结构]排序算法

目录 常用排序算法的实现&#xff1a;&#xff1a; 1.排序的概念及其运用 2.插入排序 3.希尔排序 4.选择排序 5.冒泡排序 6.堆排序 7.快速排序 8.归并排序 9.排序算法复杂度及稳定性分析 10.排序选择题练习 常用排序算法的实现&#xff1a;&#xff1a; 1.排序的概念及其运用…
阅读更多...
【C语言蓝桥杯每日一题】——排序

【C语言蓝桥杯每日一题】——排序

【C语言蓝桥杯每日一题】—— 排序&#x1f60e;前言&#x1f64c;排序&#x1f64c;总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01;&#xff01;&#xff01; &#x1f60a;作者简介&am…
阅读更多...
【千题案例】TypeScript获取两点之间的距离 | 中点 | 补点 | 向量 | 角度

【千题案例】TypeScript获取两点之间的距离 | 中点 | 补点 | 向量 | 角度

我们在编写一些瞄准、绘制、擦除等功能函数时&#xff0c;经常会遇到计算两点之间的一些参数&#xff0c;那本篇文章就来讲一下两点之间的一系列参数计算。 目录 1️⃣ 两点之间的距离 ①实现原理 ②代码实现及结果 2️⃣两点之间的中点 ①实现原理 ②代码实现及结果 3…
阅读更多...
当下的网络安全行业前景到底怎么样？还能否入行？

当下的网络安全行业前景到底怎么样？还能否入行？

前言网络安全现在是朝阳行业&#xff0c;缺口是很大。不过网络安全行业就是需要技术很多的人达不到企业要求才导致人才缺口大常听到很多人不知道学习网络安全能做什么&#xff0c;发展前景好吗&#xff1f;今天我就在这里给大家介绍一下。网络安全作为目前比较火的朝阳行业&…
阅读更多...
给程序加个进度条吧，1行Python代码，快速添加~

给程序加个进度条吧，1行Python代码，快速添加~

大家好&#xff0c;这里是程序员晚枫。 你在写代码的过程中&#xff0c;有没有遇到过以下问题&#xff1f; 已经写好的程序&#xff0c;想看看程序执行的进度&#xff1f; 在写代码批量处理文件的时候&#xff0c;如何显示现在处理到第几个文件了&#xff1f; &#x1f446…
阅读更多...
真要被00后职场整顿了？老员工纷纷表示真的干不过.......

真要被00后职场整顿了？老员工纷纷表示真的干不过.......

最近聊到软件测试的行业内卷&#xff0c;越来越多的转行和大学生进入测试行业。想要获得更好的待遇和机会&#xff0c;不断提升自己的技能栈成了测试老人迫在眉睫的问题。 不论是面试哪个级别的测试工程师&#xff0c;面试官都会问一句“会编程吗&#xff1f;有没有自动化测试…
阅读更多...
dfs和bfs能解决的问题

dfs和bfs能解决的问题

一.理解暴力穷举之dfs和bfs暴力穷举暴力穷举是在解决问题中最常用的手段&#xff0c;而dfs和bfs算法则是这个手段的两个非常重要的工具。其实&#xff0c;最简单的穷举法是直接遍历&#xff0c;如数列求和&#xff0c;遍历一个数组即可求得所问答案&#xff0c;这与我在前两篇博…
阅读更多...
【lwIP（第二章）】以太网DMA

【lwIP（第二章）】以太网DMA

目录一、以太网DMA描述符简介二、以太网DMA描述符结构三、如何追踪描述符总结一、以太网DMA描述符简介 发送&#xff1a;不需要CPU的参与下&#xff0c;把描述符指向的缓冲区数据传输到Tx FIFO当中 接收&#xff1a;不需要CPU的参与下&#xff0c;将Rx FIFO中的数据传输到描述符…
阅读更多...
3 天交付新需求？极狐GitLab APP 「极限编程 XP」实践

3 天交付新需求？极狐GitLab APP 「极限编程 XP」实践

近日&#xff0c;中移物联网有限公司、北京青云科技股份有限公司联合举办的 “2023 云原生重庆站技术分享会” 如期召开。会上&#xff0c;极狐(GitLab) 高级解决方案架构师刘剑桥带来《云原生极限编程 101》主题分享。本文整理自演讲内容&#xff0c;你可以阅读到&#xff1a;…
阅读更多...
java调用chatgpt接口，实现专属于自己的人工智能助手

java调用chatgpt接口，实现专属于自己的人工智能助手

文章目录前言导包基本说明请求参数响应参数创建请求和响应的VO类代码编写使用最后说明前言 今天突然突发奇想&#xff0c;就想要用java来调用chatget的接口&#xff0c;实现自己的聊天机器人&#xff0c;但是网上找文章&#xff0c;属实是少的可怜(可能是不让发吧)。找到了一些…
阅读更多...
【数据结构与算法】什么是双向链表？并用代码手动实现一个双向链表

【数据结构与算法】什么是双向链表？并用代码手动实现一个双向链表

文章目录一、什么是双向链表二、双向链表的简单实现一、什么是双向链表 我们来看一下这个例子&#xff1a; 在一个教室里&#xff0c;所有的课桌排成一列&#xff0c;如图 相信在你们的读书生涯中&#xff0c;老师肯定有要求你们记住自己的前后桌是谁。所以该例子中&#x…
阅读更多...
J 砍竹子

J 砍竹子

砍竹子 【问题描述】 这天&#xff0c;小明在砍竹子&#xff0c;他面前有 n 棵竹子排成一排&#xff0c;一开始第 i 棵竹子的高度为 hi . 他觉得一棵一棵砍太慢了&#xff0c;决定使用魔法来砍竹子。魔法可以对连续的一段相同高度的竹子使用&#xff0c;假设这一段竹子的高度…
阅读更多...
菜鸟刷题Day5

菜鸟刷题Day5

⭐作者&#xff1a;别动我的饭 ⭐专栏&#xff1a;菜鸟刷题 ⭐标语&#xff1a;悟已往之不谏&#xff0c;知来者之可追 一.一维数组的动态和&#xff1a;1480. 一维数组的动态和 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个数组 nums 。数组「动态和」的计算公式…
阅读更多...
为了之后找工作不被虐，每天刷3道《剑指offer》Day-1

为了之后找工作不被虐，每天刷3道《剑指offer》Day-1

本文已收录于专栏&#x1f33b;《刷题笔记》文章目录前言&#x1f496; 1、二维数组中的查找题目描述思路&#x1f496; 2、替换空格题目描述思路&#x1f496; 3、从尾到头打印链表题目描述思路一&#xff08;反转函数&#xff09;思路二&#xff08;递归&#xff09;思路二&a…
阅读更多...
Celery使用：优秀的python异步任务框架

Celery使用：优秀的python异步任务框架

目录Celery 简介介绍安装基本使用Flask使用Celery异步任务定时任务Celery使用Flask上下文进阶使用参考停止Worker后台运行Celery 简介 介绍 Celery 是一个简单、灵活且可靠的&#xff0c;处理大量消息的分布式系统&#xff0c;并且提供维护这样一个系统的必需工具。 它是一个…
阅读更多...
文心一言 vs GPT-4 —— 全面横向比较

文心一言 vs GPT-4 —— 全面横向比较

文心一言 vs GPT-4 —— 全面横向比较 3月15日凌晨&#xff0c;OpenAI发布“迄今为止功能最强大的模型”——GPT-4。我第一时间为大家奉上了体验报告《OpenAI 发布GPT-4——全网抢先体验》。 时隔一日&#xff0c;3月16日下午百度发布大语言模型——文心一言。发布会上&#…
阅读更多...
4万字企业数字化转型大数据湖项目建设和运营综合解决方案WORD

4万字企业数字化转型大数据湖项目建设和运营综合解决方案WORD

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。部分资料内容&#xff1a; 3.1.4沙盒管理 利用Docker, 基于kubernetes主打的容器技术与微服务应用基础平台&#xff0c;HDFS和YARN均可依此建模&#xff0c;为上层应用提供微服…
阅读更多...
最新文章

Copyright @ 2022~2023