微信小程序开发报错及解决记录

八岐大兔吼啦吼啦

已于 2024-11-25 11:49:23 修改

阅读量6.5k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序 css javascript 前端

于 2022-10-11 09:21:29 首次发布

本文链接：https://blog.csdn.net/weixin_53582738/article/details/127256486

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

1. 微信小程序Api使用

1.1.路由跳转方式wx.redirectTo()和wx.navigateTo()有时会失效

1.2.预览图片wx.previewImage() 点击始终显示第一张图片

2.域名配置相关问题

2.1.wx.downloadFile()加载图片不显示

3.组件样式&属性不一致/失效

3.1.微信小程序picker组件，不同系统样式不一致

3.2. scroll-view锚点定位scroll-into-view属性失效

3.3.微信小程序，引入weapp组件库Popup组件里嵌套自定义组件时，关闭Popup，再次点击不生效

4.Js报错

5.生命周期相关问题

5.1.初次进入小程序，底部tabbar权限展示错误

6.其他问题

6.1.input获取焦点时页面内容会被上推

6.2.[“usingComponents“][“component1“]:“xxx“

1. 微信小程序Api使用

1.1路由跳转方式wx.redirectTo()和wx.navigateTo()有时会失效

wx.redirectTo()只是关闭当前页面，跳转到某个页面，会叠加图层，跳转页面次数太多可能找不到图层（官方没有明确说明上限是多少，查资料显示一般在4/5层之后失效）。

wx.navigateTo()，可以配合返回上一页api，保留当前图层，再跳转某个页面（文档说明上限是10层）。

wx.reLaunch()关闭所有页面，打开新的页面。

按需求将部分路由api更换为wx.reLaunch()，避免图层叠加过多而失效。

1.2.预览图片wx.previewImage() 点击始终显示第一张图片

使用时的几个问题：

1、每次预览后页面会刷新，产生数据叠加；

问题原因：api自动触发onShow，如果当前页面接口请求用的push方法去处理的返回来的数据，那么在预览图片后，就会不断往缓存中添加新的一组数据。

解决方案：

（1）每次请求前先清除一下数据（最好就不要在当前页面做push方法的数据处理）；

（2）页面既有逻辑太多怕清错，添加一个变量控制是否要请求接口，点击图片时禁止调取接口。

2、假设有两张图片，点击预览第二张图片时，图片永远显示第一张。

不算是坑，检查后发现是页面并没有取值到对应的index，所以不能直接使用 current: this.data.imgUrl[e.target.dataset.index],需要在页面中点击图片的位置（而不是for循环的位置）绑定 data-index="{{index}}"。

wx.previewImage({
    current: this.data.imgList[index],
    urls: this.data.imgList
})

2.域名配置相关问题

2.1.wx.downloadFile()加载图片不显示

具体表现场景：

图片占位且一直刷新。

解决方案：

本地开发的时候会生效，是因为勾选了“不校验合法域名的选项”，但微信上传测试环境后，HTTPS 请求就需要配置合法域名，上传wx.uploadFile()和下载wx.downloadFile()网络请求也是一样的。

在微信开发者工具检查是否配置合法域名，如未配置，登陆微信小程序后台【开发】--【开发管理】--【开发设置】--【服务器域名】进行配置。

3.组件样式&属性不一致/失效

3.1.微信小程序picker组件，不同系统样式不一致

左为安卓样式，右为ios样式。

解决方案：

业务要求需要以左侧为准，样式得统一，可以将小程序组件更换为vant weapp组件库popup +picker组合使用。

<van-popup show="{{ showReason }}" bind:close="onCloseReason" position="bottom" round>
    <van-picker columns="{{ reasonArray }}" bind:confirm="bindPickerChange" default-index="{{ index }}" custom-class="index font" title="标题名称 " show-toolbar value-key="reasonName" bind:cancel="onCloseReason" visible-item-count="5" active-class="choiceReason" />
</van-popup>

3.2. scroll-view锚点定位scroll-into-view属性失效

使用时的几个问题：

1、将scroll-view放在父组件中，滚动区内容单独封装在子组件中，scroll-into-view不定位。

解决方案：将scroll-view标签从父组件移入到子组件，页面可定位。

2、解决第一个问题后，从a页面进入b页面，在b页面也需要锚点定位，但是定位的位置不准确，始终偏上。

检查思路及解决方案：

（1）检查封装的子组件中子元素是否有flex布局，scroll-view默认不支持，需开启，或者将子元素弹性盒属性变更为浮动属性（第二个办法多少有点傻，但浏览帖子有人scroll-view不生效也不知道为啥，还只能改用float）；

（2）scroll-view的父级元素无高度时，scroll-view不能使用height:100%，要使用固定高度；

（3）不同手机屏幕高度不同，动态获取手机高度后计算赋值，再将值传给子组件；

// 在onLoad周期获取视口高度
    wx.getSystemInfo({
      success: (res) => {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        // 获取可使用窗口高度
        let clientWidth = res.windowWidth;
        // 算出比例
        let ratio = 750 / clientWidth;
        // 算出高度(单位rpx) - 固定元素的高度滚动区高度
        let height = clientHeight * ratio – 父组件页面其他元素高度;
        this.setData({
          height: height,
        })
      }
});

（4）获取a页面定位元素的生命周期（onLoad）在接口调用（onShow）之前，数据未完全渲染就已经开始定位，所以产生偏差。

可以将请求挪到onLoad中 + 定时器同时使用，双重保险。

onLoad(options) {
//请求接口的方法
//开启定时器
  setTimeout(() => {
    //接收a页面传来的id名称，进行锚点定位
    if (!!options.toView) {
      that.setData({
        toView: options.toView
      })
    }
   }, 50)
}

纵向滚动时，.wxml中写入以下属性就好。

<scroll-view style="height: {{height}}rpx;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">

3.3.微信小程序，引入weapp组件库Popup组件里嵌套自定义组件时，关闭Popup，再次点击不生效

业务场景：由于对弹窗样式有要求，所以没有使用官方提供的wx.showModal(),而是使用Popup封装的弹窗组件。在点击页面按钮弹出弹窗组件，关闭后再次点击按钮，点击事件没有被触发，弹窗不弹出。

问题原因：嵌套的自定子组件虽然也跟随Popup关闭，但留在了原位，遮挡了按钮操作。

解决方案：去掉Popup自定义样式中的flex元素，将其移入自定义组件中设置，只保留基础的宽高背景色属性。

3.4.live-play 组件 bindnetstatus、bindstatechange不生效

真机模式预览，本地开发工具是个废材。另外示例代码中，binderror不管是真机还是开发工具，都不生效，可以放弃使用了。

4.Js报错

5.生命周期相关问题

5.1.初次进入小程序，底部tabbar权限展示错误

业务场景：自定义子组件tabbar权限初次登录本地存储登录信息，进入首页时，展示为未登录首页权限，推出小程序前台再次进入小程序时，才显示正确。

问题原因：判断权限使用的生命周期错误。tabbar权限判断放在了（attached）周期中，会早于index页父组件（onShow）前触发。也就是说，权限信息还没获取到，权限判断就已经开始了，所以页面显示错误。

解决方法：将attached（在组件实例进入页面节点树时执行）修改为ready（在组件在视图层布局完成后执行），这时父组件已经拿到权限判断的数据，之后执行子组件的判断，数据正确。

6.其他问题

6.1.input获取焦点时页面内容会被上推

业务场景：

1、微信小程序，自定义地图搜索，顶部按钮使用绝对定位和粘性定位不生效，输入框输入文字时按钮会被顶出屏幕。

问题原因：input获取焦点弹出键盘时，默认自动上推页面。

解决方法：

1、组件设置 adjust-position=“{{false}}” ，键盘弹起时，禁止自动上推页面。

2、设置1后，输入框在获取焦点时，可能会被弹出的键盘覆盖，看不到输入的内容。需要同时给input设置动态style=” padding-bottom :{{pb }}rpx” ，<input/>绑定 bindfocus（获取焦点）和bindblur（失去焦点），当触发焦点键盘抬起时，赋值为当前键盘高度；键盘关闭赋值为0。

//触发input焦点时，动态赋值padding-bottom高度
  keyBoardOnFun(e) {
    console.log(e.detail.height)
    if (e.detail.height) {
      this.setData({
        paddingBottom: (e.detail.height * 2 - 500) * 2.5 // -500 *2.5 操作为漏出输入框dom
      })
    }
  },
  //失去input焦点时，动态修改padding-bottom为0
  keyBoardCloceFun(e) {
    this.setData({
      paddingBottom: 0
    })
  },