欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-24 18:11:17
最近在用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);conso...

最近在用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的结果是中国标准时间uni-app开发微信小程序问题汇总

在安卓系统中console.log的结果是世界标准时间
uni-app开发微信小程序问题汇总
在ios系统中console.log的结果也是世界标准时间,但是 “2021.01.01”new Date()的结果是null
uni-app开发微信小程序问题汇总
所以在使用new Date()处理时间字符串时,需要将“.”转换成“-”或“/”。

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()中使用。

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====')
	},

uni-app开发微信小程序问题汇总
如果小程序进程没有关闭,再次通过分享链接打开小程序,这时候是不会进入 onLaunch 的,也就无法在这里获取分享参数了

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

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

uni-app开发微信小程序问题汇总
当小程序已经在后台运行,点击分享链接进入小程序,可在进入的第一个页面的 onLoad 中获取到携带参数,但如果后台没有运行该小程序,在页面的 onLoad 中是获取不到的
uni-app开发微信小程序问题汇总
3、在 App onShow中
在App.vue 中的 onShow 中也能获取到分享携带的参数

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

uni-app开发微信小程序问题汇总
无论是以何种方式进入小程序,都会进入 App.vue 中的 onShow,所以在这里是一定可以获取到分享携带的参数的

本文地址:https://blog.csdn.net/lingfengjgf/article/details/112600476

相关标签: 学习笔记