小程序开发中的某些坑

本文主要是介绍小程序开发中的某些坑，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

• 技术概述
• 技术详述
• 技术使用中遇到的问题
• 总结
• 参考文献或博客

技术概述

项目开发过程中，我主要是负责小程序前端开发，主要工作是界面样式的设计和接口调用的实现。因为我负责的那部分界面逻辑较为简单，因此没有特别困难的技术难点。我就将一些开发过程中碰到的某些坑写一下。主要是：小程序父子控件bindtap事件冲突问题，如何让view填满剩余可用的高度。

技术详述

1. 在父控件和子控件都用bindtap绑定事件，且为不同的事件时，父子控件的点击事件会冲突。因此可以将子控件的绑定改用catchtapcatchtap='childClick' hover-stop-propagation='true'，而父控件仍然使用bindtap进行事件绑定bindtap='parentClick'。
2. 当在样式美化时，需要使用到边框或者阴影时，如果view中内容较多，则会自动生成页面滚动轮，设置view的margin和边框后即可正常显示。但是，在view中内容不多，不足以铺满剩余高度或者生成滚轮是，view就不会铺满全屏。而且用户的机型各不相同，屏幕尺寸也不同，固定高度的view很难满足要求。因此可以采用动态获取该机型屏幕的总高度，减去已占用的高度，即可得到剩余高度的大小。这部分我是参考下面给出的博客，虽然他是要scroll-view，但是view的具体实现也是一样的。
   下面是流程图
   
   具体代码实现：

calDetailsHeight(){
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
          that.setData({
              windowHeight: res.windowHeight/(res.windowWidth /750)
          });
      }
    });
    console.log(that.data.windowHeight)
    let detialsHeight = that.data.windowHeight - that.data.slidesHeight - that.data.bottomCardHeight - that.data.marginHeight;
    that.setData({
      detailsCardHeight : detialsHeight
    })
    console.log(that.data.detailsCardHeight)
  },

技术使用中遇到的问题

• 遇到的问题就是父子控件都有点击事件时，容易误点，需要将子控件的点击范围设置的大一点。
• 还有就是在beta冲刺时，使用vue框架，多个vue文件的样式会串掉的问题。可以使用<style scoped>解决，设成私有化的样式。

总结

我遇到的问题大部分都可以直接通过百度解决，逻辑也并不复杂，因此，这篇博客比较的简单。我就在下面列出我参考的比较多的或者认为比较有用的博客吧。

参考文献或博客

小程序实践（十三）：父子控件点击事件冲突
微信小程序 scroll-view 填满剩余可用高度
一篇文章弄懂flex布局
vue 3.x 环境搭建及项目创建
vue 引入 阿里巴巴矢量图的步骤
Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

这篇关于小程序开发中的某些坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！