这个示例很简单，就是在网页中单击"增加行"按钮，直接在Foxtable的订单表中增加一行：
快速入门
本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"快速入门"。
我们先看这个快速入门示例，然后再进行细节的介绍。
这个示例很简单，就是在网页中单击"增加行"按钮，直接在Foxtable的订单表中增加一行：
所有的代码都在AfterLoad事件中：
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
'初始化浏览器
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '将Foxtable库注入到WebViewer脚本环境
'
定义测试页面，本地网页和远程网页都可以，这里为了方便，直接将网页嵌入到代码中了
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<style>button{padding:10px 30px;font-size:16px;margin:20px;}</style>
</head>
<body>
<button onclick="addOrderRow()">增加行</button>
<script>
const ft =
window.chrome.webview.hostObjects.ft
//引用Foxtable库
async function addOrderRow() {
const Orders = await
ft.Tables["订单"];
let dr = await Orders.AddNew();
dr["产品"]
= "PD01";
dr["客户"]
= "CS03";
dr["雇员"]
= "EP02";
dr["单价"]
= 20;
dr["折扣"]
= 0.05;
dr["数量"]
= 180;
dr["日期"]
= new Date();
alert(await dr["客户"]
+ "增加了新订单");
//显示新增订单的客户名称
}
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
'打开测试页面
可以看到在js中增加行的代码，和在Foxtable增加行的代码，基本一样
使用步骤
1、注入Foxtable库
如果要在前端js代码使用Foxtable的功能，必须将Foxtable库注入到WebViewer的脚本环境，代码为：
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库，参数为即将注入此库的WebViewer控件
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '将Foxtable库注入到WebViewer脚本环境
必须在浏览器已经初始化后才能注入Foxtable库，否则无效。
浏览器只需初始化一次，Foxtable库也只需注入一次，一般都在窗口的AfterLoad事件执行。
2、引用Foxtable库
Foxtable库注入成功后，就可以在js代码中引用Foxtable库了，引用代码为：
const ft = window.chrome.webview.hostObjects.ft
3、使用foxtable库
引用Foxtable库后，就可以在js脚本中使用Foxtable的全部功能了，例如给订单表增加一行。
const Orders =
await ft.Tables["订单"];
//引用订单表
let dr = await Orders.AddNew();
dr["产品"] = "PD01";
dr["客户"] = "CS03";
dr["雇员"] = "EP02";
dr["单价"] = 20;
dr["折扣"] = 0.05;
dr["数量"] = 180;
dr["日期"] = new Date();
除了语法差异，上面的js代码和Foxtable原生代码基本是一样的。
4、移除Foxtable库(非必须)
在窗口的AfterClose加上代码：
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
wv.CoreWebView2.RemoveHostObjectFromScript("ft")
'移除Foxtable库
await与返回值
前面的代码，有两处用到了await，分别是增加行：
let dr = await Orders.AddNew();
和显示客户名称：
alert(await dr["客户"] + "增加了新订单"); //显示新增订单的客户名称
二者的共同之处是都有返回值，AddNew返回新增行，dr["客户"]返回客户名称
。
如果是普通赋值语句，则不能加await，例如你将上面的：
dr["产品"] = "PD01";
改为：
await
dr["产品"] = "PD01";
代码将不能正常运行，按F12进入开发者模式，可以看到错误提示：Invalid left-hand side in assignment
调用foxtable成员时,请记住以下原则：
1、如果是取值，一定要加上await，否则你得到的永远是null
2、如果是赋值，则不能加上await，否则所有js脚本都会失效
await的位置
根据上述原则，await一定要加载取值的位置，而不是赋值的位置。
假定希望在网页中单击某个按钮能切换订单表的锁定状态，如果这样写：
Orders.AllowEdit =
!Orders.AllowEdit;
由于没有加await，肯定是不行的，如是加上await：
await Orders.AllowEdit =
!Orders.AllowEdit;
也还是不行，因为await应该加在取值的位置，而不是赋值的位置，所以正确的写法是：
Orders.AllowEdit = !await Orders.AllowEdit;
再看前面的示例代码中显示客户名称的代码：
alert(await
dr["客户"] + "增加了新订单")
await没有加在行首，而是加在dr["客户"]前面，也是一样的道理。