使用CEF作为用户界面

 学会这个,就可以用本地文件实现一个纯粹基于HTML,javascipt和CSS(Bootstrap)的用户界面,并用它来操作系统

 

一、在项目新建文件夹:html-resources。然后将Bootstrap文件目录结构及内容拷贝进去。并将这些文件的属性Copy to output Directory值设置为Copy Always.

 二、要显示和操作的index.html界面里。增加button按钮用javascript执行。(cefCustomObject是待会儿下文操作类的实例)

 <button class="btn btn-info" οnclick="cefCustomObject.showDevTools();">Open Chrome Dev Tools</button>
  <button class="btn btn-primary" οnclick="cefCustomObject.opencmd();">Open cmd.exe</button>

  三、新建操作类(用户目标类)(点击按钮所进行的操作。)比如opencmd方法:打开cmd进程

四、在构造函数里(1--4跟使用cef作为浏览器一样):

1、cefsetting实例化settings

2、用Cef去初始化settings

3、实例化ChromiumWebBrower对象(本地位置的index.html文件)

4、把此对象加载到控件里,设为Fill

5、浏览器组建对象注册JS事件。绑定实例化刚才的操作类。

6、一些浏览器属性BrowerSettings设置。赋值给浏览器该属性。

 

 

 

 

 

 

 

git源码地址:

https://gitee.com/HuLuMiaoMiao/SecondCefSharp

参考(有改动便于理解、部分地方有误):

https://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application

转载于:https://www.cnblogs.com/hulumiaomiao/p/8575435.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GIF动态预览图: 开发环境: E2EE支持库 (已集成) CEF框架(已集成) VUE -https://cn.vuejs.org/ (已集成) NodeJS (已集成) WebPack (已集成) HTML/CSS/JS (已集成) 易语言 (已集成) 易主程序源码参考 lib ---- CEF运行库,必须 (目录名禁止修改) server ---- 本地服务器网站目录,必须 图标 ---- 自带的图标,可删除 jingyi.e ---- 主程序源代码 精益论坛PC版DEMO.exe ---- 主程序成品,必须 Chromium Embedded Framework 3.ec ---- CEF调用模块 Installer32.dll ---- CEF 扩展DLL,必须 libtransfer.dll ---- CEF 扩展DLL,必须 以上标注“必须”为整个程序生产编译后的依赖项,否则无法正常运行 VUE界面源码参考 由于环境模块过大,所以不附带 初始化安装环境步骤: 1、请将当前目录的yarn.lock 删除 2、在当前目录下打开CMD,输入指令“yarn”回车即可自动安装环境 3、安装好环境包后,在当前目录执行CMD指令“yarn serve”回车即可运行调试 4、yarn build 命令 一键打包发布,发布后的内容在当前dist目录下,打包完成后会自动生成 5、将打包后的dist网页内容复制到,易语言主程序下的server目录替换即可 以上为有HTML,CSS,JS基础,以及会VUE框架的人使用,如果您不会VUE,您需要学习后在来操作。 我们已经把打包后的VUE成品界面内置到了主程序的server目录,您不需要对VUE源码项目任何操作 您只需要运行主程序即可看到效果 该项目主要由易语言+CEF+VUE+E2EE来完成,懂这方面的人员可以自行修改源码,如果您不会也可以自己尝试修改,便于学习 界面UI部分是由前端VUE框架构建 如有会这方面的人,可以自行扩展

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值