关于项目中使用mpve发现的一些问题,踩坑吧,陆续会更新。
1、个人感觉很是很重要的一点。特别是在vue项目移植过来的mpvue项目,
组件不支持slot。
<component>
<div v-for="(v,k)" :key="k">
我里面不支持
</div>
</component>
官方说的是不支持slot,但是实测里面,是组件内用了v-for,就渲染不出来。
2、关于生命周期的问题,按照vue的生命周期,一般加载会挂在mounted函数中。然而小程序中因为缓存的关系,Mounted返回,再进来,就不再执行。解决方案是使用小程序的onShow()钩子替代。确保每次进页面都会渲染相应的数据。
但是--------重点来了,页面中使用了组件,父组件中使用onShow保证每次进页面都会刷新数据,而子组件中如果也使用onShow,则会出现第一次进页面子组件不执行onShow的情况,返回再进页面才执行。目前不知道原因,于是子组件使用了onReady,确保每次都执行。
另外子组件的更新数据,使用watch监听变化来做。
3、这个问题是关于mpvue中缓存的机制,不知道是不是小程序的缓存机制,每次进页面加载数据之前,会闪一下上一次加载的数据,然后再更新成新数据,用户体验不是太好。
4、关于图片url请求的问题。
(1)小程序只支持https的请求。无论是图片,还是图片预览。
关于wx.previewImage,刚开始做的时候,模拟器是没问题,但是上了真机发现是黑屏的情况。
差了一下数据格式什么的,都没问题,最后发现是http导致的。。后来叫后台兄弟帮忙拼接了一下。解决了。
(2)由于页面中会出现大量的静态图片,我们这里统一上传了服务器,拼接了一个前缀,类似于https://container.com/
这里我们采取的做法是引入一url,后面拼接好图片名称如: let url="https://container.com/", 使用的时候通过script引入url,
<img :src="url+'img.png'"></img>
(3)接下来是css中引入
这里我使用的是less,定义了函数来使用url
.baseUrl(@url){
background:url("http://container/@{url}") no-repeat;
}
另外这里提一下,关于引入less,本来想在main.js里全局引入,后来发现引入不进去,还不知道为啥。后来就是每个页面都单独引入一下这个公共的base.less文件。
使用方法如下:
body{
.baseUrl('bg.png')
}
这样就可以直接加入了一个背景图片,还挺方便。
暂时就这么多,陆续更新后续