uni-app轉小程式遇到的問題（元件使用插槽的問題）（跨端相容、條件編譯）（小程式自定義膠囊按鈕封裝）(uni-app掛載原型鏈)

Uxiao7發表於2020-12-23

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
}
}

uni-app使用小程式自定義元件
2019-04-13
APP元件
uni-app 自定義loading 自定義toast 相容小程式&APP
2019-04-13
APPAST
uni-app 條件編譯
2022-06-16
APP編譯
小程式自定義音訊元件，帶滾動條，IOS迴圈失效問題
2018-08-09
音訊元件iOS
小程式自定義元件的使用
2019-04-13
元件
百度小程式遇到的問題
2019-02-16
小程式遇到的一些問題
2024-04-15
uni-app使用原生小程式掛載的方法：以支付寶營銷元件mkt為例
2021-12-30
APP元件
微信小程式之如何使用自定義元件封裝原生 image 元件
2019-02-27
微信小程式元件封裝
微信小程式自定義元件封裝及元件傳值
2018-08-28
微信小程式元件封裝
使用git add 遇到的小問題
2021-06-08
Git
uni-app小程式(抖音)text元件使用踩坑
2024-11-06
APP元件
微信小程式開發中遇到的幾個小問題
2020-07-11
微信小程式
小程式問題
2019-04-10
微信小程式中的iOS相容性問題
2018-10-30
微信小程式iOS
一個nvcc編譯的小問題
2024-09-20
編譯
微信小程式pick元件使用問題總結
2021-09-09
微信小程式元件
uni-app技術分享| uni-app轉小程式-實時訊息
2022-05-12
APP
如何使用小程式自定義元件功能
2018-12-15
元件
小程式按鈕
2019-04-10
Unity之掛載小問題
2020-09-24
Unity
微信小程式API互動的自定義封裝
2021-01-17
微信小程式API封裝
uni-app技術分享| uni-app轉小程式_實時音視訊
2022-04-07
APP
XXL_JOB 首次使用遇到的小問題
2020-12-08
小程式視訊旋轉的相關問題
2019-04-14
uni-app常見問題
2022-06-22
APP
初試微信小程式遇到問題總結
2019-08-08
微信小程式
uni-app小程式訊息推送
2019-09-20
APP
工作遇到的問題小記（一）
2024-10-16
小程式 require 引入空包的問題
2019-10-15
UI
vscode 自定義c++標頭檔案，編譯過程中遇到的問題
2021-08-01
VSCodeC++編譯
小程式自定義modal彈窗封裝實現
2018-06-14
封裝
使用CodeMirror外掛遇到的問題
2020-07-07
Vue使用中遇到的程式碼問題
2018-07-28
Vue
flume自定義攔截器遇到的問題
2020-10-07
今天記錄一個小程式使用客服的功能遇到的坑,版本庫問題
2021-12-15
uni-app技術分享| uni-app常見問題（一）
2022-02-24
APP
uni-app技術分享| uni-app常見問題（二）
2022-03-07
APP

uni-app轉小程式遇到的問題 （元件使用插槽的問題）（跨端相容、條件編譯）（小程式自定義膠囊按鈕封裝）(uni-app掛載原型鏈)

1.uni-app轉小程式元件使用插槽的問題

2.H5和小程式跨端相容

3.自定義膠囊按鈕封裝元件以及適配

4.定義公共方法並掛載原型鏈上

相關文章

uni-app轉小程式遇到的問題（元件使用插槽的問題）（跨端相容、條件編譯）（小程式自定義膠囊按鈕封裝）(uni-app掛載原型鏈)