如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

smalltalk,人如其名,短小精悍。提供的模拟对话框,其实就三个,alert/confirm/prompt。正好可以弥补electron的短板,可以说是物尽其用。其他的模拟对话框类代码,提供的功能一般可都是要远超这个的。所以,看您需求,是否需要更多的类对话框功能。如果仅仅是解决electron不支持prompt的问题的话,这个代码足以。

安装smalltalk代码

smalltalk在github上面的地址是:https://github.com/coderaiser/smalltalk 。当然,传统网页里面也是能使用的,而这种electron的最新容器里面也是ok的。

对于下载到的代码,苏南大叔建议大家直接关注dist/目录的smalltalk.poly.min.jssmalltalk.min.css即可,至于其它的源码文件,如果你有兴趣,可以自行打开阅读看看。

如何利用smalltalk弥补electron不支持prompt的问题 - smalltalk

如何利用smalltalk弥补electron不支持prompt的问题(图7-1)

还要注意img文件夹下面的还有2个图片,这两个图标并没有被base64到css里面去,所以还要注意相对引用关系。

如何利用smalltalk弥补electron不支持prompt的问题 - smalltalk

如何利用smalltalk弥补electron不支持prompt的问题(图7-2)

效果如下:

如何利用smalltalk弥补electron不支持prompt的问题 - smalltalk

如何利用smalltalk弥补electron不支持prompt的问题(图7-3)

如果对于皮肤样式不满意的话,自己修改修改皮肤好了,反正div和css的事情,没有啥好难的。对吧?smalltalk官方自带的就这么一套皮肤~

传统网页中使用

可以参见源码目录下的example/legacy.html。打开看就行,足够简单,引入css和js,就可以使用了,不依赖于jquery。当然有jquery的话,也是能够使用的。至于smalltalk.poly.min.js中的poly,苏南大叔理解着,就是兼容性更好的意思。目前,还没有啥官方的解释。

<link rel="stylesheet" href="<path_to_smalltalk>/smalltalk.min.css">
<script src="<path_to_smalltalk>/smalltalk.poly.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
    smalltalk.prompt('newsn.net提示您', '这个是苏南大叔测试的prompt范例', 'easy~').then(function(value) {
        console.log(value);
    }, function() {
        console.log('close');
    })
});
</script>

注意window.addEventListener('DOMContentLoaded',function(){})的写法,大概就是相当于熟识的$(function(){}),页面没有加载完毕就调用smalltalk.的话,似乎是要出错的哦~

example/index.htmlexample/prompt.password.html,这两个官方例子里面吗,还使用了system.js这个js,不过,看起来似乎蛮麻烦的,对吧?以后,苏南大叔再写文章分析一下这个system.js的用法。

electron中可以用的新写法

其实在electron的新写法,也不是啥特别新奇的写法。electron中的网页,可以使用node类似的写法罢了。我们可以使用下面的方式替换js的<script src=''></script>引入方式。

苏南大叔先在根目录下面执行smalltalk的安装命令。

npm install smalltalk --save

然后修改index.html:

var smalltalk = require ('smalltalk/legacy');

至于其他的代码就和普通网页里面一样一样的了,记得还是要引入css文件的。如果要报错Uncaught ReferenceError: require is not defined的话,请检测BrowserWindow中的nodeIntegration选项是否开启。当然,使用传统方式在electron中加载这个smalltalk.js的话,也是完全没有问题的。所以,如果必须关闭nodeIntegration选项的话,这并不是什么大不了的事情。

如何利用smalltalk弥补electron不支持prompt的问题 - node_require2

如何利用smalltalk弥补electron不支持prompt的问题(图7-4)

main.js:

'webPreferences': {
   'nodeIntegration':true
}

index.html:

<link rel="stylesheet" href="./node_modules/smalltalk/css/smalltalk.css">
<script>
var smalltalk = require ('smalltalk/legacy');
smalltalk.prompt('newsn.net提示您', '这个是苏南大叔测试的prompt范例', 'easy~')
.then(function(value) {
    console.log(value);
}, function() {
    console.log('close');
});
</script>

如何利用smalltalk弥补electron不支持prompt的问题 - node_require_ok

如何利用smalltalk弥补electron不支持prompt的问题(图7-5)

补充说明

下面的是相关smalltalk另外两个函数的效果图及用法。
alert:

smalltalk.alert('newsn.net提示您', '这个是苏南大叔测试的alert范例')
.then(() => {
    console.log('ok');
});

如何利用smalltalk弥补electron不支持prompt的问题 - smalltalk_alert

如何利用smalltalk弥补electron不支持prompt的问题(图7-6)

confirm:

smalltalk.confirm('newsn.net提示您', '您看明白了嘛?')
.then(() => {
    console.log('yes');
})
.catch(() => {
    console.log('no');
});

如何利用smalltalk弥补electron不支持prompt的问题 - smalltalk_confirm

如何利用smalltalk弥补electron不支持prompt的问题(图7-7)

和传统的alert/confirm/prompt对比

这里要特殊说明的是:这里模拟的alert/confirm/prompt和传统正派的alert/confirm/prompt相比:

  • smalltalk模拟的alert/confirm/prompt并不会阻塞js的执行,所以,如果有前后执行顺序的js逻辑千万要注意这点。
  • 获取smalltalk模拟的alert/confirm/prompt返回值的方式,是通过then()和·catch()`来获得的,和传统的返回值方式不一样。
  • 模拟smalltalk的传入的字符串参数是两个,而传统的则仅仅是一个字符串参数。区别就是smalltalk可以定义对话框的标题。

结论

本文的内容,能够以最小的代价解决electron不支持prompt的问题。但是smalltalk这个也不是最终答案,也不会是最优答案。

想知道更多更好的electron解决方案?欢迎关注:苏南大叔的更多electron相关文章。https://newsn.net/tag/electron/

  【electron】秘籍文章入口,仅传授于有缘之人  electron    smalltalk

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-smalltalk-prompt.html
上一篇好文:electron不支持prompt对话框怎么办?
下一篇好文:electron如何利用await解决smalltalk对话框异步执行的问题

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~