微信公众号开发

小程序开发中的某些坑

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

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

技术概述

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

技术详述

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

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