zoukankan      html  css  js  c++  java
  • go语言使用go-sciter创建桌面应用(一) 简单的通过html,css写ui

    我们使用go-sciter,就不得不提Sciter,Sciter 是一个嵌入式的 HTML/CSS/脚本引擎,旨在为桌面应用创建一个 UI 框架层。

    说简单点就是我们通过它可以像写html,css那样写桌面UI。

    一、环境准备

    第一步:从https://sciter.com/download/地址下载sciter-sdk

    解压,找到sciter-sdkin64sciter.dll复制到c:windowssystem32

    注意上面的请根据你自已的系统选择相应文件


    第二步:由于使用到cgo,所以window下需要安装mingw或tdm-gcc(建议安装tdm-gcc)
    下载地址:

    https://sourceforge.net/projects/mingw/files/

    下载地址:

    http://tdm-gcc.tdragon.net/download

    下载:mingw-get-setup.exe或tdm64-gcc-5.1.0-2.exe
    安装,然后把mingwin或tdm-gccin加入到环境变量中


    第三步:cmd进入gopath目录并运行

    go get -x github.com/sciter-sdk/go-sciter
    

      

    二、通过html,css编写简单UI

    demo1.go代码如下:

    package main
    
    import (
    	"github.com/sciter-sdk/go-sciter"
    	"github.com/sciter-sdk/go-sciter/window"
    	"log"
    )
    
    func main() {
    	//创建window窗口
    	//参数一表示创建窗口的样式
    	//SW_TITLEBAR 顶层窗口,有标题栏
    	//SW_RESIZEABLE 可调整大小
    	//SW_CONTROLS 有最小/最大按钮
    	//SW_MAIN 应用程序主窗口,关闭后其他所有窗口也会关闭
    	//SW_ENABLE_DEBUG 可以调试
    	//参数二表示创建窗口的矩形
    	w, err := window.New(sciter.SW_TITLEBAR|
    		sciter.SW_RESIZEABLE|
    		sciter.SW_CONTROLS|
    		sciter.SW_MAIN|
    		sciter.SW_ENABLE_DEBUG,
    		nil);
    	if err != nil {
    		log.Fatal(err);
    	}
    	//加载文件
    	w.LoadFile("demo1.html");
    	//设置标题
    	w.SetTitle("你好,世界");
    	//显示窗口
    	w.Show();
    	//运行窗口,进入消息循环
    	w.Run();
    }

    demo1.html代码如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        你好,世界
    </body>
    </html>

    如果出现乱码请把demo1.html文件转成gb2312并加上<meta charset="gb2312">或者转成UTF-8+BOM(注意是加BOM,加BOM,加BOM)。

    三、写个表单的UI

    demo2.go代码如下:

    package main
    
    import (
    	"github.com/sciter-sdk/go-sciter"
    	"github.com/sciter-sdk/go-sciter/window"
    	"log"
    )
    
    func main() {
    	//创建window窗口
    	//参数一表示创建窗口的样式
    	//SW_TITLEBAR 顶层窗口,有标题栏
    	//SW_RESIZEABLE 可调整大小
    	//SW_CONTROLS 有最小/最大按钮
    	//SW_MAIN 应用程序主窗口,关闭后其他所有窗口也会关闭
    	//SW_ENABLE_DEBUG 可以调试
    	//参数二表示创建窗口的矩形
    	w, err := window.New(sciter.SW_TITLEBAR|
    		sciter.SW_RESIZEABLE|
    		sciter.SW_CONTROLS|
    		sciter.SW_MAIN|
    		sciter.SW_ENABLE_DEBUG,
    		//给窗口设置个大小
    		&sciter.Rect{Left: 0, Top: 0, Right: 500, Bottom: 500});
    	if err != nil {
    		log.Fatal(err);
    	}
    	//加载文件
    	w.LoadFile("demo2.html");
    	//设置标题
    	w.SetTitle("表单");
    	//显示窗口
    	w.Show();
    	//运行窗口,进入消息循环
    	w.Run();
    }
    

    demo2.html代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <style>
            table {
                 100%;
                border-collapse: collapse;
            }
    
            table td {
                padding: 10px;
                border: 1px solid #ccc;
            }
    
            table td:first-child {
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
    <form action="">
        <table>
            <tr>
                <td>用户:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" value="0">男
                    <input type="radio" value="1">女
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <input type="checkbox" value="">看书
                    <input type="checkbox" value="">打球
                    <input type="checkbox" value="">旅游
                </td>
            </tr>
            <tr>
                <td>简介:</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
    </body>
    </html>
    

    是不是感觉很方便,我个人觉得未来这种方式写UI会成为主流,传统的过于繁琐和麻烦了。

    关于一些问题的说明

    1、w.LoadFile() 无法加载相对路径的文件,请确保你运行程序的目录是否正确。

    比如新版本的GoLand,在你右键Run时,程序所指向的目录是你New Project时设置Location的目录,而不是此时go脚本所在的目录。

  • 相关阅读:
    three.js: Control gui and play sound set Volume
    Three.js: 显示自定义的中文字体
    P2P学习(四)P2P编程实现
    WebRTC进阶流媒体服务器开发(六)Mediasoup源码分析之Mediasoup主业务流程
    WebRTC进阶流媒体服务器开发(五)Mediasoup源码分析之Mediasoup启动过程
    WebRTC进阶流媒体服务器开发(四)Mediasoup源码分析之底层库
    WebRTC进阶流媒体服务器开发(三)Mediasoup源码分析之应用层(代码组成、Server.js、Room.js)
    WebRTC进阶流媒体服务器开发(二)Mediasoup环境配置
    WebRTC进阶流媒体服务器开发(一)多人互动架构
    WebRTC学习(十一)实时数据传输网络协议详解
  • 原文地址:https://www.cnblogs.com/jkko123/p/7045421.html
Copyright © 2011-2022 走看看