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.datethis.getMonthAll(id, year,'prev_next')
},
...
getDate(date, AddDayCount = 0, str = 'day',type = '') { // 这里的type 就是上面的 prev_nextif (typeof date !== 'object') {date = date.replace(/-/g, '/')}const dd = new Date(date)switch (str) {case 'day':dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期breakcase '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天后的日期}breakcase 'year':dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期break}
...

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

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

这里提供2种方法

scrollTop
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) { //  拿到获取焦点的inputlet input = document.querySelector('input')const innerHeight = window.innerHeight;window.addEventListener('resize', () => {const newInnerHeight = window.innerHeight;if (innerHeight > newInnerHeight) {// 键盘弹出事件处理} else {// 键盘收起事件处理input.scrollIntoView(false);}});}},...//methodsgobackTop() {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();
},