uniapp | 开发中遇到的兼容性问题

1、日期格式问题
使用uniapp开发过程中，有这么一段代码，将两个时间字符串通过JS的date构造函数，构造出两个日期并比较大小，在Android平台没有问题，在ios上就出现了日期比较失败，无法执行正常的校验。

ios中不支持-作为日期之间的分隔符，需要使用/。使用replaceAll替换掉日期字符串中的-就好了。

参考文献
进阶之路-前端：ios对new Date() 的兼容问题

2、输入框click事件
禁用状态下载input组件，在android平台可以正常监听click事件，在ios上click监听异常

3、 给placeholder绑定动态变量

<u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>

4、form表单中关于一条form-item中多个必填项的prop设置

具体解决方法是在中再包裹一层

<u-form-item label="证件类型" prop="selectDocumentType">
	<view>
		 <u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>
	</view>
	<view class="typeContainer">
		<u-form-item prop="typeNumber">
			<u-input v-model="form.typeNumber" class="choiceInput" />
		</u-form-item>
	</view>
</u-form-item>

5、uview的select组件，数据是对的却一直报Cannot read property ‘children‘ of undefined

是因为children:[]为空，我们可以改成

"children": [
	{

	  "value": null,
	  "label": ""
	}
]

6、自定义导航栏

在pages.json文件内，将你想要自定义导航栏的内容修改成如下：“navigationStyle”:“custom”

{
    "path": "pages/buyProduct/add",
    "style": {
		"navigationStyle":"custom"
    }
}

7、在App.vue页面获取高度

onLaunch: function() {
			console.log('App Launch')
			uni.getSystemInfo({
							success: function(e) {
								// #ifndef MP
								Vue.prototype.StatusBar = e.statusBarHeight;
								if (e.platform == 'android') {
									Vue.prototype.CustomBar = e.statusBarHeight + 50;
								} else {
									Vue.prototype.CustomBar = e.statusBarHeight + 45;
								};
								// #endif
					
								// #ifdef MP-WEIXIN
								Vue.prototype.StatusBar = e.statusBarHeight;
								let custom = wx.getMenuButtonBoundingClientRect();
								console.log(e.statusBarHeight)
								console.log(custom)
								Vue.prototype.Custom = custom;
								Vue.prototype.CustomBar = (custom.top - e.statusBarHeight)*2 + custom.height;
								// #endif		
					
								// #ifdef MP-ALIPAY
								Vue.prototype.StatusBar = e.statusBarHeight;
								Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
								// #endif
							}
						})

			initApp();
		}

8、uniapp官网示例引入css的方法是错误的

按下面这种写法即可解决

@import '@/common/common.scss';

9、小程序onLaunch和onload先后顺序

10、uniapp 滑太快到底部@scrolltolower没触发，再滑动一下触发2次

11、写position: fixed，在ios下会有兼容性问题

12、uniapp（Vue）修改对象或数据，页面没有相应更改
原因：
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性

13、关于修改对象

可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property

Vue.set(vm.someObject, 'b' ,2)

//或者
his.$set(this.someObject, 'b', 2)

14、关于修改数组

可以使用 splice：
vm.items.splice(newLength)

15、微信小程序 CSS border-radius元素 overflow:hidden失效问题 （iPhone ios 苹果兼容）

解决方法：
父元素设置以下两个属性：

backface-visibility: hidden; transform: translate3d(0, 0, 0);

16、小程序页面内含scroll-view时，在scroll-view组件外滑一下页面，会出现1-2秒卡死状态

方法一、页面设置position：fixed，固定
方法二、设置整体不能上下滚动
"disableScroll":true, //微信小程序
"mp-alipay": {
 "allowsBounceVertical":"NO" //支付宝小程序
}

17、跳转tabBar请用 switchTab(OBJECT)，跳转到 tabBar 页面

• navigateTo:fail can not navigateTo a tabbar page

//正常
uni.switchTab({
	url:'/pages/home/home'
})


//报错
// uni.navigateTo({
	// 	url: '/pages/home/home'
// })

18、多层跳转页面路由问题

//一开始是这样写的
uni.navigateTo({
url: '/pages'
})
//改成这样写就OK
uni.redirectTo({
url: '/pages'
})

19.文本在view内自动换行

 word-wrap: break-word;

 word-break: break-all;

  white-space: pre-line;

20. ReferenceError: require is not defined 或者是 切换tabbar报错__call_hook导致页面白屏的时候

解决方式：把之前的代码删掉重新贴一遍就好了，不知道是uniapp还是HB编辑器的问题，就特么很神奇的好了。