Tag: Web开发

在WKWebView和本机代码之间创建链接

在过去的一个月中,我一直在为对产品有一些特定要求的客户工作; 他们想要一个使用特定地图组件的应用程序,就像他们在网络应用程序中使用的组件一样。 这意味着两件事:javascript🙈并试图找出如何在本机代码和将包含地图的Web视图之间进行通信。 让我们花一些时间来概述问题。 我们在这里处理两个主要组件:用于容纳地图的WKWebView和本机用户界面。 我们希望在这些组件之间双向发送消息。 当用户与地图上的某些对象进行交互时,我们需要在本机代码中触发事件以执行操作,例如显示界面元素,或触发对新视图的选择。 我们还需要从本机代码向Webview发送消息,因此我们可以将所有繁重的工作委托给本机应用程序,以最大程度地减少javascript必须进行的计算。 对我们来说很幸运,WKWebView提供了我们需要的一切。 稍作修改,我们就可以对其进行配置,使其完全满足我们的需求! 设置Web视图是很简单的,而且有据可查,因此这里不再赘述。 您可以通过代码实例化它,也可以在Interface Builder中的视图中拖动一个并为其创建出口。 我选择了后者。 让我们使ViewController符合WKScripMessageHandler和WKNavigationDelegate: 不要忘记在viewDidLoad中将网络视图的na vigationDelegate设置为self! 好了,现在我们已经拥有了Webview设置的一部分。 稍后我们将再次讨论,但是首先,我们将深入研究一些javascript。 快速免责声明:我不是Web开发人员。 如果您是经验丰富的javascript专业人士,请避开下面的代码。 我们需要在javascript中做的就是创建一些函数来处理传入的响应,并将响应发送回Webview。 我希望您对设置index.html文件感到满意,所以我不会向您展示如何做到这一点。 现在,我们可能想做其他事情,而不仅仅是记录接收到的值,但是为了解释这个概念,这样做就可以了。 假设我们要在Web视图中保留一个人员列表,那么将从本地上下文中调用addPerson函数以将其添加到Web视图中。 可以调用sendNameToNative函数将消息发送回本机代码。 让我们添加最后一个构建块,以使一切正常工作! 我们需要在loadView函数中做一些事情,所以我们将重写它。 在这里,我们将为Web视图设置一些属性,以在调用sendNameToNative函数时侦听来自javascript的回调。 您可能需要根据设置视图的方式来摆弄这个。 您可能要做的一件事是将框架更改为等于view.frame,而另一处可能解决问题的方法是在最后一行之后添加view = webview 。 这可能会带来其他问题。 这里只剩下一件事要做,实际上是在向Webview发送消息。 这是我们难题的最后一部分; 实际将消息发送到Webview。 调用此函数使我们可以在Web视图中执行javascript。 在示例中可以看到,当我们要发送字符串时,需要在其周围添加”。 现在,我们可以在webView(_:didFinish 🙂函数中调用类似的函数来设置加载时的Webview,并在与本机用户界面交互后调用它以发送更多消息。 请记住,当您处理用户输入的属性时,您可能需要对其进行验证,以免在Web视图中执行恶意的javascript。 现在您已经确定了结构,可以开始疯狂了: 实际处理响应以触发本机代码中的某些动作,例如动画或segue。 添加更多处理程序以处理来自Web视图的不同响应,从而在两者之间创建紧密连接 恭喜你! 如果您正在阅读本文,那么您已经在WKWebView和应用程序的本机上下文之间创建了连接。 这提供了很多可能性,您可以根据需要进行扩展。 如果您为此创造了一些很棒的东西,请与我分享! 如果您喜欢这篇文章,请查看 我写 的 其他文章 ! […]

教程:如何使用Leaf

还可以学习叶子-一种可轻松生成视图的模板语言! 您可以在github上找到本教程的结果 本教程是如何设置Vapor 3项目的自然后续。 您可以先阅读该教程然后再回来,也可以跳过并继续阅读😊 指数 1.创建一个新项目 2.生成Xcode项目 3.配置您的项目以使用Leaf 4.创建您的第一个模板/视图 5.实施服务视图的路线 6.奖金:将数据传递到视图 7.从这里去哪里 1.创建一个新项目 蒸气工具箱非常好,让您可以使用任何git-repo作为模板轻松创建新项目。 由于我们将基于上述教程的结果,因此我们将使用它作为模板来创建一个新项目: 蒸气新项目名称–template = vaporberlin / my-first-route 注意:您可以通过在终端中输入vapor –help来查看蒸气工具箱的全部功能。 我们的命令将使用来自vaporberlin的 my-first-route作为模板创建一个名为projectName的项目(感谢vapor toolbox🤛🏻)。 2.生成Xcode项目 在生成Xcode项目之前,我们必须添加Leaf作为依赖项,并在Package.swift中更改包名称: // swift-tools-version:4.0 导入PackageDescriptionlet包=包( 名称:“ projectName”,//已更改 依赖项:[ .package(URL:“ https://github.com/vapor/vapor.git”,来自:“ 3.0.0”), .package(URL:“ https://github.com/vapor/leaf.git”,来自:“ 3.0.0”)//添加 ], 目标:[ .target(name:“ App”,依赖项:[“ Vapor”, “ Leaf” ]), .target(name:“ Run”,依赖项:[“ App”]), .testTarget(name:“ AppTests”,依赖项:[“ App”]), ] […]

使用React Native进行移动应用开发的利弊

React Native基本上是社交媒体巨头Facebook开发的框架。 它实际上是一个开源框架。 这个框架利用React架构模式来开发与iPhone,Android和其他应用程序相同的家庭用户界面。 Facebook通过React Native开发自己的智能手机应用程序。 好吧,人们可能会认为,因为它是Facebook的框架,所以关于它的一切都必须是好的。 但是,由于这个世界上没有什么是完美的,所以这个框架也有自己的缺陷。 下面给出了使用React Native的利弊。 优点 关于React Native最好的部分是它的结构。 框架的每个部分都可以顺利访问。 这有助于开发人员有效地使用它,或者毫无疑问地使用它。 有许多组件可以很容易地应用。 这使得开发过程非常快。 实际上,React Native的最大优势之一就是它是Facebook的产品。 该框架正在不断升级。 此外,引入了这些更新,以保持编码人员的实时体验,以提供更好的便利。 React Active缩短了应用程序开发时间。 因此,可以始终控制React Active应用程序开发的成本。 此外,该框架还允许Javascript编码人员为多个操作系统开发应用程序。 由于他们只需要基本代码,因此这成为可能。 React Native是满足动画播放或相关开发需求的最佳工具之一。 实际上,这些任务中最艰巨的任务可以60 fps的速度执行。 React Native应用程序以可靠和稳定的表现而享有盛誉。 在开发新应用程序的同时,还可以通过React Native更新已经存在的本机应用程序。 就更改而言,React Native非常用户友好。 一个引入的更改可以轻松执行或更新。 缺点 尽管React Native的负面影响要少得多,但还是有一些。 首先,开发的应用程序可能是可靠或安全的,但它们的性能并没有达到预期的最高水平。 由于有这么多现成的组件,因此实验范围变得很小。 React Native应用程序开发需要更少的本机代码。 尽管这是许多人都认为的优势,但是,这也是事实,对于完整的应用程序开发,在很多情况下本机开发也是必需的。 在将插件与应用程序集成时,这是必不可少的。 这里要提到的是,在使用React Native开发应用程序时,用户必须遵守Facebook的许可条款和条件。 尽管这并不是一个大问题,但是,任何与专利相关的问题都可能要求许可更新,因此需要谨慎。 如上所述,地球上的任何事物注定都有其自身的利弊。 React Native也是如此。 但是,最重要的部分是它的持续流行。 这是一个用户友好的工具,这是开发人员如此喜欢它的首要原因。

教程:如何建立一对多关系

在本教程的最后,您将了解如何实现并处理一对多和一对一的关系✨! 您可以在github上找到本教程的 结果 指数 1.创建并生成一个新项目 2.一对多/一对一/多对多 3.建筑模型:Pokemon(与用户有关) 4.调整模型:用户(定义与口袋妖怪的关系) 5.建筑控制器:PokemonController 6.调整控制器:UserController(删除相关的宠物小精灵) 7.调整视图:列出用户的所有宠物小精灵 8.调整视图:实现一个表单来创建新的口袋妖怪 9.从这里去哪里 1.创建并生成一个新项目 我们将使用上述教程的结果作为模板来创建我们的新项目: 蒸气新项目名称–template = vaporberlin / my-first-crud-using-leaf 在生成Xcode项目之前,我们必须在Package.swift中更改包名称: // swift-tools-version:4.0 导入PackageDescriptionlet包=包( 名称:“ projectName ”, 依赖项:[ .package(URL:“ https://github.com/vapor/vapor.git”,来自:“ 3.0.0”), .package(URL:“ https://github.com/vapor/leaf.git”,来自:“ 3.0.0-rc”), .package(网址:“ https://github.com/vapor/fluent-sqlite.git”,来自“ 3.0.0-rc”) ], 目标:[ .target(name:“ App”,依赖项:[“ Vapor”,“ Leaf”,“ FluentSQLite”]), .target(name:“ Run”,依赖项:[“ App”]), .testTarget(name:“ AppTests”,依赖项:[“ App”]), ] ) 现在在终端的根目录projectName /上执行: 蒸气更新-y […]

谷物之旅#10

#2 Google推出了Angular 2.0的最终发行版 #3如何反应本机模具 #4 Swift 3.0,不可预知的苹果官方程序版本 #5您的App Store优化指南(ASO) #6可变字体,一种用于灵活设计的新型字体 #7使用Sketch快速销毁并加快移动速度 #8吉拉新火车站7.2X和服务台3.2 #9人机工程学,UX设计与设计思维 #10 Adblock Plus酒吧和酒馆