onsen-UIが読み込まれていない?
onsen-UI使っています。
Visualstudioを使っています。
UIのスライドメニューというか、ハンバーガー?のアイコンの動きとページ偏移は、正常にできます。
でも、下記のソースのように、clickの動作とセンサーの部分が動きません。
色々ネット検索して試行錯誤していますが、解決できず困っています。
ご教授頂けましたら幸いです。
onclickのイベントは使えます。
<ons-button modifier="large" (click)="mytest()">開始</ons-button>
このclickの部分をonclickに書き換えて回避しました。
でも、加速度センサーが動かないので、色々と調べていました。
すると、センサーを使うようにコードを書きましたが、動いていない様子です。
var watchID = null;
//cordova 読み込みまで待つ
document.addEventListener("deviceready", onDeviceReady, false);
//加速度センサー 更新時間
var options = { frequency: 1000 }; // 1秒ごとに更新
//センサー戻り値
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
alert(watchID);
// イベント発生
function onSuccess(acceleration) {
// x軸
var x = acceleration.x;
// y軸
var y = acceleration.y;
// z軸
var z = acceleration.z;
document.getElementById('xDir').innerHTML = x;
document.getElementById('yDir').innerHTML = y;
document.getElementById('zDir').innerHTML = z;
このソースで、デバッグの為に入れた
alert(watchID);
が動かないのです。
センサーのX,y,zの値も、返ってきません。
画像のようにJavaScriptのファイルを配置しています。
HTMLのヘッダーは、このように書いています。
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com https://unpkg.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-scalable=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>
angularをコメントにしているのは、競合するのか確認するためです。
コメントにする前も、コメントにしてからもonsen-UIのAPIやイベントは、起きていないです。
2: https://i.stack.imgur.com/Jxbec.png
このソースを書き加えてテストしましたが、アラートがうごかないです。
ons.ready(function () {
// CordovaのAPIを呼び出す準備が整った
console.log(window.device);
alert("ok");
});
再度試したところ、ちゃんとOKが返ってきました。
これから、clickのイベントを確かめます。
また、センサーは、動きません。
今、実機デバッグしています。
このアプリは、ウェブアプリで作ったときは、正常に動作しています。
デバッグで使っているスマホでも、センサー使うことが出来ました。。
実機デバッグでも、センサーとclickが反応しません。
ons.readyから返事があったので、センサーを、このイベントが起きたら設定する様に書いてみましたが、状況は変わりませんでした。
ons.ready(function () {
// CordovaのAPIを呼び出す準備が整った
//加速度センサー 更新時間
var options = { frequency: 1000 }; // 1秒ごとに更新
//センサー戻り値
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
});
Cordovaのテンプレートの最後の方に、大事なスクリプト3行を見つけました。
これをコピペして、試しているところです。
ブラウザのエミュレータでは、変化なかったので、実機デバイスでの確認を試みています。
2018/04/11追記
先日Cordovaのテンプレートの下の方に見つけたJavaScriptの3行をコピペしてビルドまでしましたが変化ありませんでした。
2018/04/12自己解決しました。
clickのイベントは、onclickしかないようですね。
Monacaにログおインして、テンプレートを見たら、onclickが使われていました。
それからセンサーに関しては、下記のコードを書いたら、できました。
function onDeviceReady(){
console.log("センサーが使えるようになりました!");
}
(click)は、無いみたいですね、
今日Monacaにログインして、テンプレートを確認したら、onclickが使われていました。