aardio学习记录-4.使用aardio直接向HTML中输出js变量+嵌入SQLITE数据库发布程序

之前做的n个练习程序都是基于HTML配合js和aardio作为中间层来访问SQLITE数据库,但是发现一个很致命的问题,那就是调试运行的时候都是妥妥的,但是一执行发布要么IDE出错直接挂掉,要么就是发布出来的exe打开后出错,无法显示数据,归根到底还是资源文件中加入的SQLITE数据库文件在程序打包发布之后无法正常访问了,下面就来记录一下解决方案

使用aardio直接向HTML中输出js变量

上一篇学习记录3.使用Vue+JSON实现aardio与HTML内容互动中使用了aardio作为中间层输出json格式数据的方法,然后在HTML的js中又使用$.getJSON()来获取数据.最新研究表明,还可以有更简单套路,那就是直接在main.aardio(是程序主界面的aardio代码,不是HTML中的那个)向HTML中输出js变量,当然用的是aardio的语法,完整代码如下:

import win.ui;
import sqlite;
import web.json;
/*DSG{{*/
mainForm = win.form(text="webkit浏览器支持库";right=759;bottom=469;border="none";mode="popup")
mainForm.add()
/*}}*/

//导入webkit支持库
import web.kit.form;
import web.kit.jsFunction;
var wbKitView = web.kit.form(mainForm);//创建webkit浏览器窗口

//使用external接口定义网页脚本可调用的本地函数
wbKitView.external = {

    aardioCall = function(str){ 
        mainForm.msgbox(str);
    };

    getData=function(){
        var data={};
        var db=sqlite("\res\database.db");
        dbTable=db.getTable("SELECT * FROM lawer");
        jStr=web.json.stringify(dbTable,true);
        //mainForm.msgbox("JSON数据:"+jStr);
        return jStr;
    }
}

//打开链接时触发
wbKitView.onNavigation = function(url,navigationType){ 
    if( navigationType == 0/*_WKE_NAVIGATION_TYPE_LINKCLICK*/ ){

    }
    return true;
}

import wsock.tcp.simpleHttpServer;
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") ); 

//可以使用CSS选择器获取HTML节点对象
wbKitView.querySelector("#header .title-bar .title").innerText = "我 的 软 件";

//添加可拖动边框
import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);

//添加阴影
import win.ui.shadow;
win.ui.shadow(mainForm);

//限定最大化范围
import win.ui.minmax;
win.ui.minmax(mainForm);

mainForm.show();
win.loopMessage();

这里主要是import了sqlite和web.json两个库,然后在wbKitView.external里面增加getData的函数:

//使用external接口定义网页脚本可调用的本地函数
wbKitView.external = {

    aardioCall = function(str){ 
        mainForm.msgbox(str);
    };

    getData=function(){
        var data={};
        var db=sqlite("\res\database.db");
        dbTable=db.getTable("SELECT * FROM lawer");
        jStr=web.json.stringify(dbTable,true);
        //mainForm.msgbox("JSON数据:"+jStr);
        return jStr;
    }
}

这段代码的意思其实就是给HTML的js增加了个新的函数可被调用,在HTML中调用需要用external.getData()这种格式,因为是写在external对象下面的函数嘛

HTML/main.aardio关键代码

//前面的样式和js引用什么的就省略了,主要贴一下Vue和js代码部分
    <div id="out">      
        <ol>
            <li v-for="r in rows">
            {{r.name}}
            </li>
        </ol>
    </div>
    <div id="footer">
        <button onclick="javascript:external.aardioCall('hello')">点击这里调用external.aardioCall('hello') </button>
        <button onclick="javascript:alert(external.getData())">获取JSON数据</button>
    </div>
    <script>
        var jData=eval(external.getData());  //这里注意一定要把调用external.getData()返回的JSON数据用eval()函数处理一下,否则是不会被当做JSON类型数据对待的!
        var v=new Vue({
            el:"#out",
            data:{
                rows:jData
            }
        })
    </script>

重点内容再次强调一遍
1. 在aardio代码中对wbKitView.external增加自定义的函数
2. 在HTML的js中调用external.自定义函数名
3. 获取函数返回的JSON字符串后一定要用eval处理一下,否则不会作为JSON格式数据对象对待,导致很多莫名其妙的错误

打包发布

aardio对于导入的资源文件(我这里是SQLITE数据库文件),默认是作为内嵌资源来进行发布的,也就是说会将资源文件中的所有文件一并打包整合到exe文件中去,但是对于使用HTML开发界面的程序而言,就会出现访问域相关的一些错误,也就是开头提到的,程序写好了,在aardio中直接调试运行都是ok的,但是打包后的程序却显示不出来数据,原因就在这里,所以需要手工设置一下资源文件的属性,将内嵌资源设置为false

这样再发布程序后会在Publish文件夹中看到,除了exe和lib文件夹外,多出来一个res文件夹,这里面就是我们引入的资源文件,有了这个真实的路径,再运行程序都不会出现问题啦~