摘要：查看安装包版本信息查看信息提供扫描二维码打开网页。所以端发起网络请求的时候，需要使用，这样就可以避免这个问题参考资料什么是方案之和页面交互原理的原理实现示例三部曲基本用法
1. 为什么选择Hybrid开发方式
Hybrid开发效率高、跨平台(M /58APP/英才APP)
维护成本低,功能可复用
针对新手友好,学习成本较低
功能更加完善,性能和体验要比起web app好太多
部分性能要求的页面可用原生实现
Hybrid从业务开发上讲，没有版本问题，有BUG能及时修复
缺点
相比原生,性能仍然有较大损耗
不适用于交互性较强的app
2. Hybird 提前掌握那些问题Hybrid中Native与前端各自的工作是什么
Hybrid的交互接口如何设计
资源缓存策略，白屏问题
2-1 Hybrid中Native与前端各自的工作是什么Native与前端的界限，首先Native提供的是一宿主环境，要合理的利用Native提供的能力，要实现通用的Hybrid平台架构
nativeUI组件、消息类组件
通讯录、系统、设备信息读取接口
与Native的互相跳转，比如H5如何跳到一个Native页面，H5如何新开Webview做动画跳到另一个H5页面
账号信息管理 Native需要设计良好安全的身份验证机制
资源访问机制
Native首先需要考虑如何访问H5资源，做到既能以file的方式访问Native内部资源，又能使用url的方式访问线上资源
前端要做的事情就是封装调用Native提供的各种能力-Hybrid开发调试
2-2.webview 生命周期函数// 网页开始加载的时候调用
- (void )webViewDidStartLoad:(UIWebView *)webView{
}
// 网页加载完成的时候调用
- (void )webViewDidFinishLoad:(UIWebView *)webView{
}
// 网页加载错误的时候调用
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
}
2-3 Hybrid交互设计-JSBridge
1.Native调用前端页面的JS方法
2.前端页面通过JS调用Native提供的接口
两者之间的桥梁是Webview。app自身可以自定义url schema，并且把自定义的url注册在调度中心
1.JS to native
在每个版本会提供一些API，前端会有一个对应的框架团队对其进行封装，释放业务接口
/**login*/
CHRJSBridge.call("pagetansNative", {
action: "pagetansNative", //type类型是跳转native的
params: {
controllername: "to_login" //跳转native的对应页
},
isbacktomain: 0, //跳转后是否关闭当前，默认false
callbackFun:(params)=>{this.id=params.id}// 回调函数
});
handleConfirm(params) {
let jsonStr = JSON.stringify(params);
if (this.isIOS()) {
window.webkit.messageHandlers.testMethod.postMessage(jsonStr)
} else {
javascript: chrclient.onJsActionRequest(jsonStr)
}
}
## native to js
window.nativeMethod = function(methodrParams) {
console.log("nativeMethod");
let actionName = JSON.parse(methodrParams).action;
let actionParams = JSON.parse(methodrParams).params;
//console.log("methodrParams=====", actionName, actionParams);
window[actionName](actionParams);
}
## 2. 封装的CHRJSBridge／JavaScriptCore
主体内容:
小的DEMO
## 3. 这样做有一个前提是，Native本身已经十分稳定了.测试包
- 1.设置里面清除缓存。 - 2.查看安装包版本信息 - 3..查看cookie信息 - 4.提供扫描二维码打开网页。供前期没有开通入口，FE自测
## 4. H5-native
url scheme Native能捕捉webview发出的一切请求
chrmain://nativejump/main/web?params=
Native是有能力为前端注入所有需要的方法了
var messagingIframe = document.createElement("iframe");
messagingIframe.style.display = "none"
document.documentElement.appendChild(messagingIframe);
messagingIframe.src = url
注意,正常来说是可以通过window.location.href达到发起网络请求的效果的，但是有一个很严重的问题，就是如果我们连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。所以JS端发起网络请求的时候，需要使用iframe，这样就可以避免这个问题
5.参考资料
1.什么是Hybrid App
2.Native、Hybrid、React Native、Web App方案
3.Hybrid APP之Native和H5页面交互原理
4.JSBridge的原理
5.JSBridge实现示例
6.WebView三部曲：基本用法
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109766.html
摘要：本文转载自众成翻译译者文蔺链接原文译者注本文讲到的可能和我们通常理解的略有差异。文中部分主要讲到的是，这一点可能在一些开发者看来是有争议的。谈到，最好也是最简单的办法是使用免费开源的框架。需要快速开发打样那可能最好的选择。 本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/861原文：http://www.telerik.com/blogs/h...
摘要：查看安装包版本信息查看信息提供扫描二维码打开网页。所以端发起网络请求的时候，需要使用，这样就可以避免这个问题参考资料什么是方案之和页面交互原理的原理实现示例三部曲基本用法 1. 为什么选择Hybrid开发方式 Hybrid开发效率高、跨平台(M /58APP/英才APP) 维护成本低,功能可复用 针对新手友好,学习成本较低 功能更加完善,性能和体验要比起web app好太多 部分性能...
摘要：在被收购，同时把其中的核心层代码进行了开源，新版本后的进入商业化。将做成了一种插件式的方式，便于扩展。到今天，以上的购买都从移动端来，历时一年半。所以我们总结一些一般的演进流程按照不同的分类，做个简单的建议电商类工具类社交类游戏类方案 Native | Hybrid | Web App选型及演进方案 目录 App形态 Web App Native App Hybrid App ...
摘要：在被收购，同时把其中的核心层代码进行了开源，新版本后的进入商业化。将做成了一种插件式的方式，便于扩展。到今天，以上的购买都从移动端来，历时一年半。所以我们总结一些一般的演进流程按照不同的分类，做个简单的建议电商类工具类社交类游戏类方案 Native | Hybrid | Web App选型及演进方案 目录 App形态 Web App Native App Hybrid App ...
阅读 2388·2021-11-15 11:38
阅读 3498·2021-09-29 09:34
阅读 3516·2021-09-27 13:34
阅读 428·2021-09-24 09:47
阅读 2926·2019-08-30 15:53
阅读 1693·2019-08-26 13:54
阅读 1941·2019-08-26 13:43
阅读 431·2019-08-23 14:47
