这次设计视频背景界面去测试一下之前自制的数据库接口。

代码下载及更多教程在我的公众号：For My Future

一.UI动态背景

    之前写短视频脚本时用到videoview，既然要制作视频背景，那么也需要用到这个控件。还有一个问题是我们的文本框不能够被videoview阻挡，文本，button等一些控件要显示到videoview之上，用到了elevation这个属性。

 ui.layout(
        <frame >
            <android.widget.VideoView  layout_gravity="center"  id="vd" h="{{device.height}}px" w="{{device.width}}" />
            <vertical elevation="1dp" padding="1sp">
                <vertical >
                    <vertical padding="16">
                        <text textSize="30sp" textColor="#ff0000" gravity="center" >服务器数据查询测试</text>
                    </vertical>
                    <vertical h="auto" align="center" margin="0 50">
                        <linear>
                            <card w="*" h="500" margin="0" cardCornerRadius="15dp" cardElevation="15dp" gravity="center" alpha="0.5">
                                <vertical gravity="center">
                                    <text id="t1" size="10" color="#dd000000" paddingLeft="20"/>
                                    <input id="qq" w="*" marginRight="30" marginLeft="30" singleLine="true" hint="请输入要查询的QQ号：" inputType="number"   textColorHint="#dd000000"/>
                                    <text id="t2" size="10" color="#dd000000" marginTop="10" paddingLeft="35"/>
                                    <text id="phone" singleLine="true" size="15" textIsSelectable="true" w="*" marginRight="30" marginLeft="30" singleLine="true" hint="查询结果显示" textColorHint="#dd000000" />
                                 <button id="find" style="Widget.AppCompat.Button.Colored" h='70dp' gravity="center">查询</button>
                                </vertical>
                            </card>
                        </linear>
                    </vertical>
                </vertical>
            </vertical>
        </frame>
    );

  并且设置全屏，

activity.window.setFlags(android.view.WindowManager.LayoutParams.FLAG_FULLSCREEN, android.view.WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏

  添加视频地址，并重复播放

ui.vd.setVideoPath("/storage/emulated/0/pictures/QQ/luming.mp4")
    ui.vd.start()
 
    threads.start(function() {
        sleep(10000)
        while (true)
            if (!ui.vd.isPlaying()) {
                ui.vd.start()
                sleep(10000);
            }
    })

界面展示，

  在写以上代码时，遇到了一些问题，列举如下：

1.videoview设置长宽的时候，发现视频播放总不能全屏，上下会留一些白框，如下图所示，

一开始我以为是视频本身的问题，换了视频源之后依然如此，当时长宽是这样设置的：

h="{{device.height}}px" w="{{device.width}}px"

后来，我改成了

h="{{device.height}}px" w="{{device.width}}"

只是w没加px单位，竟然能够全屏了。没加px应该默认识别为虚拟像素，更容易适配不同手机。

2.text文本无法复制，加上textIsSelectable="true"即可解决。

3.视频地址设置问题，之前写img控件，src资源设置为src=“file://./1.png”，只要把1.png移动到与当前脚本同一个目录级别即可识别，但是ui.vd.setVideoPath(“file://./luming.mp4”)识别不出来，必须写视频地址的绝对路径

ui.vd.setVideoPath("/storage/emulated/0/pictures/QQ/luming.mp4")。

二.查询功能实现

function receivemsg(qq){
    let url="http://39.101.69.250:88/qq.php?qq="+qq;
    let r=http.get(url);
   let result2=r.body.string();
   let result=(JSON.parse(result2)).phone
   if(result!=""){
     ui.phone.setText(result[0].phone)}
    else{ ui.phone.setText("数据库中没有此条数据！！！")}
    
}
ui.find.on("click",()=> {
    threads.start(function() {
        let temp=ui.qq.getText();
       receivemsg(temp);
  
    })
})

效果展示：

视频演示：

【Auto.js自制数据库接口测试（视频背景）-哔哩哔哩】

 https://b23.tv/A6jsdgb

代码下载及更多教程在我的公众号：For My Future