前端通過view.window創建新窗口后，如何在新窗口中加載后端數據，主要有兩種方法：
1、通過在go里面使用DefineFunction定義方法，供前端使用，來獲取數據。
2、前端使用view.request請求接口，來獲取后端數據。
main.go的代碼如下：
package main
import (
json2 "encoding/json"
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
"github.com/tidwall/gjson"
"log"
"path/filepath"
)
type Person struct {
Name string `json:"name"`
Age uint8 `json:"age"`
}
//定義函數
func setWinHandler(w *window.Window) {
//定義函數，在tis腳本中需要通過view對象調用
w.DefineFunction("getData", func(args ...*sciter.Value) *sciter.Value {
json := args[0].String()
//獲取前端傳來的下標
index := gjson.Get(json, "index")
//數據，這里模擬從數據庫中得到的數據
persons := []Person{
{
Name: "aaa",
Age: 11,
},
{
Name: "bbb",
Age: 22,
},
{
Name: "ccc",
Age: 33,
},
}
var data []Person
if index.Int() == -1 {
data = persons
} else {
data = []Person{persons[index.Int()]}
}
b, _ := json2.Marshal(data)
return sciter.NewValue(string(b))
})
}
func main() {
//創建window窗口
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)
}
//注意這個地方，sciter較新的版默認的情況下禁用了非安全腳本功能
w.SetOption(sciter.SCITER_SET_SCRIPT_RUNTIME_FEATURES,
sciter.ALLOW_FILE_IO|
sciter.ALLOW_SOCKET_IO|
sciter.ALLOW_SYSINFO)
//加載文件
path, _ := filepath.Abs("./demo1.html")
w.LoadFile(path)
//設置標題
w.SetTitle("你好，世界")
//設置窗口處理程序
setWinHandler(w)
//顯示窗口
w.Show()
//運行窗口，進入消息循環
w.Run()
}
demo1.html代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.br {
width: 100%;
border: 1px solid #ccc;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="br">
<button id="win1">窗口</button>
</div>
<script type="text/tiscript">
//新窗口
$(#win1).on("click", function() {
var win1 = view.window({
type: View.TOOL_WINDOW,
url: self.url("simple.html"),
x: 200,
y: 200,
width: 400,
height: 400,
client: false,
state: View.WINDOW_SHOWN,
//窗口標題
caption: "新窗口",
alignment: 3,
});
});
</script>
</body>
</html>
simple.html的代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.br {
display: inline-block;
padding: 2px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
}
</style>
</head>
<body>
<div>
<ul id="list">
<li></li>
</ul>
<a href="#" class="page br" data-index="0">1</a>
<a href="#" class="page br" data-index="1">2</a>
<a href="#" class="page br" data-index="2">3</a>
<a href="#" class="ajax br">ajax</a>
</div>
</body>
<script type="text/tiscript">
view.root.on("ready", function() {
//注意這里getData方法，我們是在主窗口注冊的
//通過view.window創建的子窗口，我們需要通過view.parent訪問父級來調用getData
var params = {};
params.index = -1;
var data = view.parent.getData(JSON.stringify(params));
//解析從后台傳來的數據
data = JSON.parse(data);
if (data) {
var html = "";
for(var (k, v) in data) {
html += "<li>" + v.name + "---" + v.age + "</li>";
}
$(#list).html = html;
}
});
self.on("click", ".page", function() {
var index = this.attributes["data-index"];
var params = {};
params.index = index;
var data = view.parent.getData(JSON.stringify(params));
data = JSON.parse(data);
if (data) {
var html = "";
for(var (k, v) in data) {
html += "<li>" + v.name + "---" + v.age + "</li>";
}
$(#list).html = html;
}
});
self.on("click", ".ajax", function() {
view.request({
type: #get,
url: "http://127.0.0.1",
protocol: #basic,
params: {
"test": "test"
},
//設置返回數據類型為json
output: #json,
//成功回調函數
success: function(data,status) {
if (data) {
var html = "";
for(var (k, v) in data) {
html += "<li>" + v.name + "---" + v.age + "</li>";
}
$(#list).html = html;
}
},
//失敗回調函數
error: function(err,status) {
view.msgbox(#alert, err);
}
});
});
</script>
</html>
說明，http://127.0.0.1 返回的數據是我用PHP輸出的一些json數據，可以隨便模擬。
結果如下：
