整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JS 判斷瀏覽器類型,獲取位置信息,如何讓手機震動

          JS 判斷瀏覽器類型,獲取位置信息,如何讓手機震動

          如標題所說,這篇文章就是來告訴大家怎么去解決這個三個問題。

          答案是使用JavaScript 中的navigator 對象。

          • 這個對象可以做很多事情

          判斷是否是安卓

          • var isAndroid=/Android/i.test(navigator.userAgent);

          判斷是否是IOS系統

          • var isIOS=/iPhone|iPad|iPod/i.test(navigator.userAgent);

          判斷是否是手機瀏覽器

          • var isMobile=/mobi/i.test(navigator.userAgent.toLowerCase());

          • console.log(isAndroid);

          • console.log(isIOS);

          • console.log(isMobile);

          判斷是否正常聯網

          • navigator.onLine // true

          讓手機震動

          • 首先判斷瀏覽器是否支持

          • var supportsVibrate="vibrate" in navigator;

          • if(supportsVibrate){

          • // 振動1秒

          • navigator.vibrate(1000);

          • } else {

          • console.log('不支持震動');

          • }

          • 震動多次還可以傳數組

          • // 參數分別是震動3秒,等待2秒,然后振動1秒

          • navigator.vibrate([3000, 2000, 1000]);

          • 如果想停止震動,你只需要向navigator.vibrate方法里傳入0,或一個空數組:

          • navigator.vibrate(0);navigator.vibrate([]);

          獲取地理位置信息

          • navigator.geolocation.getCurrentPosition(); 在pc端使用誤差挺大的。手機上測試經度還是不錯的,當然還可以通過配置enableHighAcuracy設置為高經度模式,默認為false。

          • navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {

          • enableHighAcuracy: true,

          • timeout: 5000,

          • maximumAge: 3000 });

          • 具體使用方法可以參見w3cshool中HTML5 地理定位 章節,用法還是很簡單的。

          來越多的開發者熱衷于使用html5+JavaScript開發移動Web App。不過,HTML5 Web APP的出現能否在未來取代移動應用,就目前來說,還是個未知數。那么,有什么辦法,既可以使用HTMl5開發應 用,又可以將其簡單封裝成APK文件呢?

          一、Android SDK中的WebView

          1.在要Activity中實例化WebView組件:WebView webView=new WebView(this);

          2.調用WebView的loadUrl()方法,設置WevView要顯示的網頁:

          ? 互聯網用:webView.loadUrl("http://www.qietu.com");

          ? 本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets 文件中

          3.調用Activity的setContentView( )方法來顯示網頁視圖

          4.用WebView點鏈接看了很多頁以后為了讓WebView支持回退功能,需要覆蓋覆蓋Activity類的onKeyDown()方法,如果不做任何處理,點擊系統回退剪鍵,整個瀏覽器會調用finish()而結束自身,而不是回退到上一頁面

          5.需要在AndroidManifest.xml文件中添加權限,否則會出現Web page not available錯誤。

          ? <uses-permission android:name="android.permission.INTERNET" />

          缺點:如果是載入的是普通網頁,沒有什么問題,但如果是html5,封裝后,在android2.3以上才能正常訪問,android2.2及以下,SDK中的WebView還沒完全支持HTML5

          下面是具體例子:

          MainActivity.java

          ??? package com.android.webview.activity; ?

          ??? import android.app.Activity; ?

          ??? import android.os.Bundle; ?

          ??? import android.view.KeyEvent; ?

          ??? import android.webkit.WebView; ?

          ??? public class MainActivity extends Activity { ?

          ??????? private WebView webview; ?

          ??????? @Override

          ??????? public void onCreate(Bundle savedInstanceState) { ?

          ??????????? super.onCreate(savedInstanceState); ?

          ??????????? //實例化WebView對象 ?

          ??????????? webview=new WebView(this); ?

          ??????????? //設置WebView屬性,能夠執行Javascript腳本 ?

          ??????????? webview.getSettings().setJavaScriptEnabled(true); ?

          ??????????? //加載需要顯示的網頁 ?

          ??????????? webview.loadUrl("http://www.qietu.com/"); ?

          ??????????? //設置Web視圖 ?

          ??????????? setContentView(webview); ?

          ??????? } ?

          ??????? @Override

          ??????? //設置回退 ?

          ??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

          ??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

          ??????????? if ((keyCode==KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

          ??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

          ??????????????? return true; ?

          ??????????? } ?

          ??????????? return false; ?

          ??? }

          在AndroidManifest.xml文件中添加權限

          ??? <?xml version="1.0" encoding="utf-8"?>

          ??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

          ????????? package="com.android.webview.activity"

          ????????? android:versionCode="1"

          ????????? android:versionName="1.0">

          ??????? <uses-sdk android:minSdkVersion="10" />

          ??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

          ??????????? <activity android:name=".MainActivity"

          ????????????????????? android:label="@string/app_name">

          ??????????????? <intent-filter>

          ??????????????????? <action android:name="android.intent.action.MAIN" />

          ??????????????????? <category android:name="android.intent.category.LAUNCHER" />

          ??????????????? </intent-filter>

          ??????????? </activity>

          ??????? </application>

          ??????? <uses-permission android:name="android.permission.INTERNET"/>

          ??? </manifest>

          二、使用PhoneGap

          ??? PhoneGap是一個用基于HTML,CSS和JavaScript的,創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位,加速器,聯系 人,聲音和振動等,此外PhoneGap擁有豐富的插件,可以以此擴展無限的功能。PhoneGap是免費的,但是它需要特定平臺提供的附加軟件,例如 iPhone的iPhone SDK,Android的Android SDK等,

          詳細方法請見:http://phonegap.com/start#android

          優點:在Eclipse中加入SDK,編程自由,完美適應不同設備屏幕大小,適合高手使用。

          缺點:沒有使用布局,直接加載網頁,不能添加廣告。

          ----------------

          切圖網(qietu.com)最早將psd轉html服務模式帶到國內,并首個提供響應式、webapp前端開發的公司。專注web前端開發技術,關注用戶體驗,加我們公眾微信賬號:qietuwang(長按復制)

          續熬夜看了 N 場比賽以后,你已經走火入魔,不看球就不舒服。白天沒有比賽怎么辦?Google 來幫你想辦法。

          Google 剛推出了一系列瀏覽器小游戲,統稱為 Kick with Chrome。其中共包括三款小游戲:Infinite Dribble、Space Kick 和 Shootout。只要一部智能手機或者平板就可以玩游戲。當然,用電腦也不是不可以,更大屏幕還能支持多人對戰模式。

          在 Infinite Dribble 中,你要用手機控制足球來躲避防守,而 Space Kick 要你盡可能遠地把球踢向空中。Shootout 中有一個守門員,你需要突破防守讓球進網。

          每個小游戲都有多人對戰版本,但只能在電腦上使用。Google 推出這一系列小游戲,與其說娛樂不如說是炫技:游戲中用到了一系列瀏覽器技術,例如 webRTC 數據通道、加速計、WebSockets、HTML5 音頻、Google App Engine、Google Compute Engine以及全屏和震動 API。

          Kick with Chrome 證明了電腦與移動端瀏覽器已經可以提供類似于應用的體驗。如果你現在閑著無聊,那就打開玩一會吧。

          戳我玩游戲

          相關文章

          精彩評論 0

          新聞

          熱門文章推薦


          主站蜘蛛池模板: 一区在线免费观看| 精品深夜AV无码一区二区| 无码人妻AⅤ一区二区三区| 国产成人精品视频一区| 99热门精品一区二区三区无码| 日本在线一区二区| 伦理一区二区三区| 免费精品一区二区三区第35| 国产激情一区二区三区在线观看| 亚洲av无码一区二区三区四区| 日韩精品乱码AV一区二区| 国产免费一区二区视频| 欧洲精品无码一区二区三区在线播放 | 国产在线精品一区二区三区直播| 视频一区二区在线播放| 一区二区高清在线| 国精品无码一区二区三区左线 | 美女视频一区三区网站在线观看| 国产精品高清一区二区人妖| 亚洲一区二区三区在线网站| 国产小仙女视频一区二区三区| 亚洲精品色播一区二区| 亚洲国产成人久久一区WWW | 久久亚洲中文字幕精品一区四| 国产精品一区二区av不卡| 久久国产精品一区免费下载| 2020天堂中文字幕一区在线观| 日韩一区二区在线播放| 狠狠做深爱婷婷综合一区| 大香伊人久久精品一区二区| 亚洲Aⅴ无码一区二区二三区软件| 一夲道无码人妻精品一区二区| 国产福利微拍精品一区二区| 国产一区二区三区视频在线观看| 视频在线观看一区二区| 亚洲电影唐人社一区二区| 国产av福利一区二区三巨| 一区二区三区视频在线| 国产成人精品一区在线| 国产精品视频免费一区二区| 天堂资源中文最新版在线一区|