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

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