Onsen-UI not loaded?

Asked 2 years ago, Updated 2 years ago, 162 views

I am using the onsen-UI.
I am using Visualstudio.
The UI slide menu or hamburger? icon can move and shift pages normally.

However, the click and sensor parts do not work as shown in the source below.

I have tried and tried various things online, but I am troubled because I cannot solve them.
I would appreciate it if you could let me know.

You can use the onclick event.

<ons-button modulator="large" (click)="mytest()">Start</ons-button>

I rewritten this click part to onclick to avoid it.
But the acceleration sensor doesn't work, so I was checking various things.
Then I wrote the code to use the sensor, but it doesn't seem to work.

var watchID = null;

// Wait for cordova to load
document.addEventListener("deviceready", onDeviceReady, false);

// Acceleration sensor update time
var options = {frequency:1000}; // Updated every second

// Sensor return value
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

alert(watchID);

// event occurrence
function onSuccess (acceleration) {

    // x-axis
    varx = acceleration.x;
    // y-axis
    variable = acceleration.y;
    // z-axis
    varz = acceleration.z;

    document.getElementById('xDir') .innerHTML = x;
    document.getElementById('yDir').innerHTML=y;
    document.getElementById('zDir').innerHTML=z;


I put it in this source for debugging purposes. alert(watchID);
is not working.

The X, y, and z values for the sensor are also not returned.

JavaScript files are placed as shown in the image.
Visualstudio File Placement

The HTML header is written like this.

<meta http-equiv="Content-Security-Policy" content="default-src'self'''unsafe-inline'data:gap:https://ssl.gstatic.com;style-src'self''unsafe-inline';media-src*">
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scale=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="css/onsen-css-components.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<!--
    <script src="js/angular-onsenui.min.js">/script>
    <script src="js/angular.min.js"></script>
-->
<script src="js/onsenui.min.js"></script>
<script src="js/main.js"></script>
<script src="js/onsen_tp.js"></script>

The reason why we are commenting on angular is to see if there is a conflict.
There are no onsen-UI APIs or events before or after commenting.

The plug-in is being installed.
Visualstudio plug-in screen

2:https://i.stack.imgur.com/Jxbec.png

I tested this source by adding it, but the alert is not working.

ons.ready(function(){
//
Ready to invoke Cordova API console.log (window.device);
alert("ok";
});

I tried again and got an OK.
Let's check the click event now.
Also, the sensor does not work.
I'm debugging the actual machine.
This app works fine when you make it with a web app.
I was able to use the sensor even with the smartphone I was using for debugging.

The sensor and click do not respond to real-world debugging.

I received a reply from ons.ready, so I wrote down the sensor to set it up when this event occurs, but the situation remained the same.

ons.ready(function(){
// Ready to invoke Cordova API

// Acceleration sensor update time
var options = {frequency:1000}; // Updated every second

// Sensor return value
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

});

At the end of the Cordova template, I found three important lines of script.
I'm copying this and trying it out.
The browser emulator did not change, so I am trying to check with the actual device.

April 11, 2018
I copied and built three lines of JavaScript that I found at the bottom of the Cordova template the other day, but there was no change.

April 12, 2018, self-resolved.
    
It seems that the only click event is onclick.
When I logged in to Monaca and looked at the template, onclick was used.

Also, regarding the sensor, I wrote the code below and it was done.

function onDeviceReady(){
        console.log("The sensor is now available!");
    }

(click) doesn't seem to exist,
I logged in to Monaca today and checked the template and found that onclick was used.

I was able to use sensors in Visualstudio's browser emulation.
Browser Emulation Motion Sensor Value
    

javascript android onsen-ui visual-studio

2022-09-30 21:29

1 Answers

It seems that the only click event is onclick.
When I logged in to Monaca and looked at the template, onclick was used.

Also, regarding the sensor, I wrote the code below and it was done.

function onDeviceReady(){
    console.log("The sensor is now available!");
}

(click) doesn't seem to exist,
I logged in to Monaca today and checked the template and found that onclick was used.

I was able to use sensors in Visualstudio's browser emulation.
I solved it myself, so I wrote it again as an answer.
I'm sorry I'm not used to using it.


2022-09-30 21:29

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.