mpvue & 小程序开发过程中的坑-阿里云开发者社区

开发者社区> 我是管理员> 正文

mpvue & 小程序开发过程中的坑

简介:
+关注继续查看

业务需要,最近开始做小程序开发,使用的是mpvue,做的过程中踩了一些坑,小程序的也有,mpvue的也有。感觉小程序中textarea巨多坑,还有许多找不到原因的,莫名其妙的坑。总得来说小程序并不适合做复杂的表单页面。

踩坑记录

1.mpvue将元素设置display属性,然后v-show控制显隐,不生效,元素始终以css中的display属性为准

  在css中设置display属性,使用v-show不生效,在mpvue中使用原生小程序的:hidden也是这样的效果,元素以css中的display属性为准,目前可以用:class绑定。

测试代码:



<template>
  <div class="container">
    <div class="box" :hidden="!isShow">原生hidden
    </div>
    <div class="box" v-show="isShow">v-show
    </div>
    <div class="box" :class="{'hidden':!isShow}">:class绑定
    </div>
    <button @tap="showUser">点我</button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            isShow: false
        };
    },
    methods: {
        showUser() {
            this.isShow = !this.isShow;
        }
    }
};

</script>

<style scoped>
.box {
    display: block;
    width: 100rpx;
    height: 200rpx;
    background: yellow;
    margin:0 auto;
}
.hidden{
  display:none;
}

</style>



2.textarea层级最高问题

  一个长页面表单,提交按钮使用fixed固定在底部是很常见的场景,由于textarea层级最高,无法被其他元素遮盖,所以textarea的value部分会透出,并且在底部按钮点击时也可以触发focus事件。(同理在有textarea的页面上覆盖弹层,也同样情况)

7ea57c6484470799eff08851ba5d7315e02e6c7c
fa471f07aae36a63c3e3a79556faf6915505cf86

查了文档,可以用组件cover-view,此组件可以覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher。将底部按钮放在cover-view中,解决了层级问题,但在手机上测试是,长页面滚动时,发现底部的cover-view会发生抖动,说明小程序的一些原生组件实现的还不是特别好。

  最终用的方案是将textarea做在弹窗中,作为一个公共的编辑器组件,触发时才显示,层级最高。避免出现覆盖其他元素的情况。

3.小程序中使用fixed自定义弹窗时,如何使底部长页面禁止滚动

  这个场景也非常常见,解决方案有:

   1.底部长页面使用scroll-view,当弹窗显示时,将scroll-y设置为false,弹窗关闭时,将scroll-y设置为true。

   2.原生小程序中可以在弹层上使用catchtouchmove,此事件会阻止向父元素冒泡,mpvue中使用@touchmove.stop="一个空函数"。

4.mpvue代码中有异常时,小程序开发者工具有时候不会抛出异常报错,除了缺少文件会报错外,控制台大部分时间都是安静的,难以调试 。

  经查找,正常情况下代码错误时开发者工具是有错误提示的,而promise中的代码异常时不会有错误抛出。原因:mpvue中的promise被替换为 core-js polyfill 的 Promise 对象,global上没有全局错误处理。

  解决方案:在src下的main.js中添加一行require('core-js/library/modules/_global.js').console = console或者require('core-js/library/modules/_global.js').onunhandledrejection = console.errror

5.textarea写在组件中时,ios下绑定@input事件失败

  这个错误有点摸不着头脑,事情是这样的,我们把textarea做在弹层中作为一个公共编辑器组件,点击可编辑区域触发显示弹层。差不多长这样:

9e20dc08a9c86cbb869b8cbb9285c5634738a652
输入框需要实时统计字数,于是绑定了input事件。弹层使用v-show控制显隐,在开发者工具上正常,安卓下也正常,ios下有异常,提示@input绑定的事件找不到,同时绑定其他事件如bindblur就是正常的。
82f45e041d636ddc743c4bb76e6251ae6d705afb


75efc91cf3b843ffce7683a2ef7c8fdbd653816b

最终把v-show改成v-if就好了,原因还没找到。

6.引用第三方库报错TypeError: Cannot assign to read only property 'exports' of object '#<Object>'。

  引用第三方库时,我并未使用npm包的方式,而是直接将第三方库中的dist下的文件拷贝放到项目中libs下,然而webpack报错了,这个并非mpvue的问题,而是webpack不能混用import以及module.exports。因此需要将ES6的模块语法转换为AMD、CommonJS、UMD之类的模块化标准语法。


 1.使用transform-es2015-modules-commonjs插件

3215d7d7e0a22fad464d80d4cb19a2cbab7cbda8
 2.将babelrc下preset中的modules设置成"commonjs"

30267a4dba050df9acf1c4de206521027653a395

tips

1.小程序数字输入框键盘在ios下没有完成按钮,交互体验差。使用普通输入框。

2.textarea不能放到scroll-view里面使用。

3.textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。


原文发布时间为:2018年06月27日
作者:花卷爱学习
本文来源:掘金     如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用mpvue开发小程序教程(五)
在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁、条理清楚、各司其职,这样会让代码变得更易理解和维护,间接的也提升了代码的健壮性,降低出现Bug的几率,即使出现Bug,也会更容易进行定位和调试。
1915 0
使用Vue开发微信小程序:mpvue框架
【最近更新】mpvue入门系列教程:如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六)使用mpvue开发小程序教程(五)使用mpvue开发小程序教程(四)使用mpvue开发小程序教程(三)使用mpvue开发小程序教程...
1591 0
使用mpvue开发小程序教程(三)
【注意事项】由于mpvue也在不断的开发演进,大家在不同时间段使用的时候,可能会遇到和文中的做法不一样的地方。请关注文章的评论区中大家的讨论,寻找解决方案,或者及时查阅官方文档,避免陷入版本更新的坑里哦。
1038 0
Vue开发环境搭建全过程,一步一个坑
Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.
1631 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10785 0
【小程序】微信小程序开发实践
帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册。 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的。
1124 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3665 0
+关注
我是管理员
社区管理员
29
文章
381
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载