uni-app开发微信小程序问题汇总

前言

最近在使用uniapp开发微信小程序，这里将开发过程中遇到的坑和问题记录一下。

1.滚动穿透问题

• 在页面中使用uni-popup组件时会出现滚动穿透问题，可以使用page-meta组件控制页面是否滚动。

<template>
	<page-meta :page-style="`overflow:${pageScrollFlag?'visible':'hidden'}`"></page-meta>
	<view class="container">
		<uni-popup ref="popup" background-color="#fff">
		<!-- ... -->
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageScrollFlag:true
			}
		},
		methods: {
			open(){
				this.$refs.popup.open();
				this.pageScrollFlag=false;
			},
			close(){
				this.$refs.popup.close();
				this.pageScrollFlag=true;
			},
		}
	}
</script>

2.自定义导航栏适配刘海屏

• 在某些场景下，我们可能需要用到自定义导航栏，其实uniapp官方提供的插件uni-nav-bar已经满足了绝大部分的需求表了，，各种适配也做的很好。像有些首页可能不需要导航栏顶部是沉浸式设计的话，也可也使用uni-nav-bar做一下适配，只需要将backgroundColor设为transpant、statusBar设为true、border设为false，其他的内容正常往下写就可以了
• 如果uni-nav-bar满足不了，只能使用自定义的导航栏，那么可以通过uni.getSystemInfo获取状态栏的高度（statusBarHeight），通过状态懒得高度调整导航栏和页面内容的位置即可

3.打开已发布小程序调试窗口

• 开发版的小程序点击右上角的胶囊按钮是可以打开调试窗口的，但是已上线的小程序没有这个入口这时只需要先打开 开发版的调试窗口，关闭开发版再打开线上的小程序，就会发现vConsole按钮依然悬浮在小程序右下角，点开就可以看到线上的日志。

4.关于new Date()

当使用new Date()转化 时间字符串时，在微信开发工具、安卓和iOS真机上的表现略有不同

	let date2=new Date('2021-01-01');
	let date3=new Date('2021.01.01');
	console.log('date1:',date1);
	console.log('date2:',date2);
	console.log('date3:',date3);
	console.log('getDate1:',date1.getDate())
	console.log('getDate2:',date2.getDate())
	console.log('getDate3:',date3.getDate())

• 在开发工具中console.log的结果是中国标准时间
• 在安卓系统中console.log的结果是世界标准时间
• 在ios系统中console.log的结果也是世界标准时间，但是 “2021.01.01”new Date()的结果是null
• 所以在使用new Date()处理时间字符串时，需要将“.”转换成“-”或“/”。
• 还有，当使用"/“连接日期时，new Date()的结果是当地的0点，而使用”-"连接日期时，new Date()的结果却是当地的8点。
• 另外，在使用Date.parse()时，如果日期以“-”连接，在ios中返回的是NaN。

5.iOS系统底部适配

• 全面屏iOS手机底部会有一条小黑线，如果有固定底部的布局，就需要做一下适配，否则小黑线会悬浮在固定区上面，可能会影响操作。
• 在固定定位的样式中加上如下代码即可

padding-bottom: calc( 20rpx + constant(safe-area-inset-bottom)/2);
padding-bottom: calc( 20rpx + env(safe-area-inset-bottom)/2);

6.小程序分享配置

• 微信小程序的分享不支持API调用，只能用户主动点击触发分享。可通过右上角的胶囊和 button 按钮分享给微信好友。开启右上角胶囊分享功能需在页面中加入 onShareAppMessage 生命周期函数，在onShareAppMessage 中还可监听到是哪种方式触发的分享

onShareAppMessage(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log("按钮分享")
		} else if (res.from === 'menu') {// 来自页面右上角胶囊
			console.log("胶囊分享")
		}
	}

• 小程序分享支持自定义分享标题、转发图片、跳转的路径以及携带的参数

	onShareAppMessage(res) {
		return {
			title: "小程序自定义分享",
			imageUrl: "/static/avatar-1.jpeg",
			path: "/pages/index/index?id=1&name=share"				
		}
	}

分享携带的参数可通过以下方式获取

1. 在 App onLaunch 中当用户之前未打开过该小程序，或者手动杀死小程序进程，点击分享链接进入小程序后，可在App.vue 中的 onLaunch 中获取到分享携带的参数

onLaunch: function(option) { console.log('====App Launch====') console.log(option)},

如果小程序进程没有关闭，再次通过分享链接打开小程序，这时候是不会进入 onLaunch 的，也就无法在这里获取分享参数了

2. 在分享链接进入的第一个页面的 onLoad 中

onLoad(option) { console.log('====index onLoad====') console.log(option) console.log('====index onLoad====') },

当小程序已经在后台运行，点击分享链接进入小程序，可在进入的第一个页面的 onLoad 中获取到携带参数，但如果后台没有运行该小程序，在页面的 onLoad 中是获取不到的

3. 在 App onShow中在App.vue 中的 onShow 中也能获取到分享携带的参数

onShow: function(option) { console.log('====App onShow====') console.log(option) console.log('====App onShow====') },

无论是以何种方式进入小程序，都会进入 App.vue 中的 onShow，所以在这里是一定可以获取到分享携带的参数的

7.# 扫小程序码带参进入小程序

小程序码是通过微信提供的接口生成的，请参考 官方文档

注意事项

1. 只能生成已发布的小程序码，测试的话比较麻烦，只能通过微信开发工具自定义编译模式来模拟扫码进入。
2. 小程序码携带参数配置

• 微信提供了两种生成方式，一种不限参数长度，但是限制生成数量，一种限制参数长度，但不限生成数量，可自行选择。 这里我们使用的是接口B，由于携带参数不能超过32位，且只能放在scene中，如果有多个参数，只能将所有参数拼接成字符串，前端获取参数后通过对应规则处理。

3. 扫码进入时获取携带参数

• 扫码进入同点击分享链接进入一样，都可在对应的生命周期中获取。