小程序常见问题以及解决方案总结

一、原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

原生组件

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

• camera
• canvas
• input（仅在focus时表现为原生组件）
• live-player
• live-pusher
• map
• textarea
• video

解决方案：使用小程序的cover-view和cover-image组件。

二、小程序无法监听和拦截左上角返回事件

解决方案：a、自定义页面header，b、监听页面的隐藏onHide或卸载onUnload事件。

三、在安卓机上，即使使用了cover-view组件，如果原生组件比cover-view组件先完成渲染，cover-view依然盖不住原生组件

解决方案：延迟cover-view组件的渲染。

四、页面滚动和scroll-view的滑动刷新冲突

解决方案：如果使用scroll-view，则使用bindscrolltolower属性绑定事件。

五、页面高度没有超过手机屏幕高度时，底部会有空白

解决方案：如果页面内容小于一屏，直接设置高度为手机高度，如果页面内容动态变化，则需要监听页面内容的高度，然后动态设置页面高度

六、小程序button按钮自带边框效果，而且直接设置border无法去掉

解决方案：需要设置：after的样式。

.button_gray::after {
  border: none;
}

七、this指向的问题,在回调中this会改变,需要保存指针 

解决方案： let that = this;

八、使用wx:for 或者其他wx:if 之类时候最好用block包裹起来

九、使用swiper的时候，快速切换或者网速慢的时候，会出现无限自动切换的问题

解决方案：在切换的时候需要做一个判断，来避免切换事件bindchange 的重复调用

十、image设置图片的时候图片在开发工具上面显示，可是运行到手机上面不显示。仔细查看是不是先图片的时候。设置路径不小心在后面加了空格

例如：
正确：手机上显示
<image class="icon_tubiao" src="../../image/my_jianzhi.png"></image>

错误：手机上不显示 src里面的内容后面不小心加了空格
<image class="icon_tubiao" src="../../image/my_jianzhi.png "></image>

十一、关于真机预览背景图片不显示的问题

解决方案： 背景图片必须是服务器地址，https://开头的，src里面的图片地址是本地的地址

十二、出现“脚本错误或者未正确调用Page（）”的错误提示。

解决方式：出现这个错误的原因通常是因为index.js (即对应页面的js文件)里，没有调用Page方法。即使js文件里没有任何代码，也需要在js里添加一个空的 Page（{ }）。注意Page的P要大写。 

十三、出现警告信息

解决方式： 
首先，这只是一个警告信息，不是错误信息，不理他不会对程序运行有任何的影响。官方文档原话：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。如果你一定想去掉这个警告，可以在wx：for的组件属性里增加一个 wx:key=”unique”，unique请替换成数据绑定列表里的任意一个字段的字段名，比如文章列表数据中的字段“postId”，即wx:key=”postId”。不建议使用wx:key=”*this”。其实wx：key用来对列表渲染的数据指定一个”主键”，以加快列表渲染的速度。

十四、textarea在滚动页面中的BUG

textarea，map等组件是客户端创建的原生组件，他的层级是最高的。如果遇到定位元素的话，永远在最上面，盖不住。

解决方式：请勿在scroll-view swiper picker-view movable-view使用textarea
css动画对textarea无效

十五、移动中心点 获取设备  不多解释上代码

十六、微信号，QQ号，手机号的正则验证

var wxReg=new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$") //微信号正则验证

var qqReg=new RegExp("[1-9][0-9]{4,}")  //QQ号正则验证

var phReg=new /^1[345678]\d{9}$/  //手机号正则验证

var nameReg=new RegExp（"^[\u4e00-\u9fa5]{2,4}$"）  //2-4位中文姓名正则验证

十七、关于微信小程序下拉刷新组件加载图片（三个小点）不显示的问题

解决方案：

在对应的.json中,添加

"backgroundTextStyle": "dark"

十八、扫描二维码

scancode(){
    wx.scanCode({
      success:function(){
        console.log("scancode")
      }
    })
  }

十九、转发小程序给好友或转发到群时，成功显示转发时定义的标题、图片、描述等，但打开转发链接时提示“页面不存在”的问题

解决方式：检查转发中”path“字段的转发路径是否正确，若path填写的路径的为“/pages/index/index”，小程序项目结构为

将path写成“pages/index/index”即可。path的路径需根据自己创建的项目结构进行填写，否则就会出现该问题。

二十、轮播图最后一张与第一张不衔接问题

<swiper indicator-dots="true" indicator-color="指示点颜色" indicator-active-color="当前选中指示点颜色" interval="自动切换时间间隔" 
duration="滑动动画时长" autoplay="true" vertical="false(是否改为纵向)"
    <block wx:for="{{imgUrls}}">
    <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block>
</swiper>

解决方式：，知道是使用circular（是否采用衔接滑动这一属性），但是我一直在js中data里设置，致使反复不能实现效果，最后发现只要在swiper标签中加上一句 circular="true" 就神奇般的好了

二十一、当一次setData的数据超过一定值就会报如下错误

首先声明，我setData的是图片地址，而不是列表数据，那么先说我是怎么解决的

法一：

（invoiceImages是后端返回的图片集合）
invoiceImages.forEach(function (obj, index) {
  var invoiceObject = {};
  if (typeof obj.fileExt == 'undefined' || obj.fileExt == '') {
     return false;
  } else {
     var imgSrc = 'data:image/' + obj.fileExt + ';base64,' + obj.fileContent;
     invoiceObject.src = imgSrc;
     finalDisSrc.push(invoiceObject);
  }
});
            
for (var i = 0; i < finalDisSrc.length;i++) {
   var key = 'imgpath' + i;
   that.setData({
      [key] : finalDisSrc[i]     //[变量] 这样是动态设置值的形式
   })  
 
   var disPic = 'disPic' + i;
   that.setData({
      [disPic]: 'block'
   })  
 }

data: {
    imgpath0: [],  //图片路径
    imgpath1: [],
    imgpath2: [],
    imgpath3: [],
    imgpath4: [],
    imgpath5: [],
    disPic0: 'none',  //图片显示
    disPic1: 'none',
    disPic2: 'none',
    disPic3: 'none',
    disPic4: 'none',
    disPic5: 'none'
}

页面中就并列放了5个image标签，没有用循环
<image style='display:{{disPic0}}' src="{{imgpath0.src}}" data-src="{{imgpath0.src}}" mode="widthFix"></image>

总结：此方法我是比如有5张图片，那么我是setData了5次。此方法我已无力吐槽，只能说是很笨的方法，结果是保证了每张图片都能显示出来了

二十二、微信小程序自定义弹框滚动与页面滚动冲突问题

解决方案一：

<scroll-view class="scanInvoice_content" height="100%" scroll-y="{{isScroll}}">
    //设置Page的overflow-y属性值为hidden
</scroll-view>
点开的函数中，如果自定义弹框当前显示，则isScroll设为true，否则设为false


解决方案二：

 如果自定义弹框不涉及滚动，则直接在自定义弹框最外层盒子加上  catchtouchmove='true' 即可。

 

版权声明：本文为博主原创文章，转载请附上博文链接！