问:我写了如下代码:
我发现,swiper和swiper-item的高度都是0,但是图片是渲染出来了的,图片是有高度的,怎么让swiper的高度等于图片的高度?
答:在swiper-item里加上一个
问:怎么让页面跳到底部?
答:参考文档:https://docs.alipay.com/mini/api/scroll
my.pageScrollTo({
scrollTop: 100
});
把scrollTop的值设置为页面的高度,就可以实现让页面跳到底部的效果了
问:如何获取软键盘高度?
答:iphone6和iphone8的软键盘高度是578px,iphone8plus的软键盘高度是526px,如果只需要兼容iphone6-iphone8的话,可以直接用if(iphone6 || iphone8){578}else if(iphone8plus){526}这种比较笨的方法
如果页面底部需要1个固定的,不要设置position:fixed;用这个属性bug很多,要这样:以上的
问:在里输入完想要问的内容以后,点击发送,发现,在安卓手机下并不会调用‘发送’按钮的点击事件,而只是软键盘隐藏而已,怎么办?
答:经过调试发现,安卓手机里button标签的onTap事件延迟调用了,onTouchStart不会延时调用,然而button标签又不支持onTouchStart事件,所以解决问题的办法就是:把‘发送’按钮的标签,从原来的
问:如何提高写静态页面的速度?
答:先在chrome手机模式下写页面,然后把
问:支付宝小程序的swiper设置了如下样式:
swiper swiper-item,swiper view,swiper image{
display: block;
width: 100%!important;
height: 100%!important;
background-size:100%!important;
}
结果image不总是占据100%的高度,效果图如下,
怎么办?
答:把background-size:100% 100%!important;
问:当app.acss和页面里的acss的class冲突时,支付宝小程序按照哪个进行渲染的?
答:按照页面里的acss的class进行渲染的,可以这么理解,每个页面的acss是这么做的:
因为是后引入页面.acss,所以在同样的优先级情况下,用的是页面.acss里的样式
问:支付宝小程序最多10层,如果需求超过10层,怎么办?
答:到第10层的时候,js控制,让第10层的内容隐藏,让原本应该是第11层页面的内容放在第10层页面里并显示
问:预览失败,怎么办?
答:1.我取消勾选快速预览模式,结果就能预览了
追问:有时就需要快速预览模式,怎么办?
答:重装开发者工具,快速预览模式就有效了
问:,我已经设置了show-count="false",但是仍然显示了数字统计功能,怎么办?
答:改成这样:
在js设置show_count:false
就可以了
问:支付宝小程序的页面最多5层吗?如果页面需要10层,怎么办呢?
答:最多可以10层,建议控制在5层;层级过多可能造成内存崩溃业务异常
问:使用了
答:把外面一层
问:页面里有几个请求,什么时候隐藏loading?
答:
方案1:
全局变量num:0;
请求1的回调函数里设置++num
请求2的回调函数里设置++num
setInterval(function(){
if(num == 2){
隐藏loading
}
}, 1000);
但是这样写,性能太差了
方案2(更好):
设置1个全局变量,flag,在sucess里flag++,if(flag==2){my.hideloading}
问:
this.setData({top:0});
console.log(this.data.top);
按照上面这样写,打印时top的值确实是0,但是实际上小程序页面上的的效果,并不是就是top:0;的效果,这个是我在做轮播图的时候发现的,我让top的值从-200到0再到-40(其中,-200到0是没有过渡效果的,从0到-40是有过渡效果的),我发现页面真正效果是从-200直接到-40,也就是说,this.setData({top:0});以后再this.setData({top:-40});效果其实跟直接this.setData({top:-40});一样,怎么解决这个问题呢?
答:this.setData({top:0}, function(){this.setData({top:-40});});
问:点击某个地方,根据不同情况需要跳到3个页面,但是如果是tabBar的话,只能写死为1个页面,怎么办?
答:把3个页面合并为1个页面,
合并以后,有些函数、变量会冲突,修改以后及时把变量名改好,然后测试这3种情况
问:小程序是不是不能2个手机同时连接同一个蓝牙设备的?我发现,2个手机单独连接蓝牙都是成功的,2个手机同时连接蓝牙设备时,其中1个手机就连接不上
答:小程序技术支持说‘蓝牙只能一对一是这样的。’
问:如何获取元素的宽高?
答:axml:
acss:
.view1{
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #f2f2f2;
margin:10px;
}
js:
onReady(){
my.createSelectorQuery()
.select('.view1').boundingClientRect()
.selectViewport().boundingClientRect()
.selectViewport().scrollOffset().exec((ret) => {
console.log(ret);
});
}
下图是渲染结果:
我发现,通过上面这个方式获取到的宽高,只是DOM元素的内容区宽高,不包含padding/border/margin
问:有时候ide的axml部分不是当前页面的axml,怎么办?问:textarea这个标签,可以设置没有最大长度吗?
答:最笨的方法是:刷新页面,但是太慢了,更快的方法是:跳到其他页面或者跳到其他tabBar,再回到刚才的页面,这时axml就会被刷新
答:当设置为-1时不限制最大长度
关于input的几种场景:
既然小程序给input提供了4种type,我们就要好好利用:
如果是普通的输入文字,就用text
如果是支付时所使用的,就用digit
如果是输入手机号码,就用number
如果是输入身份证号码,就用idcard
虽然text是万能的,但是为了用户体验,还是要注意一下这个细节
问:关于支付宝小程序的textarea问题:
1.支付宝版本10.1.50,手机型号:COR-AL00 框架版本:1.11.5|0.1.1811291102.21 不能粘贴
2.小米手机‘MI MAX2’可以粘贴,但是粘贴以后,文字和placeholder的文字同时出现
答:给textarea设置enableNative="{{false}}" (注意:enableNative这个属性在官方文档里是找不到的)
问:支付宝小程序里支持哪些长度单位?
答:px,rpx,em,rem,
其中最常用的是rpx,
用到px的场景:
如果需要使用到1px的边框/
如果页面里底部或顶部需要用到固定定位的地方。
如果是写一段一段的文字,就用em
一般不会用到rem,因为感觉rem和rpx的应用场景是一致的
要让一个button或者view内容垂直居中,用height:40px;line-height:40px;比设置padding:10px 0;更稳妥
picker学习笔记:
1.当range的类型是Object数组时,需要使用range-key,否则,一点击这个picker,页面就会崩溃
2.range-key是放在滑动容器里的内容,而{{objectArray[arrIndex].属性}}是用来给用户真正看的内容,两者不要混淆
问:小程序里有2个页面,1个是test.axml,1个是index.axml,H5页面名称是h5.html;
如果test.axml里有web-view,这个web-view引入了h5.html,我想在h5.html里跳到index.axml,怎么实现呢?
答:参考链接:https://docs.alipay.com/mini/component/web-view
核心代码如下:
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
document.writeln('
注意:核心代码其实就是先引入一个js文件,然后像在支付宝小程序的页面里一样用my.navigateTo来跳转就行了
问:需求:如果后端给我的图片地址是无效的,怎么把后端的图片地址换成自己默认的图片?
答:代码如下:
axml:
js:
data : {
url : '123.png',
},
onLoad(){
that = this;
},
on_error(e){
let url = 'http://www.healthyuhang.com:8180/yhapp/upload/doctor/default.png';
that.setData({
url
});
},
注:如果图片地址是有效的,就不会调用onError事件了
问:上面是一张图片的情况,如果是渲染图片列表,上面的方法就不行了,怎么办呢?
axml:
js:
on_error(e){
let that = this;
let list = that.data.list;
let doc_index = e.currentTarget.dataset.doc_index;
list[doc_index].url = 'http://www.healthyuhang.com:8180/yhapp/upload/doctor/default.png';
that.setData({
list
});
},
问:支付宝小程序的my.hideLoading();会隐藏my.showToast,这个怎么办呢?(后来在真机上测试发现,iphone6是没有这个问题的)
答:这个是支付宝小程序本身的bug,我们不能解决,但是我们可以改变调用my.hideLoading();的地方,比如下面这段话:
改变my.hideLoading();的地方就可以解决上面的问题,修改后的代码如下:
问:在一个js文件里的开始,定义了let flag = 0;在请求完成后设置++flag;我发现再次进入这个页面时在onLoad里打印,发现flag不是0而是2,怎么办?
答:在页面开头写let flag;在onLoad里初始化flag的值,也就是在onLoad里写flag = 0;
支付宝小程序的一个中文占位符可以用 也就是4个 来实现(参考链接:https://blog.csdn.net/u010523770/article/details/51736247)
问:像上面这种获取历史订单的时间选择器,怎么写?
答:
onLoad(query){
let that = this;
let date = new Date();
let now_year = date.getFullYear();
let now_month = date.getMonth() + 1;
console.log('now_month', now_month);
if(now_month < 10){
now_month = '0' + now_month;
}
let sel_month = now_year + '-' + now_month;
that.setData({
sel_month
});
sel_month(res){
let that = this;
let sel_month = that.data.sel_month;
my.datePicker({
format: 'yyyy-MM',
currentDate: sel_month,
success: (res) => {
console.log('sel_month', res);
let sel_month = res.date;
that.setData({
sel_month
});
get_list(that);
},
});
},
支付宝小程序里,可以对
问:onLoad只写了let that = this;一句话,一进来,就有loading效果了,怎么办?
答:在项目文件内找到.tea目录删除重新刷新编译看下
问:怎么避免写let that = this;这种代码?
答:使用箭头函数,在函数开头这样写:on_error:()=>{},不要写on_error(){}
问:如何避免页面中每个函数开头都写一遍let that = this;?
答:js开头就写:let that;在onLoad里写that = this;这样页面任何地方都能直接使用that而不需要多次声明let that = this;了
问:我在代码里写了
答:
web-view不能忽略src,只有网络请求才能忽略