韦德国际官网动态加载模块踩坑,简述JS浏览器的三种弹窗

import

在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果:

1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法)。比如alert(1+1)弹出的结果应该是字符串形式的“2”。

webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。

韦德国际官网 1 

2.Confirm:在alert基础上增加了让用户选择性的操作(提供两个按钮:确定和取消)

这个功能可以实现按需加载我们的代码,并且使用了promise式的回调,获取加载的包。

 上图中的“关注公众号”动画就是我们要实现的效果。

比如:var  delin = confirm(‘你确定要删除吗?');

在代码中所有被import()的模块,都将打成一个单独的包,放在chunk存储的目录下。在浏览器运行到这一行代码时,就会自动请求这个资源,实现异步加载。

 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API

这一句,当用户点击确定按钮的时候,我们接受到的结果是true,点击的是取消按钮的时候,我们接受到的结果是false,此后我们可以根据不同的结果做不同的处理即可。

这里是一个简单的demo。

微信官方API学习

3.Prompt:在confirm的基础上增加让用户输入的效果

import('lodash').then(_ => {
  // Do something with lodash (a.k.a '_')...
 })

wx.createAnimation(OBJECT)

比如var flag = prompt(‘请输入你想反馈的意见:');

可以看到,import()的语法十分简单。该函数只接受一个参数,就是引用包的地址,这个地址与es6的import以及CommonJS的require语法用到的地址完全一致。可以实现无缝切换【写个正则替换美滋滋】。

说明:创建一个动画实例animation。调用动画操作方法后要调用 step()
来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

当用户点击取消按钮,我们获取到的结果是null;如果用户点击确定按钮,我们获取到的是用户输入的内容。(如果用户没有输入任何内容,获取到的的结果是空字符串)

并且使用了Promise的封装,开发起来感觉十分自在。【包装一个async函数就更爽了】

属性方法:

//但是真实的项目中,尤其是需要样式精美的网站中,我们的提示框一般都是自己封装插件和组件来实现,不会使用内置的这些方法(要使用原生JS封装模态框组件)

然而,以上只是表象。

韦德国际官网 2 

总结

只是表象。

主要说明一下:timingFunction

以上所述是小编给大家介绍的JS浏览器的三种弹框,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

发表评论

电子邮件地址不会被公开。 必填项已用*标注