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;
}