Vue.js實戰——開源H5跨移動平臺的多媒體API_20

一、目標

1. 主要功能是獲取經緯度、拍照、錄音、獲取指南針等強依賴各底層平臺（指的是瀏覽器內核、操作系統等）的多媒體功能；
2. 支持的平臺包括：Mobile Chrome 瀏覽器、Android App、IOS App（技術不熟，時間不充足，未實現）、微信公衆號、微博公衆號、Facebook 等平臺（因爲老被封號，還有一些問題不好解決，放棄）；

二、方案

1. 涉及平臺衆多，但是都有一個 Webkit 內核(或者說 Webview)，所以技術選型時，儘量考慮通用技術,能夠直接適配所有的業務場景；
2. 經過初步的驗證，發現 Web 瀏覽器、Android App 均能較好地支持 H5 原生能力（原生獲取經緯度、原生拍照、原生錄音），而且微信公衆號、Android 平臺還自己單獨封裝了一套 API 來實現這些能力；
3. 綜合考慮，使用 H5 原生+JS 平臺+JS 的 ES6 語法來實現所有平臺的適配，這樣工作量較小（多個平臺，一套代碼）；
4. 考慮當前 JS 平臺的流行程度、團隊技能樹以及 API、文檔的友好程度，選擇 Vue.js 框架作爲頁面和業務邏輯的 JS 框架，同時使用 vue-cli 作爲腳手架、npm 作爲 js 平臺的打包框架來調試和出包(當前代碼未體現，但在本人的其它項目中有體現)；

三、實現

1. 本代碼在 Android App、微信公衆號、Android/IOS Chrome 瀏覽器中經過驗證；
2. 考慮到各平臺的差異性，本基礎 API 基本上只有標準的實現，沒有具體的業務邏輯，業務邏輯代碼在更上層的業務 js 中，限於商業考慮，無法共享給大家，抱歉；
3. 本人在此項目之前，基本上只有後臺代碼的開發經驗，所以此處特別能接受 JS 的 ES6 語法，並在代碼中大量應用了類、繼承和靜態方法；
4. 開源代碼地址：woollay/multi-media-js。歡迎大家來完善:)

四、使用

1. 業務代碼中引用 platform.js（在 Android/IOS 平臺 App 使用時，須保證 UserAgent 必須有相關關鍵字：android/ios，其它平臺不需要額外的任何處理）：

//注意相對路徑
import Platform from '../lib/platform'

2. 初始化平臺對象：

let platParam = {
    success: (resp) => {
        //初始化成功後執行的操作
        _initBusiness(...);
    },
    error: (resp) => {
      ...
    },
    data: ...
};
let platform = new Platform(platParam);

3. 調用 API：

getLocation(callback) {
  platform.getLocation({
      success: (newLocation) => {
        callback(newLocation);
      },
      error: (resp) => {
        ...
      },
  });
}

4. 特殊說明：在 Android App 時，會涉及原生 js 和 Java 代碼的交互過程，請關注我的博客，裏面有詳細的介紹：
   Vue.js 實戰——開發 Android Hybird App 之 Webview 基礎配置_12
   Vue.js 實戰——開發 Android H5 App 之 Webview 高級配置_13
   Vue.js 實戰——H5 拍照遷移至 Android App_14
   Vue.js 實戰——封裝 Android H5 App 的錄音組件_15
5. 關鍵代碼：

import Weixin from "./weixin/weixin";
import Android from "./android/android";
import IOS from "./ios/ios";
import Web from "./web/web";
import Weibo from "./weibo/weibo";

/**
 * Core.js is a javascript platform. 
 * It can be used in android/ios/weixin/web browser,etc.
 */
export default class Platform {
    constructor(param) {
        let language = Platform.getLanguage();
        console.log("current language is:" + language);
        this.language = language;
        param.language = language;

        this.user = param.user;
        this.platform = _getPlatform(param);
    }

    static getLanguage() {
        let language = (navigator.language || navigator.browserLanguage).toLowerCase();
        if (language !== "zh-cn" && language !== "en-us") {
            language = "en-us";
        }
        return language;
    }

    static getName() {
        return _getName();
    }

    getLocation(param) {
        this.platform.getLocation(param);
    }

    registerCompass(param) {
        this.platform.registerCompass(param);
    }

    unregisterCompass(param) {
        this.platform.unregisterCompass(param);
    }

    takePicture(param) {
        this.platform.takePicture(param);
    }

    startRecord(param) {
        this.platform.startRecord(param);
    }

    stopRecord(param) {
        this.platform.stopRecord(param);
    }

    uploadVoice(param) {
        this.platform.uploadVoice(param);
    }

    playRecord(param) {
        this.platform.playRecord(param);
    }

    shareToWeibo(param) {
        this.platform.shareToWeibo(param);
    }

    shareToWeixin(param) {
        this.platform.shareToWeixin(param);
    }

    shareToMoments(param) {
        this.platform.shareToMoments(param);
    }
}

/**
 * Get the type of platform. [Inner method]
 */
let _getPlatform = (param) => {
    let name = _getName();
    switch (name) {
        case "weixin":
            return new Weixin(param);
        case "weibo":
            return new Weibo(param);
        case "web":
            return new Web(param);
        case "android":
            return new Android(param);
        default:
            return new IOS(param);
    };
}

/**
 * Get the type of platform. [Inner method]
 */
let _getName = () => {
    let userAgent = navigator.userAgent;
    let browserTypeRegExp = new RegExp("MicroMessenger");
    let isWx = browserTypeRegExp.test(userAgent);

    let weiboTypeRegExp = new RegExp("Weibo");
    let isWb = weiboTypeRegExp.test(userAgent);

    let name = "unknown";
    if (isWx) {
        name = "weixin";
    } else if (isWb) {
        name = "weibo";
    } else {
        let regExp = new RegExp("Chrome|Mac");
        let isWeb = regExp.test(userAgent);
        if (isWeb) {
            name = "web";
        } else if ("android" === userAgent) {
            name = "android";
        } else {
            name = "ios";
        }
    }
    console.log("current platform is:" + name);
    return name;
}