一、原生组件的层级是最高的,所以页面中的其他组件无论设置 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' 即可。
版权声明:本文为博主原创文章,转载请附上博文链接!