2022年定期更新 | 开发微信小程序出bug，进来看这篇看看有没有你遇到的问题

优梨橙子
318 阅读4分钟

做小程序开发也有半年多了，途中遇到了很多奇奇怪怪的问题，也磕磕绊绊地解决了这些问题，在此记录一下这些，也欢迎大家一起交流纠正错误。

  1. 小程序开发之前，需要在微信官方后台配置使用到的服务器域名，否则无法使用体验版。
  2. app.js 里的 onLanuch 可以获取进入小程序的参数，如扫带参数的二维码进入小程序，可以在此获取参数
  3. getCurrentPages 函数可以获取页面栈，可以通过getCurrentPages()[getCurrentPages().length-2]来获取前一天页面的对象并调用里面的函数
  4. 小程序开发者工具模拟二维码传入的参数（扫描服务端生成的带参数的小程序二维码），需要在启动参数写上scene=XXXX，例如 scene=userId%3D1，其中%3D代表"="
  5. 页面配置加入enablePullDownRefresh可以使页面支持下拉刷新，然后页面代码加入函数onPullDownRefresh，其中可以进行网络请求的调用，获取到数据之后，可以在finnally中调用wx.stopPullDownRefresh()来结束刷新动画
  6. 小程序调用扫码wx.scanCode之后，会触发小程序app的onShow函数
  7. 安卓微信在使用自定义tabbar时，如果页面使用了Page的下拉刷新，会把tabbar一起下拉下去
  8. 微信基础库低于2.16.1时，自带的Promise没有finally支持，需要自己polyfill
  9. wx:if和wx:else一起使用时，如果wx:if的元素上同时有wx:for，会导致模板编译错误。可以把在外层增加block元素来包裹当前元素。block元素不会生成真实的元素
  10. wx.getMenuButtonBoundingClientRect可以获取右上角胶囊的布局位置信息
  11. 小程序组件的默认包装节点的display属性值是inline，可以在该自定义组件的wxss文件内加入
:host {
    display: block;
}
  1. 小程序样式文件不支持通配符*选择器
  2. 可以提过如下选择器实现列表的间隔
.item + .item {
    margin-top:20rpx;
}
  1. 利用IntersectionObserver监听元素的相交状态
this.data.posterObserver = wx.createIntersectionObserver(this, { thresholds: [0] });
this.data.posterObserver.relativeToViewport().observe('.poster', (res: { intersectionRatio: number }) => {
  const { intersectionRatio } = res;
  const isTop = intersectionRatio === 0;
});

  1. iPhoneX上下部有触控条需要避开时，可以利用env(safe-area-inset-bottom)可以将环境内定义的触控条高度写入padding-bottom

  2. 引入字体图标文件，下面的代码引用了bootstrap的图标，

@font-face {
  font-family: 'my-icon';
  src: url('https://cdn.staticfile.org/bootstrap-icons/1.7.1/font/fonts/bootstrap-icons.woff2') format('woff2');
  src: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/fonts/bootstrap-icons.woff2') format('woff2');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-male::before {
  content: "\f643"; /*这个数值是在bootstrap的CSS文件内找到的*/
}
.my-icon-female::before {
  content: "\f642";
}

  1. 当A页面跳转(navigateTo)到B页面时，如果需要大量传送数据，则可以选择建立EventChannel的方式，具体代码参见微信文档 developers.weixin.qq.com/miniprogram…

  2. 小程序中页面栈最多十层！

  3. 小程序的wx.compressImage压缩图片后，返回的临时文件的文件名是没有扩展名的，需要压缩之前记录文件名和扩展名

  4. wx.nextTick可以延迟一部分操作到下一个时间片进行

  5. 使用wx.downloadFile下载文件时，服务器响应后会进入success回调函数，即使下载失败也会生成文件，因此下载失败后需要使用FileSystemManager.unlinkSync来删除错误文件

  6. 微信官方库computed带来了computed的功能，可以跟Vue一样啦！现在也支持TS了！再也不会提示报错了

  7. Vant的popup组件有一个问题，在隐藏时，内部元素可能会依然显示在页面上，此时可以把内部元素套在block内，然后利用popup的show和block上的 wx:if 使用同一个布尔值，来进行控制显示隐藏

  8. van-image组件会比图片真实高度要高，可以设置style为display:flex，取消多余的高度

  9. switchTab跳转到的目标页面，不会重新执行目标页面的onLoad函数

  10. 对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

avatar
文章
阅读
粉丝