美文网首页启舰分享
小程序开发--入坑记录

小程序开发--入坑记录

作者: _白小青 | 来源:发表于2018-07-26 09:48 被阅读4次

    一.异步

    同步:

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

    异步:

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

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

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

    我们知道,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

    相关文章

      网友评论

        本文标题:小程序开发--入坑记录

        本文链接:https://www.haomeiwen.com/subject/uolemftx.html