JS调用App方法及App调用JS方法

Posted liuxinheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS调用App方法及App调用JS方法相关的知识,希望对你有一定的参考价值。

做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢?

 

写在前面:

  如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话,那么就需要考虑以下一些问题了。

  1. 方法命名规范。

        如果考虑到以后会有大量的方法,那么规范化的命名就很重要了,规范化的命名,既保证了名字的唯一性又保证了代码的可读性方便开发过程,也方便后期维护。

     举个栗子,  如果现在有一个方法,是关闭webview, js调用app的方法, 如果直接叫closePage, 那么根本看不出来是要调用App的方法,混乱且有可能被其他命名覆盖,那么如果叫 JAMS__closePage ,即所有的js 与App的交互的方法都加 JAMS 那么就很容易分辨了,且不易重名。

       2.安全性。

    如果在你的App内能打开其他的网页链接,那么这些接口的安全性也是需要考虑的,即保证在指定的webview或者授权的webview内这些方法才能被调用,这点很重要。

    第一种方法是app内判断webview地址来源,来匹配对用方法的使用权,显然这个每次添加新页及方法的时候,App都需要修改授权列表。

    第二种方法是,App打开webview的时候,如果是自己的业务H5那么调用的时候可以传入一个token,每次调用方法时都校验token。

 

一, js调用App 方法

  假设方法名为  JAMS__mark

 

  android 系统:

    window.android.JAMS__mark(params)   // @params为传入的参数, app内可以收到
 
  ios 系统:  
               
    window.webkit.messageHandlers.closePage.postMessage(params)   // @params为传入的参数, app内可以收到

       

然后可以封装一下 像这样

技术分享图片
export function JAMS__mark() {
    if (/android/i.test(navigator.userAgent)) {
        try {
            window.android.JAMS__mark(params)
        } catch (e) {
            console.log(e)
        }
    } else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) {
        try {
            window.webkit.messageHandlers.JAMS__mark.postMessage(params)
        } catch (e) {
            console.log(e)
        }
    }
}
技术分享图片

 

 

 

二、 App调用js方法

 

App调用js 方法需要js将方法挂载在window下,这样App才能调用到方法,

假设方法名叫    JAMS__success

 

window.JAMS__success = function () {

  // do some thing

  // if need some params ,you can alse return it

  return params;

}

需要主要的是如果需要返回一些数据给App,那么这些数据不能够通过异步来获取,也不能够有阻断进程的语句如alert,否者,app将不能够获取到正确参数,而是得到 undefined,  例如在方法里加个alert(‘1‘), 而 return 在 alert语句后。

 

(完)

 

转自:https://www.cnblogs.com/hanguozhi/p/9565105.html

以上是关于JS调用App方法及App调用JS方法的主要内容,如果未能解决你的问题,请参考以下文章

无法调用未定义 app.js:1 sencha 嵌套的方法“子字符串”

uni-app 项目引入第三方js插件,单个js文件引入成功,调用该插件方法

Js 怎么调用(function () 里的函数?

Android与js互相调用

Parse Server - 如何从 app.js 或 index.js 调用 Cloud 代码中定义的作业

小程序App()方法与getApp()方法