一.异步
同步:
同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。
异步:
将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。
同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。
异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。
我们知道,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 hint: [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
网友评论