美文网首页
vue项目迁移到mpvue踩坑记录

vue项目迁移到mpvue踩坑记录

作者: 汀上 | 来源:发表于2020-02-06 14:43 被阅读0次

    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,一直处于刷新的状态不触发结束的方法,没有找到消除的方法,不建议用,下拉刷新上拉加载以及左右切换大概会整理之后发一篇新文

    相关文章

      网友评论

          本文标题:vue项目迁移到mpvue踩坑记录

          本文链接:https://www.haomeiwen.com/subject/mdqaactx.html