Webview没有´在android中无法正确显示

Webview doesn´t display correctly in android

本文关键字：显示 android 没有 #180 Webview      更新时间：2023-10-21

我正在使用appcelerator studio%.2.0 GA webView和chartjs插件行更新。

有了下面的代码，我在Chrome这样的网络浏览器中有了一个完美的视图（没有webview），但在android智能手机或模拟器上它无法正确运行。在底部显示一条红线，在strokeGrid上显示一条双线。

有人帮忙吗？

这是代码：

Javascript-

var count = 0;
//
// create base UI tab and root window
//
var win = Titanium.UI.createWindow({  
title:'BtTest',
backgroundColor:'#eff2d8',
    layout: 'vertical'
});
var mainView = Ti.UI.createView({
    top: 0,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    backgroundColor: '#7cd0F7',
});
var webView = Ti.UI.createWebView({
    backgroundColor: '#F0F8FF',
    top:100, 
    left: 0,
    height: Ti.UI.FILL, 
    width: Ti.UI.FILL,
    cacheMode: Ti.UI.Android.WEBVIEW_LOAD_NO_CACHE,
    borderColor: 'black',
    url: 'html/lineChart.html'
}); 
mainView.add(webView);
function send(value)
{   
    Ti.App.fireEvent("app:fromChart", {message: value});
    Ti.API.info('Sent: ', value);
    count ++;
    Ti.API.info("Count: " + count);
}
function interval()
{
    setInterval(function()
    {   
        send(Math.floor(Math.random() * 100));
}, 500);
}   
interval();
win.add(mainView);
win.open();

HTML-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="../js/Chart.min.js"></script>
</head>
<body>
<canvas id="updating-chart" width="320" height="220"> </canvas>
<script>
    var N = 20;
    var zero_array = [];
    for (i = 0; i < N; i++)
    zero_array.push("");
    var canvas = document.getElementById('updating-chart'),
    ctx = canvas.getContext('2d'),
    startingData = {
    labels: zero_array,
    datasets: [
    {
        strokeColor: "rgba(255,0,0,1)",
        data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    }]
    },
    latestLabel = startingData.labels[0];  
    var lineOptions = {
    bezierCurve: false,  
    scaleOverlay : false,
    scaleOverride : false,
    scaleSteps : null,
    scaleStepWidth : null,
    scaleStartValue : null, 
    scaleLineColor : "rgba(0,0,0,1)", 
    scaleLineWidth : 1, 
    scaleShowLabels : true,
    scaleLabel : "<%=value%>",
    scaleFontFamily : "'Arial'", 
    scaleFontSize : 12, 
    scaleFontStyle : "normal", 
    scaleFontColor : "#666", 
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,1)",
    scaleGridLineWidth : 1, 
    pointDot : true,
    pointDotRadius : 0,
    pointDotStrokeWidth : 1,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false,
    animation : false,
    responsive: false,
    maintainAspectRatio: true
    };
// We wait for everything to be loaded
window.onload = function main() 
{
    // Get the context of the canvas
    var ctx = document.getElementById("line_example").getContext("2d");
    // Create the Chart object
    var line_example_chart = new Chart(ctx).Line(data,lineOptions);
    // Used for the labels on the X axis
    var label_idx = 1;
    Ti.App.addEventListener("app:fromChart", function(e)
    {
        var msg = e.message;     
        if(msg == 0) msg = 1;           
        line_example_chart.removeData();
        line_example_chart.addData([msg], label_idx++);                
    });
    window();
};
</script>

如果你是为旧版本的android构建的，那么appcelerator的webview不是基于Chromium的，这可能会导致事情看起来有点不同。你可以在这里阅读更多关于它的信息。

appcelerator:的WebView文档中的一句话

从Android 4.4（API 19级）开始，WebView组件基于Chromium，对其渲染引擎进行了许多更改。根据安卓版本的不同，网络内容的外观或行为可能有所不同。WebView没有与安卓版Chrome完全相同的功能。

相关文章：