uni-app 环游记

- 搜索栏样式h5 和小程序不一样，h5 偏高

- scroll-view 不能左右排布
scroll-view 宽度固定就好

- request post请求跨域
在post 请求时必须要添加请求头header 不然会报错, get 则不会（编辑器自带的浏览器调试可以避免这些问题）

header: {
	'content-type': 'application/x-www-form-urlencoded', 
}

- navTo 要注意
在地址跳转时，要设置/pages 不能单单pages 不然就会出现地址找不到的情况

navTo('/pages/user/user-coupon')

- 小程序组件之间不支持强转 +，而h5 则可以
例如

<view v-if="+status > 1"></view>

- App.vue 中声明全局变量 globalData , 在App.vue 中无法修改，其他页面正常

success: res => {
// this.globalData 未定义， 可以设置this.$option.globalData 但是并没有修改原本的属性
	this.globalData.checkLogin = true;
	if (this.userInfoReadyCallback) {
		this.userInfoReadyCallback(res)
	}	
}

- image ，图片加载会闪动
这是因为使用了mode，小程序渲染机制的问题。解决方式，1是不用mode，宽高固定，2是在使用mode的同时，设置样式 height:auto

- 官方推荐日历插件，闰月切换月份有误
因为闰月有31号而平月没有，所以在使用了setMonth 方法后，31号跳转下个月时候会出现错误

这里我们稍微修改一下源码
找到getDate 函数中涉及月份的判断部分

//在切换按钮时多传一个参数 type : 'prev_next'
dataBefor(id, types) {
	const year = this.canlender.year + '-' + this.canlender.month + '-' + this.canlender.date
	this.getMonthAll(id, year,'prev_next')
},
...
getDate(date, AddDayCount = 0, str = 'day',type = '') { // 这里的type 就是上面的 prev_next
	if (typeof date !== 'object') {
		date = date.replace(/-/g, '/')
	}
	const dd = new Date(date)
	switch (str) {
		case 'day':
			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
			break
		case 'month':
			// 这里就是我们多加的一行判断
			// 是月份切换 && 是月底31号 && 不是7月份（因为7月和8月都有31号）
			// 跳转到下个月的1号
			if(type == 'prev_next' && dd.getDate() == '31' && dd.getMonth() != 6){
				dd.setMonth(dd.getMonth() + AddDayCount,1)
			}else{
				dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
			}
			break
		case 'year':
			dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
			break
	}
...

- 软键盘失去焦点时会留下白底
在使用uni-app 制作h5时，遇到一个情况，当我在input 输入文字，点击完成后，键盘收回，但是页面仍然会被顶起，这时候页面底部会留下一层白底。

其实这并不是uni-app 的问题，而是微信浏览器和ios 版本的原因。

这里提供2种方法

1. scrollTop
2. scrollIntoView

// 回到顶部
window.scroll(0,0)

// 滚动到可视区域
document.body.scrollIntoView()

思路其实一样，就是在input 失焦的时候，将页面进行滚动到指定位置。

我这里采用的是第二种

	<input placeholder="会员卡号" @blur="gobackTop()"v-model="card_num" />
	...
	onLoad() {
	//安卓手机
		var u = navigator.userAgent;
		if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { 
			//  拿到获取焦点的input
			let input = document.querySelector('input')
			const innerHeight = window.innerHeight;
			window.addEventListener('resize', () => {
				const newInnerHeight = window.innerHeight;
				if (innerHeight > newInnerHeight) {
					// 键盘弹出事件处理
				} else {
					// 键盘收起事件处理
					input.scrollIntoView(false);
				}
			});
		}
	},
	...
	//methods
	gobackTop() {
		if (
			document.documentElement.offsetHeight <=
			document.documentElement.clientHeight && ['input', 'textarea'].includes(event.target.localName)
		) {
			document.body.scrollIntoView() // 回顶部
		}
		
		// 相当于scrollTop（0，0）
		// uni.pageScrollTo({
		// 	scrollTop: 0
		// });
	},

实际上这么操作，聚焦的时候还是有点跳，没有那么圆润，但也无法，希望以后能用更好的解决方案。

- background-image动态赋值报错

:style="{ backgroundImage:'url('+img+')'}

这样图片可以展示出来，但是会报一个路径错误，是uni-app 渲染机制的问题。
同时需要注意的是，backgroundImage 只能存放线上图片地址，无法加载本地图片地址。
我们可以把样式做一个变量赋值。

<view class="cu-avatar round lg" :style="noteStyle"></view>
...
this.noteStyle = "background-image : url("+this.userNote.pic+")";

- swiper 高度动态赋值

<swiper :current="1" :style="{height: swiper.height + 'px'}">
...
onShow() {
	const query = uni.createSelectorQuery().in(this);
	let that = this;
	query.select('.swiper-item-result').boundingClientRect(data => {
		that.swiper = data;
	}).exec();
},

- textarea 穿透
正常textarea 显示没问题，但是将textarea 放入modal中，再次展开时，ios没问题，安卓端回出现穿透现象，textarea 无法正常隐藏。
这里需要给textarea 添加一个变量跟随modal 的展开与否，显示隐藏。

- canvas 绘制图片本地测试可以，线上空白
我在项目中遇到了这个问题，多次排查发现，在体验版的时候，打开调试工具的时候会有图，关闭调试工具的时候就是空白。
最后发现是白名单的问题，在小程序后台管理这里添加图片的白名单，就好了。

- canvas 合成图模糊锯齿严重
这里需要调整的是画布比例，例如我们最后想要 300 * 1000 的图片。这里的canvas 就要设置成 600*2000 ，同时下面的所有内容都要等比放大，例如字体大小，位置定居，线宽等等