程序员经验分享-hwhale

uni-app转小程序遇到的问题 （组件使用插槽的问题）（跨端兼容、条件编译）（小程序自定义胶囊按钮封装）(uni-app挂载原型链)

2023-11-17

1.uni-app转小程序组件使用插槽的问题

uni-app封装的组件使用问题

1.插槽样式:H5页面编译是有效果的，在小程序中编译的位置错误，它会跳出本来的插槽位置到最后.
!!!解决方法: 使用父传子传递值，就可以继承组件的样式
封装的组件
在这里插入图片描述
在这里插入图片描述
使用组件
在这里插入图片描述
2.传递参数:H5页面能传递对象,在小程序中传递会报错（item（传递的参数） is not defined）
!!!解决方法: 判定当item有在执行。

3.使用函数: 首先H5中一切正常，
小程序中{{item.name}}和 {{item.visitDate}}正常显示，组件中使用函数放方法传递参数报错
，找不到传递的参数，不管在当前页面重新定义函数使用方法，也都会报错.在这里插入图片描述
!!!解决方法: 封装一个组件–传递需要的参数比如：item.visitDate–在使用公共的方法，所以的都能实现

封装的组件

<template>
	<view>{{date ? getCurrentDate(date) : ''}}</view>
</template>
<script>
	import {getCurrentDate} from '@/common/moment.js'
	export default {
		data () {	return {}},
		props: {date: {type: [Number, String],default: ''}},
		mounted() {},
		methods: {getCurrentDate: getCurrentDate}}
</script>

使用组件
在这里插入图片描述

2.H5和小程序跨端兼容

uni-app官方文档内有写到条件编译点击进入

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

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
在这里插入图片描述
在这里插入图片描述
注意：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.自定义胶囊按钮封装组件以及适配

封装胶囊组件代码（适配苹果刘海屏以及页面距离顶部位置）
首先你得知道uni-app有获取胶囊的API ，uni.getMenuButtonBoundingClientRect()
只作为参考性…

<template>
	<!-- #ifdef MP-WEIXIN -->
	<view :class="['flex row header_box ', config.noBgc ? '' : 'header_box_bg']" :style="{paddingTop:`${BarClass.top}px`, height:`${BarClass.top}px`}">
		<view class="header_left" :style="{width:`${BarClass.width}px`}">
			<view class="flex row left_btn_box center" :style="{height:`${BarClass.height}px`, borderRadius:`${BarClass.height}px`}">
				<view class="left_btn flex center" @tap="goBack">
					<view class="font icon">&#xe611;</view>
				</view>
				<view v-if="config.right_text || config.right_icon" class="left_border"></view>
				<view v-if="config.right_text || config.right_icon" class="left_btn flex center" @tap="urlBtn">
					<text v-if="config.right_text" class="font icon gradient_text">{{config.right_text}}</text>
					<text v-else :class="['font icon gradient_text ', config.right_icon || '']"></text>
				</view>
			</view>
		</view>
		<view class="header_center full center over_ellipsis font14">{{config.title}}</view>
		<view class="header_right"></view>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view :class="['flex row header_box center ', config.noBgc ? '' : 'header_box_bg']">
		<view class="header_left flex row">
			<view class="btn_box flex center" @tap="goBack">
				<view class="font icon" :style="config.iconStyle">&#xe611;</view>
			</view>
		</view>
		<view class="header_center full center over_ellipsis font16">{{config.title}}</view>
		<view class="header_right flex row">
			<view v-if="config.right_text || config.right_icon" class="btn_box flex row center" @tap="$emit('goBtn')">
				<text v-if="config.right_text" class="font icon font14 gradient_text">{{config.right_text}}</text>
				<text v-else :class="['font icon font14 gradient_text ', config.right_icon || '']" :style="config.iconStyle"></text>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				handelBarHeight: this.handelBarHeight,
				BarClass: {}
			}
		},
		props: {
			config: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		onReady() {
		//使用的uni-app获取胶囊的宽高大小 距离顶部的top等样式
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.BarClass = menuButtonInfo
			//获取自定义头部的高
		    handelBarHeight = () => {
	        // #ifdef MP
	         return (menuButtonInfo && menuButtonInfo.height ? menuButtonInfo.height : 0) + 8
	        // #endif
	        // #ifndef MP
           	return menuButtonInfo && menuButtonInfo.navigationBarHeight ?menuButtonInfo.navigationBarHeight : 44
	        // #endif
}
		},
		mounted() {
			
		},
		methods: {
			goBack() {
				console.log(11)
				uni.navigateBack({
					delta: 1,
				})
			},
			urlBtn() {this.$emit("goBtn")
			}

		}
	}
</script>

<style scoped lang="scss">
	.header_box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999999;
		/* #ifndef MP */
		height: 88rpx;
		padding-top: var(--status-bar-height);
		/* #endif */

		.header_left,
		.header_right {
			width: 176rpx;
		}

		.header_left {
			/* #ifdef MP-WEIXIN */
			margin-left: 20rpx;
			/* #endif */

			.left_btn_box {
				height: 60rpx;
				border: 2rpx solid #eeeeee;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 0.86);

				.left_btn {
					width: 50%;
					height: 100%;
					text-align: center;

					.icon {
						font-size: 28rpx;
						font-weight: bold;
					}
				}

				.left_border {
					width: 4rpx;
					height: 36rpx;
					background: #eeeeee;
				}
			}

			.btn_box {
				padding: 0 20rpx;
				height: 58rpx;
			}
		}

		.header_center {
			margin: 0 10rpx;
			text-align: center;
			/* #ifdef MP-WEIXIN */
			line-height: 60rpx;
			/* #endif */

			/* #ifndef MP-WEIXIN */
			font-weight: 700;
			/* #endif */
		}

		.header_right {
			/* #ifdef MP-WEIXIN */
			margin-right: 20rpx;
			/* #endif */
			
			justify-content: flex-end;

			.btn_box {
				padding: 0 20rpx;
				height: 58rpx;
			}
		}
	}
	.header_box_bg {
		border-bottom: 2rpx solid #e5e5e5;
		background: #ffffff;
	}
</style>

使用顶部组件，在这里插入图片描述

注意你使用的自定义的头部就要在（pages.json设置:custom）
在这里插入图片描述

4.定义公共方法并挂载原型链上

1.创建一个utils.js写入方法

export const handelBarHeight = () => {
	let menuButtonInfo = {}
	// #ifdef MP-WEIXIN
	menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	// #endif
	// #ifndef MP
	menuButtonInfo = uni.getSystemInfoSync()
	// #endif
	return menuButtonInfo
}

2.全局都要用的东西 在mian.js里面引入

// main.js
import Vue from 'vue'
import App from './App'
import {handelBarHeight} from './util/util.js'   //引入

Vue.prototype.$handelBarHeight = handelBarHeight  //通过Vue.prototype挂载至全局

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3.如何使用

//要使用的页面
//data使用
data(){
return {
height:this.$handelBarHeight
}
},
//methods使用
methods: {
 函数名(){
let a=this.$handelBarHeight
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

js

Uniapp

小程序

uni-app转小程序遇到的问题 （组件使用插槽的问题）（跨端兼容、条件编译）（小程序自定义胶囊按钮封装）(uni-app挂载原型链) 的相关文章

随机推荐

  • 线段树Segment tree（1）：单点修改，区间查询

    问题描述 给定数列a 1 a 2 a N 依次进行Q次操作 操作有两类 1 i x 给定i x 将a i 加上x 2 l r 给定i x 求 i l r

  • 两年外包生涯做完，感觉自己废了一半....

    先说一下自己的情况 大专生 17年通过校招进入湖南某软件公司 干了接近2年的点点点 今年年上旬 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了五年的功能测试 已经让我变得不思进取 谈了1年的女朋友

  • 国内外自然语言处理(NLP)研究组

    博客地址 http blog csdn net wangxinginnlp article details 44890553 排名不分先后 收集不全 欢迎留言完善 中国大陆地区 腾讯人工智能实验室 Tencent AI Lab https

  • linux自增窗口状态——KwindowSystem篇

    前言 之前曾翻译过 X Desktop Group 今天分享一下如何自定义状态 此篇讲述如何通过kwindowsystem新增状态 以及设置状态的过程 窗口有不同的属性 状态 允许Action等等信息 以使窗口管理器来确定窗口的装饰 堆叠位

  • STM32之NVIC

    STM32 Cortex M3 中NVIC 嵌套向量中断控制 的理解 一 STM32 Cortex M3 中的优先级概念 STM32 Cortex M3 中有两个优先级的概念 抢占式优先级和响应优先级 也把响应优先级称作 亚优先级 或 副优

  • jinfo如何使用

    jinfo是一个用于查看和调整Java虚拟机 JVM 配置参数的命令行工具 它可以在运行时获取和修改JVM的配置信息 包括内存分配 垃圾回收 运行时编译和其他设置 要使用jinfo 需要在命令行中输入以下命令 jinfo options

  • C# 学生成绩管理系统

    学生成绩管理系统 前言 一 我是一个菜鸟 二 已经有快一年没有发文章 一直在忙着毕业和找工作的事 如今生活逐渐趋于稳定 那么 勤劳的博主又开始更新了 哈哈 本次更新的是非常经典的学生成绩管理系统 这作为一个计算机专业的你来说 可能在大一 大

  • 让chatgpt从一个查询接口写接口测试用例

    要求 一个查询接口 入参有currPage order pageSize sortBy 所有入参为非必须 请帮我写出这个接口所有接口用例 根据你提供的信息 下面是该查询接口所有可能的接口用例 当所有参数都不传递时 查询接口会返回所有符合条件

  • UE44如何使用Geometry（BSP）笔刷，快速创建游戏原型？

    游戏原型搭建 如何快速搭建场景 一 好处1 防止同时也放大了对应的网格 如果像unity里面一样 R放大缩小以后 网格也会对应拉伸 失真 导致了材质会被拉伸或者缩小 1 选择Geometry 在BrushSetting里面 将X Y Z对应

  • ubuntu 20.04 安装 pycharm 2022.1 .3 及其卸载

    下载 官网下载 https www jetbrains com pycharm 安装 下载好的文件显示如下 打开终端 进入你刚下载的文件所在的文件夹目录 例如我的放在Downloads这个文件夹 cd Downloads 查看文件夹里的文件

  • ROS navigation分析：navigation框架

    前言 ROS navigation stack是ROS提供的一个非常重要且常用的模块 它的主要作用是实现机器人的定位 导航和避障功能 在ROS wiki上 Maintainer把它的功能归纳为 It takes in information

  • 从零实现DevOps(五)：Jenkins+SSH远程部署SpringBoot项目

    上篇文章 我从安装Jenkins插件开始 给大家讲解了如何从Jenkis本地环境中 以启动jar包脚本的方式部署SpringBoot项目 但是呢 以咱们日常的开发来说 所有服务都部署在一台服务器上根本就不是一个合理的方案 更不可能在所有服务

  • 基于FPGA的一维卷积神经网络CNN的实现（五）数据量化（附代码）

    数据量化 环境 Pytorch Pycham Matlab 订阅后有问题 或者需要该节的文件直接加微信 Crazzy M 说明 上一节已经通过Matlab中基础的乘加运算进行了CNN网络的前向计算过程 该节利用Matlab将导出的CNN网络

  • Object365数据/论文说明

    总览 1 目标检测数据 365类 约600k训练图片 超过一千万的bboxes 迄今为止最大的目标检测数据集 全注释的 2 服务于更好的未来研究 局部敏感类型的任务 如目标检测 语义分割 3 在COCO测试下 Objects365上预训练的

  • IDEA插件系列（33）：RestfulTool插件——Restful服务开发辅助工具集

    1 插件介绍 RestfulTool插件 一套 Restful 服务开发辅助工具集 提供了一个 Services tree 的显示窗口 双击 URL 直接跳转到对应的方法定义 一个简单的 http 请求工具 支持 Spring 体系 Spr

  • npm install安装依赖总结

    node下载地址 https nodejs org en download releases 可以看到node版本 npm版本 node module版本 1 npm的全局安装路径 查看默认值 npm get prefix 默认是C Use

  • 五、网络编程之网络 IO 模型的本质.md

    IO 网络模型的本质 前置概念 1 用户空间和内核空间 学习 Linux 或者 IO 网络模型时 经常可以看到两个词 User space 用户空间 和 Kernel space 内核空间 简单说 Kernel space 是 Linux

  • 实例创建流程_ABAQUS复合材料建模及基本分析流程

    案例1 创建开孔矩形复合材料常规壳层合板 层合板一端固定 另一端施加拉伸载荷 对模型进行分析 查看每层单方向的应力 对比云图和加载时的铺层额方向 理解铺层方向与lamina材料的概念 0 1建立几何模型 利用Abaqus中composite

  • javaSE基础 数据库操作3之数据库恢复

    java基础 数据库操作3之数据库恢复 流程 上一篇写了数据的备份 本篇将写数据库的恢复操作 思想 备份文件中写入的是将数据库表转换为sql后的语句 所以备份就只需将备份文件中的sql语句执行即可 数据库恢复 public static v

  • uni-app转小程序遇到的问题 （组件使用插槽的问题）（跨端兼容、条件编译）（小程序自定义胶囊按钮封装）(uni-app挂载原型链)

    1 uni app转小程序组件使用插槽的问题 uni app封装的组件使用问题 1 插槽样式 H5页面编译是有效果的 在小程序中编译的位置错误 它会跳出本来的插槽位置到最后 解决方法 使用父传子传递值 就可以继承组件的样式 封装的组件 使用

热门标签