经过前三篇的方法介绍,相信大家已经可以使用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