bug之所措
bug之所措

微信小程序的开发踩坑

前言

记录一下在开发小程序的时候遇到的问题，笔记跟坑我都稍微写一点

关于开发的

一. 生命周期和路由跳转

实在记不住( = = ||)，但是用到的几率挺高，所以就索性抄下来了

1.页面的生命周期

  • onLoad—-监听页面加载
  • onReady—-监听页面初次渲染完成
  • onShow—-监听页面显示
  • onHide—-监听页面隐藏
  • onUnload—-监听页面卸载

2.组件的生命周期

  • created 组件实例化，但节点树还未导入，因此这时不能用setData
  • attached 节点树完成，可以用setData渲染节点，但无法操作节点
  • ready 组件布局完成，这时可以获取节点信息，也可以操作节点
  • moved 组件实例被移动到树的另一个位置
  • detached 组件实例从节点树中移除

3.路由跳转

直接截图了

二. setData修改的类型是对象的话

我们知道小程序更改data里面字段值的话，要这样

this.setData({
    name: '小程序'
})

这种情况比较常见，但是如果是对象的话，要用中括号括起来

this.setData({
['info.isLike']:  true
});

还有一个情况，如果是要修改数组里面某个项的值

let targetIndex = 0;
this.setData({
['messages['+ targetIndex +'].isLoad']:false
})

三. 自定义顶部导航栏

原生的顶部导航栏功能太少，比如没有个人头像，没有回到主页等等。所以很多时候都会要求自己写一个

步骤一：app.json文件写上这句话
加了这句话自带的导航栏就会消失

"window": {
    "navigationStyle": "custom" //加上这句话
}

步骤二：自己写一个组件，高度的话可以参考这样

wx.getSystemInfo({
success: (res) => {
let  device  =  res.platform;
let  statusBarH  =  res.statusBarHeight;

// 自定义导航栏高度,ios设置40px,安卓端48px
if (device  ===  'ios') {
this.globalData.navbarHeight  =  statusBarH  +  40;
} else {
this.globalData.navbarHeight  =  statusBarH  +  48;
}

// 手机状态栏高度
this.globalData.statusbarHeight  =  statusBarH;
// 手机系统
this.globalData.deviceSystem  =  device;
}
});

步骤三：每一个页面要padding-top高度去适配这个导航栏组件

四. 自定义底部导航栏

跟顶部的原因一样，很多功能无法满足，要自定义，这里提一个点，使用自定义之后，切换页面的时候会有明显的抖动
为了解决这个问题，我们把一级页面全部变成了组件，用组件切换来代替页面切换,大概是这样

五. 暂时没想到，等待补充

关于踩坑的

一. 微信端

1.自动更新是做不到无感知的

版本有更新的话，用户一定会看到弹窗，一定要点一下确定按钮

2.组件拿不到app.wxss里面的样式

3.data里面直接定义app的global全局参数的话，如果中途变了，可能data里面的字段不会实时更新

global数据如果中途值改变了，页面或者组件里面的data里面初始化的那个值不会改变的，所以要额外处理

data: {
    vipCode:  app.global.vipCode  // vip版本
},

ready() {
// 有时候app全局值改变了,data里面的值没有同步
this.setData({
    vipCode:  app.global.vipCode
});
},

4. canvas画图的图片要先用wx.getImageInfo下载下来，拿临时路径才能用

5. 小程序文本框自带手机键盘的高度，监听focus事件可以获取到

写聊天页面的时候，为了解决输入框要顶上，但是聊天列表不顶上的问题。