WinCC OA-JS-WebView解析及開發環境搭建

前言

今天開始給大家帶來本教程較為重要的一個環節JS控件的二次開發,JS(javascript)是運行於瀏覽器中的腳本語言,

而WinCC OA內置了web引擎,這就給我們的開發帶來了無限想象,可能你們會問,使用JS 能開發出什么樣的組件呢

廢話不多說,直接上圖

案例1 大屏圖表

案例2  3D隧道

感覺如何?下面就隨我一起踏入WinCC OA - JS 二次開發的旅程吧

本章教程需要小伙伴們有一定的前端基礎,沒有基礎的小伙伴可以參考下面鏈接腦補一下語法

 https://www.w3school.com.cn/js/index.asp    JS語法教程

https://www.w3school.com.cn/jquery/index.asp jQuery 教程

https://www.w3school.com.cn/html5/index.asp  HTML 語法教程

OA-WebView 解析

我們知道WebView 是一個WinCC OA gedi 內置的Ewo 控件,簡單的說大家可以把它理解為一個瀏覽器,一個基於Google chromium內核的瀏覽器

但是OA在此基礎上做了很多封裝,小編制作了一張圖 概括這其中的要點

我們可以看到 不僅僅webview ewo 包括我們的ULC UX(WinCC OA輕量級客戶端),都實現了一套web 容器,

在這個容器里面默認為我們加載了oaJsApi 通過這個api 我們可以與OA內部的數據進行交互,

同時這個web容器里還為我們加載了jQuery(一套開源js庫)方便我們進行DOM操作

瀏覽器中的數據交互是通過WinCC OA 的websocket 服務實時傳遞的

開發環境搭建

開發工具推薦大家使用JetBrains公司出品的webstorm 或者微軟的VScode,編者這里使用webstorm

1)在OA項目同級目錄下新建webstorm項目

2)新建test.html文件 並填入如下代碼

<div style="width:100%;text-align:center;font-size:20px;font-weight:bold;">Hello WinCC OA</div>
<div  id="jquery-version" style="width:100%;text-align:center;font-size:20px;font-weight:bold;"></div>
<script>

//向id 為jquery-version 的div 添加 jQuery 的版本號

$("#jquery-version").append("jQuery version is:"+$.fn.jquery);
</script>

可以看到 得益於WinCC OA 為我們搭建的web容器我們只需編寫部分html 片段即可

3) 新建html.pnl 拖放webview 控件

4) 對html.pnl的initialize event 進行編碼

main()
{
    WebView_ewo1.loadSnippet("/data/html/test.html");
}

5) 運行pnl 可見成功輸出了Html內容及JQuery 版本號

 

碼上關注 獲取更多精彩