1. Get the location

HTML5 geolocation API allows JS programs to ask the browser for real information about the user. Mobile terminal uses GPS to obtain the location, which is very accurate. However, the browser of the Geolocation API always asks for permission before accessing it, and if you agree, you get the location, otherwise you don’t.

Geolocation objects get positions:

  • GetCurrentPosition – Gets location information once.
  • WatchPosition – Listens for the current position and executes the function when the position changes
  • ClearWatch – Clears the watchPosition

The specific user location code is as follows:

The navigator. Geolocation. GetCurrentPosition (success = > {the console. The log (success. Coords) / / contains the position precision of latitude and longitude, speed, altitude, latitude and longitude, altitude accuracy information}, fail = > { The console. The log / / for the cause of the failure (fail)}, {/ / four configuration parameters can increase the enableHighAccuracy: true, / / high precision timeout: 5000, / / timeout, in ms MaximumAge :24*60*60*1000,// location cache time in ms})Copy the code

The attributes and meanings of success.coords returned after the location was obtained are as follows:

  • Coords. Latitude – the latitude
  • Coords. Longitude – longitude
  • Coords. Led – altitude
  • Coords. Speed – speed
  • Coords. Accuracy – Latitude and longitude accuracy
  • Coords. AltitudeAccuracy – altitudeAccuracy
  • Coords. Heading – Direction, number of radians starting due north

For more details, check out HTML5 part 2: Getting User Location.

2. Shake it

The wechat event page often has “shake, get a good gift”, and pduoduo shake cash. Shake function is also very common. The Devicemotion event provided by HTML5 encapsulates the device’s motion sensor, provides the device’s acceleration, and also provides the device’s rotation rate. The “shake” effect can be realized by judging the motion state of the equipment.

Devicemotion Listens for events that change the phone’s acceleration:

  • Acceleration-acceleration
  • AccelerationIncludingGravity – acceleration of gravity
  • RotationRate – rotationRate
  • Interval – Indicates the interval for obtaining data

Examples of code to shake:

var shake_threshold = 4000; // Put the moving interference, Set a threshold /* Check before using */ if(window.devicemotionEvent){/* Add event */ window.addEventListener('devicemotion',function(eventData){ var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime-last_update)> 10) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; SHAKE_THRESHOLD if (speed > SHAKE_THRESHOLD) {alert(" SHAKE_THRESHOLD! ); // Do something } } }) }Copy the code

3. Determine the type of phone

var type="";
if (/android/i.test(navigator.userAgent)){
    type="android";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
    type="ios";
 }
Copy the code

4. Check the browser type

var browser={ versions : function(){ var u = navigator.userAgent, app = navigator.appVersion; Trident: u.iddexof (' trident ') > -1, //IE presto: u.iddexof (' presto ') > -1, // Opera webKit: U.ndexof ('AppleWebKit') > -1, // Apple, Google gecko: u.ndexof (' gecko ') > -1 && U.ndexof ('KHTML') == -1, // Firefox kernel Mobile:!! u.match(/AppleWebKit.*Mobile.*/)||!! U.match (/AppleWebKit/), // Whether for mobile terminal ios:!! u.match(/(i[^;] +; ( U;) ? CPU + / Mac OS X), / / ios terminal android: u.i ndexOf (' android ') > 1 | | u.i ndexOf (' Linux ') > 1, / / android terminal or uc browser iPhone: U.i ndexOf (' iPhone ') > 1 | | u.i ndexOf (' Mac ') > 1, / / is for the iPhone or QQ browser HD device: u.i ndexOf (' the ') > 1, / / whether the webApp: U.ndexof ('Safari') == -1 // Whether web should program, without header and bottom}; } (), Language: the navigator. BrowserLanguage | | the navigator. Language) toLowerCase ()} the language / / language Browser.versions. Mobile // Whether it is a mobile terminal browser.versions. Ios // ios terminal browser.versions Browser.versions. IPhone // Whether it is iPhone browser.versions. IPad // Whether it is iPadCopy the code

There are also a lot of mobile browsers. Students who make advertising plug-ins face different browsers blocking advertising every day, so they need to study each type of browsing. When writing plug-ins, you often need to handle certain elements individually, depending on the browser.

5 and take photos

Because the calling camera has the permission to be used, it can only be used locally. Online operation requires an HTTPS domain name. Call the webcam to take photos. Currently, browsers provide apis to directly access the user’s media devices (camera, microphone).

navigator.mediaDevices.getUserMedia

Function: Provides hardware interfaces for users to directly connect to cameras and microphones.

The navigator. MediaDevices. GetUserMedia (constraints). Then (function (mediaStream) {/ / success} the catch (function (error) {/ /} for failureCopy the code

Constraints specifies parameters for audio and video, such as:

{audio:true, video: {width: 1280, height: 720}}Copy the code

6. Making phone calls

There are basically contact phone numbers in the webpage information, contact us and other buttons, and the mobile terminal often needs to add the call function, so that users can make a call as long as they click on it.

Use the following code:

<a href="tel:phonenumber"> </a>Copy the code

The following two methods are invalid:

  • Call 10086
  • Dial the hotline

7. Texting

When you want to send a quick text message on a web page, android and ios write it the same way, but the result is different.

<a href="sms:10010? Body =TD"> </a>Copy the code

Android phone: After clicking, you can send TD as content directly to 10010.

Ios: Phone number 10010 when clicked? The body = TD.

Test various models, not compatible with all, finally remove the content, only keep the phone number.