小程序开发过程中踩过的坑

1.自定义头部导航栏
目前微信小程序不支持单个页面设置,一旦在要决定使用自定义导航栏,那么每个页面都需要设置,建议写成组件,避免代码重复。具体代码就不上了,还是要自己思考嘛~

2.调起相机
由于camera是原生组件,层级最高(z-index无效),需要cover-view,cover-image添加图片;device-position = 'front'或back来切换前后置摄像头。


    
        
    

小程序开发过程中踩过的坑_第1张图片
比如上面的这个圈圈.jpg
// 拍照方法  
const ctx = wx.createCameraContext() 
ctx.takePhoto ({
  quality: 'high', // 照片质量
  success: (res) => { // 回调
    this.setData({
      // 临时照片路径
      src: res.tempImagePath
    })
  }
})

3.关于wx.navigateBack和wx.navigateTo
使用wx.navigateTo需注意层级问题,一直入栈而不出栈会导致无法继续跳转(小程序中页面栈最多十层)。navigateBack有参数delta,如果 delta 大于现有页面数,则返回到首页。

wx.navigateBack({
    delta: 1,
})

navigateTo 只能打开非 tabBar 页面。

4.关于小程序适配iPhone X及以上(XR,Xs,Xs Max)
wx.getSystemInfo()已经可以正确获取到XR,Xs,Xs Max的型号信息了(res.model)由于这些机型底部有34pt是留给Home Indcator,不能识别点击事件等操作,所以要把底部的button或者navbar向上提高34pt。

还有很多没有写到的,回头总结总结再发出来吧~
第一次写东西有点儿紧脏,以后还会陆续更新一些关于前端的东西的~

你可能感兴趣的:(小程序开发过程中踩过的坑)