文章目录

一.异步

同步:

同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。

异步:

将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。

同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。

异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。

我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象。

所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行;或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求。这些异步的代码不会阻塞当前的界面主进程,界面还是可以灵活的进行操作,等到异步代码执行完成,再做相应的处理。

一段典型的异步代码类似这样:

然后我们这样调用:

这是一种使用了回调函数来控制代码执行流程的方式。这样看起来没问题,也挺容易理解。

但是,如果我们一段代码中,异步操作太多,又要保证这些异步操作是有顺序的执行,那我们的代码就看起来非常糟糕,就像这样:

这样的代码可读性和可维护性可想而知了。还有,回调函数真正的问题在于:

那有什么办法来改善这个问题呢?答案是肯定的,Promise这种概念的产生,很好地解决了这一切。关于什么是Promise,一搜一大把介绍,我这里就不复制粘贴了,我主要是讲一下我们怎么用它来解决我们的问题。

我们来看一下,上面的例子如果使用Promise,它会是什么样子?我们先将这些函数变成Promise的方式:

然后看一下他们是怎么样被调用的:

这样,这些异步函数就会按照顺序一个一个依次执行了。

ES6中原生支持了Promise,不过在原生不支持Promise的环境中,我们有很多第三方库来支持,比如Q.js和Bluebird。它们一般都除了提供标准Promise的API外,还提供了一些标准之外但非常有用的API,使得异步流程的控制更加优雅。

从微信小程序的API文档中我们可以看到,框架提供的JavaScript API中很多函数其实都是异步的,如wx.setStorage(), wx.getStorage(), wx.getLocation()等等,它们也是提供的回调的处理方式,在参数中传入success, fail,complete回调函数,就可以对运行成功或失败进行分别处理。

如:

我们能不能让微信小程序的异步API支持Promise呢?答案是肯定的,我们当然可以一个一个的用Promise去包装这些API,但是这个还是比较麻烦的。不过,由于小程序的API的参数格式都比较统一,只接受一个object参数,回调都是在这个参数中设置,所以,这为我们的统一处理提供了便利,我们可以写一个非侵入性的工具方法,来完成这样的工作:

假设我们将这个工具方法写到一个名为的util.js的文件中:

之后,我们来看一下如何使用这个方法,将原来回调方式的API变成Promise的方式:

2.微信小程序推送消息

在开发小程序 模板消息定时推送功能时,在开发版测试程序功能运行正常,但提交到线上后提示报错{“errcode”:41030,”errmsg”:”invalid page Shopfant: [gP1eXXXXXX]”}

查看小程序文档查看到 如下说明:

可以得到,报错的原因问page不正确,我配置的page为:

/pages/detail/detail?id=8a2b978c61db4d5a01621a313e842331

正确的做法是:

pages/detail/detail?id=8a2b978c61db4d5a01621a313e842331

去除pages前面的/就可以解决此问题;

3.textarea层级问题

问题重现: 当你一个页面有一个textarea的组件的时候,出现一个弹层,你的

textarea的placeholder的内容是弹层上面的,我们可以当弹层出来的时候,给这个textarea的组件隐藏起来,比如说

但是 这是不可取的,无法解决这个问题,隐藏节点的方式不行,那只能销毁节点了,正确的姿势如下。

解决办法:

当弹层出来的时候的,把textarea的节点wx:if=”{{false}}” ,同时实时获取textarea输入的内容,有个bindinput的实时获取值的方法,保存在一个变量中(content),同时要给这个textarea添加一个父级,把高度撑起来,弹层一消失

4.mpvue框架

今天先来讲解scroll-view组件,scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。

主要属性:

一.scroll-view失效

原因:

1.第一个误区:height不能使用百分百。

2.scroll-into-view 的属性值必须是动态获取的,不能写死。

在一开始的时候,想要测试scroll-into-view的作用,就把scroll-into-view的ID写死,结果然并卵

后来发现,不是这个功能不好用,而是要在组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到索引位置

二.scroll-into-view失效

原因:

由于使用了mpvue框架,scroll-into-view属性在scroll-view组件中失效。

真实案例:

问题一:当tab没有吸顶时,下面的scroll-view可以滑动。iphone X的tab不能置顶。

原因:使用scroll-view 组件时,scroll-y的属性值为true,默认向下滚动,当tab标题栏没有吸顶时,触摸到scroll-view组件时,会自动向下滚动。

iphone X不能置顶因为scroll-view的高度没有达到iphone X的屏高。

解决方案:首页解决scroll-view的固定高度的问题,由于机型的不同,屏高也不相同,所以scroll-view的高度选择动态高度,一打开小程序时,用wx.getSystemInfo()异步获取到屏幕的高度。

将获取到的屏幕高度值赋给scroll-view,在屏幕没有吸顶时scroll-y的值为false,吸顶之后为true.

解决方案二:废弃scroll-view组件,使用wx.pageScrollTo({})

S

<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。