支付宝小程序笔记1

野性酷女 2022-02-27 08:14 390阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

问：我写了如下代码：

<swiper-item>

</swiper-item>

</swiper>

我发现，swiper和swiper-item的高度都是0，但是图片是渲染出来了的，图片是有高度的，怎么让swiper的高度等于图片的高度？

答：在swiper-item里加上一个<view>，给<view>设置高度就行了，直接给swiper-item设置高度是不行的

问：怎么让页面跳到底部？

答：参考文档：[https://docs.alipay.com/mini/api/scroll][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;\}；就没有问题了

![Image 1][]

问：在<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%的高度，效果图如下，

![Image 1][]

怎么办？

答：把background-size:100% 100%!important;

问：当app.acss和页面里的acss的class冲突时，支付宝小程序按照哪个进行渲染的？

答：按照页面里的acss的class进行渲染的，可以这么理解，每个页面的acss是这么做的：

因为是后引入页面.acss，所以在同样的优先级情况下，用的是页面.acss里的样式

问：支付宝小程序最多10层，如果需求超过10层，怎么办？

答：到第10层的时候，js控制，让第10层的内容隐藏，让原本应该是第11层页面的内容放在第10层页面里并显示

问：预览失败，怎么办？

答：1.我取消勾选快速预览模式，结果就能预览了

追问：有时就需要快速预览模式，怎么办？

答：重装开发者工具，快速预览模式就有效了

问：<textarea placeholder="请输入病情描述" show-count="false" />，我已经设置了show-count="false"，但是仍然显示了数字统计功能，怎么办？

答：改成这样：

在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个页面，

合并以后，有些函数、变量会冲突，修改以后及时把变量名改好，然后测试这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);

\});

下图是渲染结果：

![Image 1][]

我发现，通过上面这个方式获取到的宽高，只是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][https_docs.alipay.com_mini_component_web-view]

核心代码如下：

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：

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>

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();的地方，比如下面这段话：

![Image 1][]

改变my.hideLoading();的地方就可以解决上面的问题，修改后的代码如下：

![Image 1][]

问：在一个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][https_blog.csdn.net_u010523770_article_details_51736247])

![Image 1][]

问：像上面这种获取历史订单的时间选择器，怎么写？

答：

<view class="pull-left">\{ \{sel\_month\}\}</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上是没有报错的，请问这个问题怎么解决呢？

答：

![Image 1][]

web-view不能忽略src，只有网络请求才能忽略

作者：刘叶青  
链接：https://www.jianshu.com/p/7d1fb5a80d35  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 1]
 *  [不要争了！技术选择没那么重要][Link 2]

[Fundebug]: https://www.fundebug.com/
[https_docs.alipay.com_mini_api_scroll]: https://links.jianshu.com/go?to=https%3A%2F%2Fdocs.alipay.com%2Fmini%2Fapi%2Fscroll
[Image 1]: 
[https_docs.alipay.com_mini_component_web-view]: https://links.jianshu.com/go?to=https%3A%2F%2Fdocs.alipay.com%2Fmini%2Fcomponent%2Fweb-view
[https_blog.csdn.net_u010523770_article_details_51736247]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fu010523770%2Farticle%2Fdetails%2F51736247
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 1]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 2]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/