H5如何調用APP方法？

H5如何與APP交互

開發中經常會遇到APP內嵌H5頁面，避免不了js和APP的之間的交互，vue調用再次記錄下。

理解不好，歡迎指點！

1、H5調用APP的方法

說明 以下示例：

• 其中 WebJs_Wechat爲APP定義方法名
• 在需要使用的頁面和APP交互

Android格式

注：參數格式爲 字符串

adwebkit是一個標識跟Android協商定義就好

window.adwebkit.WebJs_Wechat(JSON.stringify(params));

IOS格式

注：參數格式爲 對象

window.webkit.messageHandlers.WebJs_Wechat.postMessage(params);

Demo【app分享商品到小程序】

• APP中內嵌vue商城項目，示例：分享某個商品給好友功能。

• 當 觸發分享按鈕， 調用app定義的方法， 只需要傳對應參數給APP，其他邏輯拉起微信由app處理。

• 注意： 目前暫不支持分享至朋友圈。【如有需要可以用原生分享，跳轉H5頁面】

微信官方文檔——app分享到微信小程序

vue頁面中引入openInWebview， 並與APP交互

<script>
    import { openInWebview } from '@/components/mUtils'

export default {
    methods: {
        /**
        * 根據文檔：提供app分享需要的參數
        */
        toWeChat (e) {
            let shareUrl = '/page/otherPackage/pages/outInvite/outHome/outHome?id='+ this.goods.id +'&inviteId='+ this.memberConfig.member_id;

            let webUrl = this.axios.get_comm_url() + '/mobile/#/view?id='+ this.goods.id +'&inviteId='+ this.memberConfig.member_id;

            let params = {
                "title": this.goods.name, //標題
                "image": this.goods.photos_url, //商品圖片
                "path": shareUrl, //小程序路徑
                "webUrl": webUrl, //web路徑【用於低版本時會轉爲網頁形式分享，具體見文檔】
                "miniId": "微信小程序原始ID"
            }
            
			let webview = openInWebview();
            
            if(this.webview == "android") { //android
                if(e == 'weChat') {
                    window.adwebkit.WebJs_Wechat(JSON.stringify(params));
                }else { //朋友圈
                    window.adwebkit.WebJs_WechatMoments(JSON.stringify(params));
                }
            }else if(this.webview == "ios"){ //ios
                if(e == 'weChat') {
                    window.webkit.messageHandlers.WebJs_Wechat.postMessage(params);
                }else {
                 window.webkit.messageHandlers.WebJs_WechatMoments.postMessage(params);
                }
            }
        }
    }	
}

</script>

2、H5如何接收APP回傳的參數？

• 示例說明：
• 新建js文件，放調用app方法 ，獲取APP傳過來的token並保存.
• vue頁面中引入js文件 並調用方法。

/**
 * 微信綁定：  需要獲取app的token
 * @param {*} params 
 */
 export const getCommAppToken = () => {
     let webview = openInWebview();
     if(webview == 'android') {
         //調用安卓得到token ,安卓可直接return 得到值
         let toKens = window.adwebkit.WebJs_getToken();
         setCommAppToken(toKens); //保存token
         
     }else if(webview == 'ios') {
         //setStore(TOKEN_KEY, token); //保存token
         window.webkit.messageHandlers.WebJs_getToken.postMessage({});
     }

    // window.getAppToken = this.getAppToken; //ios需要回調在vue的mounted中
 }

<script>
   	import { getCommAppToken } from '@/api/commonApi'

    export default {
        created() {
            getCommAppToken();
        },
        mounted() {
            window.getAppToken = this.getAppToken; //ios需要回調
        },
        methods: {
            getAppToken(string){
                setStore(TOKEN_KEY, string); //保存，得到token
            },
        }
    }
</script>

3、判斷當前頁面所在環境

• userAgent 屬性是一個只讀的字符串，聲明瞭瀏覽器用於 HTTP 請求的用戶代理頭的值。

export const openInWebview = () => {
    var ua = navigator.userAgent.toLowerCase()
    var isUA = "h5"; //瀏覽器
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 微信瀏覽器
        isUA = "wx";
    } else if (ua.match(/QQ/i) == 'qq') { // QQ瀏覽器
        isUA = "qq";
    } else if (ua.match(/WeiBo/i) == "weibo") {
        isUA = "weibo";
    } else {
        if (ua.match(/Android/i) != null) {
            var isUA = ua.match(/browser/i) == null ? "android" : 'h5';
            if (isUA == "android") {
                isUA = (ua.split('android')).length - 1 <= 1 ? 'h5' : 'android';
            }
        } else if (ua.match(/iPhone/i) != null) {
            if (ua.match(/safari/i) == null) {
                isUA = "ios"; //原生ios
            }
        }
    }
    return isUA;
}