uni-app知识点整理（6）- 条件编译跨端兼容、导航跳转、组件创建、组件间通信、uni-ui组件库

最新推荐文章于 2024-06-18 22:55:56 发布

JHY97

最新推荐文章于 2024-06-18 22:55:56 发布

阅读量876

点赞数

分类专栏： uni-app框架笔记文章标签：前端 uni-app 前端框架

本文链接：https://blog.csdn.net/JHY97/article/details/124549764

版权

uni-app框架笔记专栏收录该内容

6 篇文章 3 订阅

订阅专栏

5.5.1 案例练习 - 使用uni-calendar日历组件

一、条件注释实现跨端兼容

uni-app官方文档 - 编译器（条件编译）

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

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

1.1 案例练习

分别在页面中设置仅在H5页面中可看见的代码，以及仅在微信小程序中可看到的代码

<template>
	<view>
		<!-- #ifdef H5 -->
		<view>
			仅在H5页面中看见
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>
			仅在微信小程序页面中看见
		</view>
		<!-- #endif -->
	</view>
</template>

由图示可看到，实现了条件编译跨端兼容

二、uni中的导航跳转

uni-app官方文档 - navigator

2.1 利用navigator进行跳转

页面跳转

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册

属性说明
属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 `.vue` 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
nimation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram

跳转到普通页面

		<navigator url="/pages/detail/detail">
			<button>跳转至详情页</button>
		</navigator>

跳转到tabbar页面

		<navigator url="/pages/index/index" open-type="switchTab">
			<button>跳转至tab页面</button>
		</navigator>

2.2 利用编程式导航进行跳转

uni-app官方文档 - 页面跳转

利用navigateTo进行导航跳转

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

<button type="primary" @click="goDetail" >跳转到详情页面</button>

通过navigateTo方法进行跳转带普通页面

		methods: {
			goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}

利用 uni.switchTab 方法跳转到tab页面

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

<button type="primary" @click="goIndex">跳转到tab页面</button>

		methods: {
			goIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}

2.3 页面接收参数

利用navigateTo进行导航跳转并传参，目标页面接收参数并打印出来

		<navigator url="/pages/detail/detail?id=9527&&name=zhang3">
			<button>页面跳转并传参</button>
		</navigator>

		onLoad:function(option){ //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			console.log(option.name); //打印出上个页面传递的参数。
		}

三、uni-app中组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，在通过component进行注册即可，其创建和引入方法与Vue相似

可参考 Vue笔记：Vue知识点整理（二）- Vue组件化编程（2）- 单文件组件

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

uni-app官方文档 - 组件生命周期

Vue笔记：Vue知识点整理（一）- Vue核心（6）- 生命周期（重要）

uni-app 组件生命周期
函数名	说明	平台差异说明
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

四、组件间的通信方式

uni-app 组件间的通信方式与Vue相似

4.1 父组件给子组件传值

通过props来接收外界传递到组件内部的值

可以参考Vue笔记：Vue知识点整理（三）- Vue脚手架（2）中的 props配置

4.2 子组件给父组件传值

uni-app 中子组件给父组件传值

利用$on 和 $emit

可以参考Vue笔记：Vue知识点整理（三）- Vue脚手架（5）- 自定义事件

4.3 子组件之间传值

与Vue中的全局事件总线相似，省略了安装全局事件总线的步骤，用uni代替了在Vue全局事件总线中定义的$bus，即：

uni.$emit(eventName,OBJECT)

uni.$on(eventName,callback)

uni-app官方文档 - 页面通讯

Vue笔记：Vue知识点整理（三）- Vue脚手架（6）- 全局事件总线

五、uni-ui组件库的基本介绍和使用

5.1基本介绍

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

uni-app官方文档 - 扩展组件（uni-ui）

5.5 uni-ui的使用

插件下载

DCloud插件市场

也可以在 uni-app官方文档 - 扩展组件（uni-ui）内查找自己所需的插件，最终也会跳转到DCloud插件市场进行下载

5.5.1 案例练习 - 使用uni-calendar日历组件

（1）首先可在uni-app官方文档 - 扩展组件（uni-ui）内查找或 DCloud插件市场内直接搜索跳转到下载页面

注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX

下载完后，HBuilderX 3.1.0版本以上，会自动帮我们将插件注册到全局，并且生成uni_modules目录

（2）使用规范我们可以下拉插件下载页面查看即可，如果是在uni-app官方文档 - 扩展组件（uni-ui）内查找，对应的页面也会有使用规范

例如：直接在先前创建detail.vue页面中使用

<template>
	<view>
		<button @click="sendGet">发送Get请求</button>
		<button type="primary" @click="setStorage">存储数据</button>
		<button type="primary" @click="getStorage">获取数据</button>
		<button type="primary" @click="removeStorage">移除数据</button>
		<!-- 使用Calendar 日历组件 -->
		<uni-calendar 
		    :insert="true"
		    :lunar="true" 
		    :start-date="'2019-3-2'"
		    :end-date="'2019-5-20'"
		    @change="change"
		     />
	</view>
</template>

JHY97

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
uni-app知识点整理（6）- 条件编译跨端兼容、导航跳转、组件创建、组件间通信、uni-ui组件库

一、条件注释实现跨端兼容uni-app官方文档 - 编译器（条件编译）条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。#ifdef：if defined 仅在某平台存在 #ifndef：if not defined 除了某平台均存在 %PLATFORM%：平台名称条件编译写法说明 #ifdefAPP-PLUS 需.
复制链接

扫一扫