h5和移动端的交互

h5页面和移动端的交互

最近公司做了一个app的项目，里面需要试题的展示，app那边对html代码的渲染做不到完全展示，所以需要h5的配合，我也有幸因此接触到了与移动端的交互方式
本人是做前端的，所以这里只说一下前端的写法

1、h5调用移动端的方法

在h5调用Android方法时需要一个通讯桥梁，这个通讯桥梁的名字可以双方商量后决定，

Android的调用方法：（其中JSBright是双方决定的通讯桥梁的名字，getPrintData是移动端的方法名，this.clickchecknum是传给移动端的参数，格式需要双方协商后决定）

window.JSBright.getPrintData(this.clickchecknum);

ios的调用方法：（ios的调用不需要通讯桥梁，getPrintData方法名，this.clickchecknum参数名）

window.webkit.messageHandlers.getPrintData.postMessage({
      params: this.clickchecknum,
});

2、移动端调用h5方法

移动端调用h5的方法比较简单，只要我们将移动端需要调用的方法挂载到window上，移动端就可以调用到
（getParams移动端需要调用的方法）

window.getParams = this.getParams;

注意：

1、在该项目中刚进入h5页面时是需要移动端传入一些参数来获取数据的，此时会出现移动端在第一次访问h5页面时调不到h5方法，第二次才会调用到。我们采取的方法是在首次进去h5时将所需的参数拼接在url中，然后在h5页面获取到参数后手动的去调获取列表的方法。

const listurl = window.location.href.split('?')[1];

2、app内嵌h5需要设置rem，在我们项目中使用的是amfe-flexible，自动转换
这个插件在ios中会有兼容性问题，插件是先获取到屏幕大小后再除以10来设置html的font-size大小
但在ios中使用会有获取不到屏幕宽度的情况，当获取不到屏幕宽度时html的font-size就为0，此时的页面就会变成空白页。
我们需要做的就是在进入页面时判断一下这个插件是否获取到了屏幕宽度，如果没有获取到就手动获取一下

		const htmlfontSize = document.documentElement.style.fontSize;
        // console.log(window.screen.width);
        if (htmlfontSize === '0px') {
            document.documentElement.style.fontSize = `${window.screen.width
                / 10}px`;
        }

这样就可以解决用了amfe-flexible插件后，ios偶现白屏的问题