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()处理时间字符串时,需要将“.”转换成“-”或“/”。
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====')
},
如果小程序进程没有关闭,再次通过分享链接打开小程序,这时候是不会进入 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,所以在这里是一定可以获取到分享携带的参数的
本文地址:https://blog.csdn.net/lingfengjgf/article/details/112600476