小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。
问：我写了如下代码：
<swiper>
<swiper-item>
<image/>
</swiper-item>
</swiper>
我发现，swiper和swiper-item的高度都是0，但是图片是渲染出来了的，图片是有高度的，怎么让swiper的高度等于图片的高度？
答：在swiper-item里加上一个<view>，给<view>设置高度就行了，直接给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个固定的<input>，不要设置position:fixed;用这个属性bug很多，要这样：<input>以上的<view>的高度=屏幕高度-<input>高度，然后给<input>以上的<view>设置{overflow:auto;-webkit-overflow-scrolling: touch;}；就没有问题了
问：在<input>里输入完想要问的内容以后，点击发送，发现，在安卓手机下并不会调用‘发送’按钮的点击事件，而只是软键盘隐藏而已，怎么办？
答：经过调试发现，安卓手机里button标签的onTap事件延迟调用了，onTouchStart不会延时调用，然而button标签又不支持onTouchStart事件，所以解决问题的办法就是：把‘发送’按钮的标签，从原来的<button onTap>元素改成<view onTouchStart>以后，就没有问题了
问：如何提高写静态页面的速度？
答：先在chrome手机模式下写页面，然后把<div>改成<view>，把<span>改成<text>
问：支付宝小程序的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是这么做的：
<link href='app.acss'/>
<link href='页面.acss'/>
因为是后引入页面.acss，所以在同样的优先级情况下，用的是页面.acss里的样式
问：支付宝小程序最多10层，如果需求超过10层，怎么办？
答：到第10层的时候，js控制，让第10层的内容隐藏，让原本应该是第11层页面的内容放在第10层页面里并显示
问：预览失败，怎么办？
答：1.我取消勾选快速预览模式，结果就能预览了
追问：有时就需要快速预览模式，怎么办？
答：重装开发者工具，快速预览模式就有效了
问：<textarea placeholder="请输入病情描述" show-count="false" />，我已经设置了show-count="false"，但是仍然显示了数字统计功能，怎么办？
答：改成这样：
<textarea placeholder="请输入病情描述" show-count="{{show_count}}" />
在js设置show_count:false
就可以了
问：支付宝小程序的页面最多5层吗？如果页面需要10层，怎么办呢？
答：最多可以10层，建议控制在5层；层级过多可能造成内存崩溃业务异常
问：使用了<view><image></image></view>，发现图片下面有几px的page的背景颜色，我给view设置了padding:0;margin:0;仍然有几px的page的背景颜色，怎么办？
答：把外面一层<view>删除，再给<image>设置display:block;就没问题了
问：页面里有几个请求，什么时候隐藏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}
问：<view style='top:{{top}}px;'></view>
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个页面，
<block a:if="{{condition == 0}}">放页面1的内容</block>
<block a:elif="{{condition == 1}}">放页面2的内容</block>
<block a:else>放页面3的内容</block>
合并以后，有些函数、变量会冲突，修改以后及时把变量名改好，然后测试这3种情况
问：小程序是不是不能2个手机同时连接同一个蓝牙设备的？我发现，2个手机单独连接蓝牙都是成功的，2个手机同时连接蓝牙设备时，其中1个手机就连接不上
答：小程序技术支持说‘蓝牙只能一对一是这样的。’
问：如何获取元素的宽高？
答：axml：
<view class="view1">view1</view>
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 type="number" placeholder="这是一个数字输入框" />
<input password type="text" placeholder="这是一个密码输入框" />
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘" />
既然小程序给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
核心代码如下：
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
my.navigateTo({url: '../get-user-info/get-user-info'});
</script>
注意：核心代码其实就是先引入一个js文件，然后像在支付宝小程序的页面里一样用my.navigateTo来跳转就行了
问：需求：如果后端给我的图片地址是无效的，怎么把后端的图片地址换成自己默认的图片？
答：代码如下：
axml：
<image class="photo" src="{{url}}" onError="on_error"></image>
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：
<view class="clearfix" a:for="{{list}}" a:for-item="doc_item" a:for-index="doc_index">
<image class="photo" data-doc_index="{{doc_index}}" src="{{list[doc_index].url}}" onError="on_error"></image>
</view>
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)
问：像上面这种获取历史订单的时间选择器，怎么写？
答：
<view class="header" onTap="sel_month">
<view class="clearfix">
<view class="pull-left">{{sel_month}}</view>
<view class="pull-right">
<image class="sel_date" src="{{img_url}}sel_date.png" mode="widthFix"></image>
</view>
</view>
</view>
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);
},
});
},
支付宝小程序里，可以对<view>使用hidden='true'，但是不能对<text>使用hidden='true'
问：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="https://www.baidu.com"></web-view>，设置了忽略 httpRequest 域名合法性检查，而且我的手机支付宝版本是10.1.55，为什么仍然说我‘此页面无法跳转https://www.baidu.com’呢？我试了其他网页，也是报这个错，ide上是没有报错的，请问这个问题怎么解决呢？
答：
web-view不能忽略src，只有网络请求才能忽略
作者：刘叶青
链接：https://www.jianshu.com/p/7d1fb5a80d35
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
你可能感兴趣的
扫一扫
3088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
