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

前言

最近在用uni-app开发微信小程序，这里将开发中遇到的坑和问题记录一下，后续发现新问题也会持续更新。

1、关于new Date()

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

	let date1=new Date('2021/01/01');
	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。

2、ios系统底部适配

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

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

env() 和 constant()是iOS11中 新增的特性，用于设定安全区域与边界的距离，除了bottom，还有left、right、top，适配底部只需用bottom即可，也可以在calc()中使用，例如，在某些场景下，我们可能不需要全量的值。

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

3、小程序分享配置

微信小程序的分享不支持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)
		console.log('====App Launch====')
	},

如果小程序进程没有关闭，再次通过分享链接打开小程序，这时候是不会进入 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，所以在这里是一定可以获取到分享携带的参数的

4、扫小程序码带参进入小程序

小程序码是通过微信提供的接口生成的，参考获取小程序码。

注意事项：

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

2、小程序码携带参数配置
微信提供了两种生成方式，一种不限参数长度，但是限制生成数量，一种限制参数长度，但不限生成数量，可自行选择。

这里我们使用的是接口B，由于携带参数不能超过32位，且只能放在scene中，如果有多个参数，只能将所有参数拼接成字符串，前端获取参数后通过对应规则处理。

3、扫码进入时获取携带参数
扫码进入同点击分享链接进入一样，都可在对应的生命周期中获取。

5、打开已发布小程序调试窗口

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

6、自定义导航栏适配刘海屏

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

7、滚动穿透问题

在页面中使用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>