移动端开发知识点

Hybrid App开发

app端调用H5端方法

App端调用H5端的方法，调用的必须是绑定到window对象上面的方法

window.say = (name)=>{
  alert(name)
}

• Android调用H5端方法：
  • Android通过loadUrl方法获取H5端挂载在window对象上的方法：mWebView.loadUrl("javascript:say('"+ username + "')")
  • Android通过evaluateJavascript()方法获取H5端挂载在window对象上的方法：mWebView.valuateJavascript("javascript:say('"+ username + "')"),new ValueCallback<String>(){}
• IOS调用H5端方法
  • Objective-C
  • Swift

H5端调用App端方法

• 安卓通过addJavascriptInterface注入

    // 这里的对象名 androidJSBridge 是可以随意更改的，不固定。
addJavascriptInterface(new MyJaveScriptInterface(mContext), "androidJSBridge");

// MyJaveScriptInterface类里面的方法
@JavascriptInterface
public aliPay (String payJson) {
  aliPayHelper.pay(payJson);
  // Android 在暴露给 H5端调用的方法能直接有返回值。
  return 'success';
}

H5调用安卓端暴露的方法

// 这里的 androidJSBridge 是根据上面注册的名字来的。
// js调用Android Native原生方法传递的参数必须是基本类型的数据，不能是引用数据类型，如果想传递引用类型需要使用JSON.stringify()。
const result = window.androidJSBridge.aliPay('string参数');
console.log(result);

• H5调用IOS暴露的方法

// 与android不同，ios这里的webkit.messageHandlers是固定写法，不能变。
// 不传参数
window.webkit.messageHandlers.register.postMessage(null);
// 传递参数
// 与android不同，ios这里的参数可以是基本类型和引用数据类型。
window.webkit.messageHandlers.register.postMessage(params);

H5端调用Android和IOS方法区分环境

/**
 * 判断手机系统类型
 * @returns phoneSys
 */
function phoneSystem() {
  var u = navigator.userAgent.toLowerCase();
  let phoneSys = ''
  if (/android|linux/.test(u)) {//安卓手机
    phoneSys = 'android'
  } else if (/iphone|ipad|ipod/.test(u)) {//苹果手机
    phoneSys = 'ios'
  } else if (u.indexOf('windows Phone') > -1) {//winphone手机
    phoneSys = 'other'
  }
  return phoneSys
}

// 调用
// 只区分方法的调用方式，其实参数的类型和方法的返回值都需要处理。
function call(message) {
  let phoneSys = phoneSystem()
  if (typeof window.webkit != "undefined" && phoneSys == 'ios') {
    window.webkit.messageHandlers.call.postMessage(message);
  } else if (typeof jimiJS !== "undefined" && phoneSys == 'android') {
    window.jimiJS.call(message);
  }
}

根据需求区分是哪端做（Native与H5职责划分）

• 关键页面、交互性强的界面使用Native
  • 导航组件、登录、支付、动画、默认页面、系统级别的UI组件、页面切换的转场
• H5开发页面
  • 列表页面、详情展示页面、图片轮播、表单提交页面、以及简单页面