我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - electron-prompt-smalltalk
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-1)

如果仅仅是解决electron不支持prompt的问题的话,这个代码足以。本文测试环境:win10smalltalk@2.5.1

安装smalltalk代码

当然,传统网页里面也是能使用smalltalk的,而这种electron的最新容器里面也是ok的。smalltalkgithub上面的地址是:

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

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - smalltalk
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-2)

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

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - smalltalk
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-3)

效果如下:

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - smalltalk
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-4)

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

传统网页中使用

可以参见源码目录下的example/legacy.html。打开看就行,足够简单,引入cssjs,就可以使用了,不依赖于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 的问题(图8-5)

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 的问题(图8-6)

补充说明

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

alert:

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

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - smalltalk_alert
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-7)

confirm:

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

苏南大叔:如何利用 smalltalk 弥补 electron 不支持 prompt 的问题 - smalltalk_confirm
如何利用 smalltalk 弥补 electron 不支持 prompt 的问题(图8-8)

和传统的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精彩文章:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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