多端适配方案之native-adapter

1,639 阅读2分钟

Native-adapter介绍

Native-adapter是一个极具通用性和扩展性的多端功能适配的轮子,在集成各个platform能力的情况下,具有开箱即用,健壮性,扩展性和易维护性的特点,一次调用多端受益

不同模式之间的比较

开发方案优点缺点
纯原生体验好、速度快存在比较严重的学习成本,不灵活,需要发版审核,增加包体积
混合开发框架体验一般、速度一般、可适配多端、开发速度快存在学习成本,需要发版审核
Native-adapter 多端适配方案(多端+h5)灵活、工作量小、学习成本低,易维护,api统一化、一次调用多端受益,非原生部分调整无需审核上线通信成本高

多端兼容方案

Bad case

这可能是最差的一个case,h5判断所在的环境,去调用不同api方法,这个case的问题是,业务逻辑特别复杂,功能耦合非常严重,也基本上没有什么复用性。

Adapter实现方案

Adapter实现原理

Adapter 未来适用端

  • Hybrid h5开发

  • 公众号

  • 小程序webview h5

  • h5

  • .....

Adapter api规划

  • 设置登录态
native.setLogin({k:v, k1: v1, ...})
/**
k: 设置cookie的key值
v: 设置cookie的value值
兼容性:目前支持小程序、微信、h5
**/
  • 判断端
native.in(channel);
/**
channel: 端(APP、wechat、M、wxMini)
兼容性:目前支持小程序、微信、h5
**/
  • 关闭当前页面
native.close();
/**
兼容:目前支持小程序、微信、h5
**/
  • 页面跳转
native.skipToUrl(url);
/**
url: 跳转地址
兼容:支持小程序、微信、h5
**/
  • 跳转到登录页面
native.enterLogin({redirectUrl: url})
/**
redirect: 重定向地址
**/
  • 返回到首页
native.enterHome()
  • 跳转到原生页面
native.enterNativePage({page: ''})
/*
*page: native 页面地址
*/
  • 判断登录状态
native.isLogin()
/**
兼容:目前支持小程序、微信、h5、app
**/
  • 设置标题
native.setTitle({title})
/**
title: 标题
兼容:目前支持小程序、微信、h5
**/
  • 设置右侧按钮
native.setRight({ type: 'close'})
/**
* type: 按钮类型 关闭close 刷新refresh 分享share
* options: 分享配置 {title, desc, image, url}
**/
  • 调用分享
native.share({title, desc, image, url}, cb)
/**
title: 标题
desc: 描述
image: 分享图片
url: 页面地址
cb: 回调函数
兼容:目前支持小程序webview调分享
**/
  • toast
native.toast({title})
  • 下载
native.downloadFile({url}, cb)
  • 选择上传
native.uploadFile({type: 'image'}, cb)
  • 获取位置信息
native.getLocation()
  • 向原生部分增加监听
native.addNativeEventListener(eventType, callback)
  • 执行监听
native.emitNativeEvent(eventType, params)
  • 移除原生监听
native.removeNativeEventListener(eventType)

.....

产出列表

image.png