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)
.....