【mpvue】二

关于项目中使用mpve发现的一些问题，踩坑吧，陆续会更新。

一、我的感受非常很重要的一点。特别是在vue项目移植过来的mpvue项目，

组件不支持slot。

<component>
   <div v-for="(v,k)" :key="k">
      我里面不支持
   </div>
</component>

官方说的是不支持slot，可是实测里面，是组件内用了v-for，就渲染不出来。

二、关于生命周期的问题，按照vue的生命周期，通常加载会挂在mounted函数中。然而小程序中由于缓存的关系，Mounted返回，再进来，就再也不执行。解决方案是使用小程序的onShow()钩子替代。确保每次进页面都会渲染相应的数据。

可是--------重点来了，页面中使用了组件，父组件中使用onShow保证每次进页面都会刷新数据，而子组件中若是也使用onShow，则会出现第一次进页面子组件不执行onShow的状况，返回再进页面才执行。目前不知道缘由，因而子组件使用了onReady，确保每次都执行。

另外子组件的更新数据，使用watch监听变化来作。

三、这个问题是关于mpvue中缓存的机制，不知道是否是小程序的缓存机制，每次进页面加载数据以前，会闪一下上一次加载的数据，而后再更新成新数据，用户体验不是太好。

四、关于图片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')
}

这样就能够直接加入了一个背景图片，还挺方便。

暂时就这么多，陆续更新后续