Windows界面編程_MiniBlink(4) 登錄程序Demo

經過前三篇的方法介紹，相信大家已經可以使用MiniBlink來編寫一個界面Demo了

前面介紹瞭如何使用Miniblink以及嵌入窗口，事件綁定(記錄式架構)

基礎已經掌握，我們接着上篇文章的源代碼繼續開始

先放一張最終效果圖：

我們寫一個簡單的Html登錄程序，Css效果後面在加：

<html>
<head>
</head>
<body>
<div class="demo1">
  <p>賬號:
  <input type="text" name="fname" />
  <p>密碼:
  <input type="text" name="lname" /><br><br>
<button type="button" onclick="myFunction()">Try it</button>
</div>
</body>
</html>

運行效果：

界面搭好了，我們使用js腳本獲取賬號與密碼的值然後傳遞給後端：

function myFunction()

{
   var temp = document.getElementById('fname').value;
   var temp1 = document.getElementById('lname').value;
   var obj = msgBox("1",temp,temp1);
	
   var Er = obj.Error;
   if(Er == 1){
	alert("賬號密碼正確！登錄成功");
   }else
   {
   alert("賬號密碼錯誤！登錄失敗");
   }

}

msg最多隻能傳遞三個值，所以目前來說msg還是可以的，後面在教大家如何傳遞數組，長數組，這樣傳遞參數大小就無限制啦

目前來說能滿足我們的需求，我們一步一步往後走

上面這段代碼是獲取賬號和密碼框裏的值，然後msg執行傳參，並獲取執行結果error，然後判斷是否正確

回調代碼:

//索引函數
jsValue JS_CALL js_Index1(jsExecState es)
{
	//拿到賬號
	const wchar_t* Admin = jsToStringW(es, jsArg(es, 1));
	//拿到密碼
	const wchar_t* pin = jsToStringW(es, jsArg(es, 2));
	//判斷賬號或密碼是否正確：
	if (wcscmp(Admin, L"ipassbu") != 0 || wcscmp(pin, L"ipassbu") != 0){
		jsValue jv = jsEmptyObject(es);
		jsValue jOv1 = jsInt(0);
		jsSet(es, jv, "Error", jOv1);
		return jv;
	}
	else{
		jsValue jv = jsEmptyObject(es);
		jsValue jOv1 = jsInt(1);
		jsSet(es, jv, "Error", jOv1);
		return jv;
	
	}
	
}

這裏只是假值demo並沒有讀取數據庫哦！

執行結果：

登錄成功：

好了這樣就OK了，那麼開始我們的css渲染吧！

body{
text-align:center;
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
}
.demo1{
	text-align:center;
	position: absolute;width:400px;height:200px;left:50%;top:50%; 
	margin-left:-200px;margin-top:-100px;border:1px solid #FFFF;
	-webkit-box-shadow: #666 0px 0px 10px;
	
}
p{
    text-shadow:0 0 0.2em #f87,
                -0 -0 0.2em #f87;
}
.a{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 4px 14px;
    width: 200px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}
.a:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.b{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 4px 14px;
    width: 200px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
	transition: all 1.1s; 
}
.b:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	width:100px;
	transition: all 1.1s; 
}
button:hover
{
 background-color: #4c5d3a; /* Green */
}

css效果：

全部代碼：

win32：

// Win32Project1.cpp : 定義應用程序的入口點。
//

#include "stdafx.h"
#include "Win32Project1.h"
#include "wke.h"
#define MAX_LOADSTRING 100

// 全局變量: 
HINSTANCE hInst;								// 當前實例
TCHAR szTitle[MAX_LOADSTRING];					// 標題欄文本
TCHAR szWindowClass[MAX_LOADSTRING];			// 主窗口類名

// 此代碼模塊中包含的函數的前向聲明: 
ATOM				MyRegisterClass(HINSTANCE hInstance);
BOOL				InitInstance(HINSTANCE, int);
LRESULT CALLBACK	WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK	About(HWND, UINT, WPARAM, LPARAM);

int APIENTRY _tWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPTSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{
	UNREFERENCED_PARAMETER(hPrevInstance);
	UNREFERENCED_PARAMETER(lpCmdLine);

 	// TODO:  在此放置代碼。
	MSG msg;
	HACCEL hAccelTable;

	// 初始化全局字符串
	LoadString(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);
	LoadString(hInstance, IDC_WIN32PROJECT1, szWindowClass, MAX_LOADSTRING);
	MyRegisterClass(hInstance);

	// 執行應用程序初始化: 
	if (!InitInstance (hInstance, nCmdShow))
	{
		return FALSE;
	}

	hAccelTable = LoadAccelerators(hInstance, MAKEINTRESOURCE(IDC_WIN32PROJECT1));

	// 主消息循環: 
	while (GetMessage(&msg, NULL, 0, 0))
	{
		if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
		{
			TranslateMessage(&msg);
			DispatchMessage(&msg);
		}
	}

	return (int) msg.wParam;
}



//
//  函數:  MyRegisterClass()
//
//  目的:  註冊窗口類。
//
ATOM MyRegisterClass(HINSTANCE hInstance)
{
	WNDCLASSEX wcex;

	wcex.cbSize = sizeof(WNDCLASSEX);

	wcex.style			= CS_HREDRAW | CS_VREDRAW;
	wcex.lpfnWndProc	= WndProc;
	wcex.cbClsExtra		= 0;
	wcex.cbWndExtra		= 0;
	wcex.hInstance		= hInstance;
	wcex.hIcon			= LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WIN32PROJECT1));
	wcex.hCursor = NULL;
	wcex.hbrBackground	= (HBRUSH)(COLOR_WINDOW+1);
	wcex.lpszMenuName = NULL;
	wcex.lpszClassName	= szWindowClass;
	wcex.hIconSm		= LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));

	return RegisterClassEx(&wcex);
}

//
//   函數:  InitInstance(HINSTANCE, int)
//
//   目的:  保存實例句柄並創建主窗口
//
//   註釋: 
//
//        在此函數中，我們在全局變量中保存實例句柄並
//        創建和顯示主程序窗口。
//
wkeWebView m_web;
//索引函數
jsValue JS_CALL js_Index1(jsExecState es)
{
	//拿到賬號
	const wchar_t* Admin = jsToStringW(es, jsArg(es, 1));
	//拿到密碼
	const wchar_t* pin = jsToStringW(es, jsArg(es, 2));
	//判斷賬號或密碼是否正確：
	if (wcscmp(Admin, L"ipassbu") != 0 || wcscmp(pin, L"ipassbu") != 0){
		jsValue jv = jsEmptyObject(es);
		jsValue jOv1 = jsInt(0);
		jsSet(es, jv, "Error", jOv1);
		return jv;
	}
	else{
		jsValue jv = jsEmptyObject(es);
		jsValue jOv1 = jsInt(1);
		jsSet(es, jv, "Error", jOv1);
		return jv;
	
	}
	
}
//中轉函數
jsValue JS_CALL js_msgBox(jsExecState es)
{
	const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));
	//開始中轉
	if (wcscmp(FuncIndex, L"1") == 0){//執行索引一
		//func
		return js_Index1(es);
	}
	return jsStringW(es, L"0X00");

}

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
   HWND hWnd;

   hInst = hInstance; // 將實例句柄存儲在全局變量中

   hWnd = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,
      CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, NULL, NULL, hInstance, NULL);

   if (!hWnd)
   {
      return FALSE;
   }

   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);
   wkeSetWkeDllPath(L"node.dll");

   wkeInitialize();
   RECT rtClient;
   GetClientRect(hWnd,&rtClient);
   rtClient.top += 0;
   m_web = wkeCreateWebWindow(WKE_WINDOW_TYPE_CONTROL, hWnd, rtClient.left, rtClient.top, rtClient.right - rtClient.left, rtClient.bottom - rtClient.top);
   wkeLoadFile(m_web, "index.html");
   jsBindFunction("msgBox", js_msgBox, 2);//JS調用C++
   wkeShowWindow(m_web, TRUE);

  
   return TRUE;
}

//
//  函數:  WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目的:    處理主窗口的消息。
//
//  WM_COMMAND	- 處理應用程序菜單
//  WM_PAINT	- 繪製主窗口
//  WM_DESTROY	- 發送退出消息並返回
//
//
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
	int wmId, wmEvent;
	PAINTSTRUCT ps;
	HDC hdc;

	switch (message)
	{
	case WM_COMMAND:
		wmId    = LOWORD(wParam);
		wmEvent = HIWORD(wParam);
		// 分析菜單選擇: 
		switch (wmId)
		{
		case IDM_ABOUT:
			DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
			break;
		case IDM_EXIT:
			DestroyWindow(hWnd);
			break;
		default:
			return DefWindowProc(hWnd, message, wParam, lParam);
		}
		break;
	case WM_PAINT:
		hdc = BeginPaint(hWnd, &ps);
		// TODO:  在此添加任意繪圖代碼...
		EndPaint(hWnd, &ps);
		break;
	case WM_DESTROY:
		PostQuitMessage(0);
		break;
	default:
		return DefWindowProc(hWnd, message, wParam, lParam);
	}
	return 0;
}

// “關於”框的消息處理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
	UNREFERENCED_PARAMETER(lParam);
	switch (message)
	{
	case WM_INITDIALOG:
		return (INT_PTR)TRUE;

	case WM_COMMAND:
		if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
		{
			EndDialog(hDlg, LOWORD(wParam));
			return (INT_PTR)TRUE;
		}
		break;
	}
	return (INT_PTR)FALSE;
}

html:

<html>
<head>
<script>           
function myFunction()

{
   var temp = document.getElementById('fname').value;
   var temp1 = document.getElementById('lname').value;
   var obj = msgBox("1",temp,temp1);
	
   var Er = obj.Error;
   if(Er == 1){
	alert("賬號密碼正確！登錄成功");
   }else
   {
   alert("賬號密碼錯誤！登錄失敗");
   }

}   

 </script>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="demo1">
  <p>賬號:
  <input type="text" class="a" id="fname" />
  <p>密碼:
  <input type="text" class="b" id="lname" /><br><br>
<button type="button" onclick="myFunction()">登錄</button>
</div>
</body>
</html>

css：

body{
text-align:center;
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
}
.demo1{
	text-align:center;
	position: absolute;width:400px;height:200px;left:50%;top:50%; 
	margin-left:-200px;margin-top:-100px;border:1px solid #FFFF;
	-webkit-box-shadow: #666 0px 0px 10px;
	
}
p{
    text-shadow:0 0 0.2em #f87,
                -0 -0 0.2em #f87;
}
.a{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 4px 14px;
    width: 200px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}
.a:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.b{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 4px 14px;
    width: 200px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
	transition: all 1.1s; 
}
.b:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	width:100px;
	transition: all 1.1s; 
}
button:hover
{
 background-color: #4c5d3a; /* Green */
}

圖片資源：image.png

Windows界面編程_MiniBlink(4) 登錄程序Demo

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

Windows核心編程_Miniblin(5) 前後端交互數據

IE下AJAX請求只有一次

Linux開發_多線程編程

Linux內核開發_3_busybox

Linux內核開發_2_Initramf

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結