vue项目迁移到mpvue踩坑记录

1.滚动到底部实现方法
1)scrolltop = scrollheight
2) scrollintoview() 兼容性不友好,但是可以设置动态的
3)锚点点击(一键到顶部/底部)

2.css动画中直接写@keyframes,在小程序中回自动加上兼容的前缀,这里-o-和-moz-会在小程序里报错,可以直接写成@-webkit-keyframes

3.项目初始化的tabbar配置项里的['items']是百度或头条里的配置项,与微信小程序无瓜,写了会报警告‘无效的 appJSON["tabBar"]["items"]’

4.警告:根据 sitemap 的规则[0],当前页面 [pages/index/main] 将被索引
新版本加入的消息提醒,关闭的话可以在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

5.缓存 localStorage.setItem 报错 'setItem of undefined' , 改成 wx.setStorageSync

6.slot插槽的数据渲染不出来,官方解释:
1)mpvue 的版本问题,1.0.13 之后才支持具名 slot;
2) slot 里面不能有变量,有变量渲染不出来,官方推荐 用 props 传值;
3) 不支持一个组件多个插槽;
建议不要嵌套使用插槽

7.vue里边富文本v-html渲染到小程序里时,v-html的标签会转换成小程序的<rich-text />标签,自动编译成富文本,但是其中有一个问题,就是图片宽度会超出显示,深度选择器也无法改变rich-text 里面的样式,一般方法是把富文本进行编辑,来控制图片的宽度不超过页面宽度,期待更完善的方法

contentHtml = contentHtml.replace(/\<img/gi,'<img style="max-width:100%;height:auto;margin:10px 0;" ');

8.使用axios发送post请求时,后台接收不到参数,这里除了要用qs格式化发送参数以外还要在wx.request加一个请求头

header: {
        "Content-Type": "application/x-www-form-urlencoded"
      }

9.关于scroll-view在2.10.1版本新出的自定义下拉方法,在原生小程序里一切正常,但是mpvue转换到小程序的时候有bug,一直处于刷新的状态不触发结束的方法,没有找到消除的方法,不建议用,下拉刷新上拉加载以及左右切换大概会整理之后发一篇新文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,705评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,586评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 838评论 0 2
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,603评论 0 1