Tag: JavaScript

我们的第一个React Native应用程序

在过去的2/3个月中，我们一直在使用React Native来构建一个本机iOS应用程序，以向客户端展示复杂的交互式用户流。 作为React.js领域的新手，您可能想知道为什么我们会选择做这样一个疯狂的事情，所以这就是故事了。 主要写给同事以了解技术决策和学习。 React Native帮助我们在更短的时间内交付了最小可行的产品，并以更高的质量提供了更多功能。 作为该项目的首席开发人员，利用ES6之类的本地开发经验有限，这是很有意义的。 尽管这是一个实验，但我以后肯定会在React Natives的一角。 选择React Native 现在，市场上肯定有很多选择可以帮助您构建移动应用程序，例如NativeScript，Ionic，当然还有Swift。 让我们从Swift开始，本机实现很棒，并且拥有其他选项没有的功能，但是我们没有内部专业知识，需要整个开发团队都可以访问的解决方案。 其次，NativeScript，Ionic和PhoneGap都是出色的竞争者，但整个空间都显得肿。 例如，您可能将NativeScript与Angular结合使用，从而增加了依赖性和复杂性。 在线上有大量文章可以帮助您权衡所有选择。 现在我们进入React Native。 正如创建者所描述的那样，它是“用于构建用户界面的Java脚本框架”，因此，这听起来像是一个极好的竞争者。 它也是较稳定的选项之一，可能会保留一段时间，值得我们花时间学习。 顾名思义，React是基于反应性数据流构建的，它仅具有单向数据绑定，从而大大简化了发送逻辑。 我们的规范是一个iOS应用程序，但未来可能会出现Android，因此我们也在这里介绍，因为React Native符合这两个规范。 您还可以使用其兄长React.js来构建Web应用程序。 由于易于开发，应用程序质量，性能以及支持React的生态系统，我不仅获得了极大的乐趣，而且感到React Native是该项目的正确选择。 出售React Native的两篇文章：IOS开发人员正在切换，Smashing Magazine考虑使用React Native。 如果您只是刚开始，Cam Jackson撰写了一篇非常不错的初学者文章。 挑选样板 现在有许多样板，具有许多不同的配置选项。 意大利辣味香肠和Ignite只是两个例子。 这两个项目都非常出色，但对于这种简单的设计规范而言，有点“胖”了。 我选择了一个样板，它提供了很好的技术基础，但没有太多与该项目无关的功能。 马特·麦克纳姆（Matt Mcnamee）做了出色的工作，创建了一个简单快速的样板来启动和运行应用程序，经过大量审查，我选择了此作为起点。 具有一些出色的功能，例如：Redux，React Router，Native Elements和内置的样式指南，您怎么会出错。 在这里查看。 现在所有这些项目都以Redux为标准，作为React的新手，我选择使用Redux的设置，但我自己没有参与。 原因：“除非您对香草React遇到问题，否则不要使用Redux” @dan_abramov — Redux的合著者。 应用架构 由于此应用程序主要显示了套管用户流程和交互，因此我们实现了智能组件和愚蠢组件。 我们使用React Router进行页面导航，因为样板已经很好地进行了设置，并且有许多在线文档可以帮助您进行配置。 智能组件的UI逻辑存储在状态中，容器组件将它们包装在一起。 这里有一些关于在React State和Redux […]

MVC。 对于那些喜欢委托的人。

模型，视图，控制器。 这个想法比任何Web应用程序都要古老得多。 最初在1979年被描述为“ MVC不是设计模式，它是一种架构模式，它描述了一种构造我们的应用程序以及该结构中每个部分的职责和交互的方式”。 不难看出如何将MVC应用于不仅仅是架构。 该模型处理所有幕后工作。 它包含所有可调整应用程序当前状态的功能。 它可能包含位置数据，游戏的当前棋盘状态，以及通常使应用程序运行的齿轮。 模型 控制器是处理用户输入并根据接收到的输入调用模型以运行特定功能的部件。 控制器应该是应用程序中相当轻便的一部分，因为它的唯一工作就是委派给模型和视图。 控制者 该视图是呈现给用户的应用程序当前模型的直观表示。 由于更改的速度和广度以及所述更改的呈现，该视图可能比其他两个视图更喧闹。 这被认为是不正确的做法，但是某些应用实际上会在任何状态更改时重新渲染整个视图。 视图 如果您仍然想知道为什么应该使用MVC，我希望您回顾一下此博客。 现在想象一下，三个定义的部分不再分开了，而不是将代码示例分开了，它们只是在底部的一行中。 那不会更难阅读吗？ 仍然很难弄清楚哪个部分是哪个代码？ 虽然MVC可能不是永远的项目，也不是每个人都可以，但给它一个机会。 您可能会发现它多么有用，令人惊讶。

使用JavaScript和快捷方式JS创建iOS 12快捷方式

我创建了一个库，可让您使用JavaScript创建快捷方式。 您可以在npm上以@ joshfarrant / shortcuts-js找到它，并在GitHub上找到文档。 注意：这篇文章中的某些图像仅将快捷方式js称为库，但是实际上可以在 @ joshfarrant / shortcuts-js中 找到该库 。 自从今年早些时候与iOS 12一起发布Shortcuts以来，我一直在花很多时间玩Shortcuts应用程序。 我很喜欢创建快捷方式来执行诸如在家中的控制设备之类的事情，将我的睡眠记录到Health应用程序中，并自动记录我的通勤周期并在上班时设置我的Slack状态。 快捷方式应用程序使您可以轻松地直接进入并开始构建功能强大的工作流程来帮助自动化您最常做的事情，但这并不完美。 使用“快捷方式”应用程序几周后，我开始看到“快捷方式”构建界面在哪里崩溃了。 大型快捷键的修改或重构变得很麻烦，尤其是在iPhone上，因为将十几个动作从一个点拖到另一个位置既费时又容易出错。 而且，没有简单的方法可以复制动作块或批量修改它们。 最后，这可能只是因为我正在测试中，所以可能会有一些错误。 作为开发人员，这开始让我感到沮丧。 在我的脑海中，“快捷方式”应用程序中的动作等同于代码行，因此，我渴望能够将常用的动作块组合为更大的功能，并在参数稍有不同的地方重用它们。 这些挫败感使我开始思考。 “快捷方式”应用程序只是一个旨在简化编写代码过程的界面，所以为什么我不能只掏出中间人自己编写代码？ 我开始考虑在“快捷方式”应用程序中进行挖掘，以试图弄清快捷方式的结构，以及如何开始在“快捷方式”应用程序之外生成它们。 为什么我不能直接切开中间人并自己编写代码？ 我想看的第一处是iCloud Shortcut共享服务。 我希望用来共享快捷方式的URL可能实际上包含一些编码的数据，然后在应用程序导入时将其解码。 不幸的是，很快，URL中的字符串只是一个标识符，而与快捷方式的内容毫无关系，因此我需要在其他地方查找。 几天过去了，当我滚动浏览“快捷方式”列表时，我注意到几周前我下载了一份快捷方式。 通过此快捷方式，您可以将快捷方式备份到iCloud，如果应用程序的数据库遭到损坏，这可能会很有用。 您将备份“快捷方式”，如果发生最坏的情况，则可以将这些文件重新导入“快捷方式”应用程序，一切都会恢复正常。 当然，这些文件必须包含构建快捷方式所需的所有信息。 我运行了备份，在文本编辑器中打开了一个快捷方式，这就是我的初衷。 可读性不强，但是我越来越近了！ 首先，我们可以看到从WF开始有许多对属性的引用，自从应用程序作为Workflow出现以来，这些引用就没有明显变化。 另外，从第一行我们可以看到这实际上是一个bplist文件，这是一个二进制属性列表，在Apple生态系统中非常常见。 我将文件扩展名从.shortcut更改为.bplist，然后再次尝试在XCode中打开文件。 🎉 这就是构成快捷方式的所有信息！ 我们可以看到用于设置图标的属性，快捷方式接受的输入以及（最重要的是）快捷方式的操作。 为了使内容更具可读性，我使用bplist-parser将bplist转换为JSON。 在这里，我们有一系列非常简单易懂的动作。 每个动作都有一个字符串标识符WFWorkflowActionIdentifier ，以及一个对象/参数字典WFWorkflowActionParameters 。 这些属性是到目前为止我所见过的所有“快捷方式”操作所共有的，并且是定义操作所需的唯一属性。 从这里开始，只需探索其他动作的属性，以及如何处理更复杂的交互（例如在动作中使用变量，以及将动作嵌套在If和Repeat等块内）就可以了。 现在，我已经有了一个用于快捷方式的基本模板，我可以开始编写一些代码来为我生成这些模板。 我从简单开始，编写了一个快速的Node脚本以生成将两个数字加在一起的快捷方式。 经过一些工作，这就是完整的生成的快捷方式的样子。 将这个JSON转换为bplist后，我将它空投到了iPhone上，很高兴看到它可以工作！ 现在我有了概念证明，我可以开始构建库了。 我决定选择TypeScript，因为它为像这样的非常结构化的库提供了完美的类型安全性。 […]

使用WebKit在iOS上进行JavaScript操作

作为iOS开发人员，有时我们希望将Web内容包含在iOS应用程序中。 我们可能希望从与本机应用程序版本配对的网站上加载内容，或者我们可能希望让用户打开链接而不必打开其他浏览器。 在iOS 8之前，我们必须使用UIWebView，它笨拙，内存泄漏且难以调试。 但是，在iOS 8之后，苹果弃用了针对WKWebView的UIWebView，并引入了现代WebKit API。 新框架极大地提高了将Web内容添加到iOS应用程序的性能和灵活性，从而为开发人员提供了更多控制权和更多功能。 它还极大地改善了与JavaScript的本地通信。 在本文中，我将向您展示如何将脚本注入网页并接收数据以执行诸如更改网页背景或直接从JavaScript调用本机函数之类的示例。 WKWebView在WWDC 2014上首次发布，是改变游戏规则的工具，用于在iOS应用中呈现Web内容。 它利用核心动画和硬件加速功能，使网页可以60fps的速度滚动。 苹果开发人员淘汰了旧的JavaScript引擎，并用Nitro取代了它，后者是Safari的基础。 它还包含与Safari中相同的内置手势，可用于前后缩放和导航。 创建起来也超级容易！ 让我们从一个简单的WKWebView外观的简单示例开始。 开始所需要做的就是创建WKWebView对象，添加约束并传入URLRequest来加载网页： 请注意，您只能加载默认情况下安全的URL（即，仅HTTPS连接）。 您可以将“ App Transport Security设置”键添加到Info.plist中，以出于开发目的而覆盖此设置。 然后，在“应用程序传输安全设置”下，添加项“允许任意加载”并将其值设置为“是”： 这将绕过HTTPS要求，因此您可以使用localhost或HTTP连接进行测试。 但是请记住，这仅用于开发而非生产。 您应始终遵守Apple的安全标准，以通过行业标准协议安全地加载Web内容。 因此，我们仅使用了几行代码就将Web内容加载到了我们的应用程序中。 如果我们想修改应用程序中的网页怎么办？ 我们可以像以前一样实例化WKWebView对象，但是这次传入类型为WKWebViewConfiguration的新配置对象： 使用配置初始化WKWebView 在这里，初始化Web视图时可以修改很多属性。 例如，您可以控制页面是否以增量方式呈现，播放之前哪些媒体类型需要触摸手势，HTML5视频是否可以画中画显示或如何与加载的脚本进行通信。 WKWebViewConfiguration具有一个名为userContentController的属性，该属性使您可以传递WKUserContentController对象。 该对象使用addUserScript（_ :)注入JavaScript，并通过add（_：name :)侦听消息处理程序。 如果您是网络开发人员，则类似于Chrome扩展程序之类的浏览器插件对加载的网络内容的处理方式。 WKUserScript对象添加到userContentController后，允许开发人员使用JavaScript并将其注入到网页中。 这是添加脚本以从上方更改Google网页背景颜色的简单示例： 创建用户脚本以更改背景色 init方法采用三个参数： source ：传入JavaScript的字符串表示形式作为源。 injectionTime ：指定JavaScript是在文档开始还是在文档末尾加载。 如果传入WKUserInjectionTime.atDocumentStart，则脚本将在创建文档元素之后但在解析任何文档之前立即运行。 如果传入WKUserInjectionTime.atDocumentEnd，则脚本将在文档解析完成之后但在加载任何子资源（例如图像）之前运行。 这与触发DOMContentLoaded事件时相对应。 forMainFrameOnly ：指定脚本是在所有框架中运行还是仅在主框架中运行。 对于您的源代码，您可以简单地传递一个字符串，或者，如果脚本更复杂，则可以从Xcode的本地文件中加载它。 为此，请将您的JavaScript文件添加到Xcode，获取文件的路径，然后使用文件内容初始化字符串： 从本地文件加载JavaScript 这是在启动时向网络视图添加基本用户脚本的简要概述。 […]

Swift + JS

从屏幕截图中可以看到，电子邮件字段的ID为“ login_field”。 我们将使用ID来访问元素。 WKWebView有一个validateJavaScript方法，该方法使我们可以访问网页元素和方法。 此时，我们要做的就是调用该登录按钮方法。 与字段不同，登录按钮没有ID。 相反，它具有名称参数。

带有滚动功能的React Native中的可折叠手风琴样式导航

我发现在React Native中找到一个好的，高性能，手风琴风格的导航组件有点困难，这不太复杂。 Oblador有一个相当不错的产品，但是它没有考虑滚动视图中的项目。 我希望能够做的是在用户设备的顶部设置适当的手风琴菜单项，并显示其子类别菜单项。 我在Expnent的Codepen式Snack应用程序中构建了它的精简版，并在此处将其作为开放源代码git repo的更全功能版本。 它是使用标准的react native入门指南构建的，因此您可以遵循这些指示来启动和运行项目。 该代码有很好的注释，但实际上它是由三个部分组成： scroll accordion ，其中包含包含subcategory links touts 。 当您单击某个功能区时，该功能区将滚动到用户设备的顶部，而不管他们在scrollView中的滚动位置如何，并在子类别链接列表中添加动画效果。 棘手的部分是尝试使代码保持动态，以便您的吹捧者可以是任意高度，并且子类别链接的数量可以随类别的不同而变化。 本示例尝试通过在必要时使用PureComponents来执行此操作，并且仅在初始布局上进行尺寸计算，以便在实际单击tout时，我们要做的就是随着子类别链接容器的动画高度和查看滚动。 如果单击另一个提示，我仍然需要实现自动关闭上一个子类别链接容器的功能。 除此之外，还有代码。 让我知道您是否有任何疑问或改进。 “使用严格” 从’react’导入React，{组件}; 从’react-native’导入{AppRegistry，Animated，Dimensions，Easing，Image，Text，View，StyleSheet，TouchableOpacity，ScrollView}； const categoryLinks = [//为简单起见，我们对所有tout使用相同的类别链接集 {标签：’Subcategory1′}， {标签：’Subcategory2′}， {标签：’Subcategory3′}， {标签：’Subcategory4′}， {标签：’Subcategory5′}， {标签：’Subcategory6′}， {标签：’Subcategory7′}， {标签：’Subcategory8′}， {标签：’Subcategory9′}， {标签：’Subcategory10′}， ] const categoryTouts = [// touts是保存我们链接的可点击图像项 {image：require（’./ assets / images / image01.jpg’），标题：“ Category1”，链接：categoryLinks}， {image：require（’./ assets / images […]

iOS自动配置

在图卢兹举行的最后一次培训营中，我们决定使用存储在OpenPaaS上的用户配置来自动配置移动设备。 通过自动配置，我们希望自动配置Email，CalDAV和CardDAV服务器设置。 我们组织了两个团队：一个在iOS设备上工作，另一个在Android设备上工作。 我决定使用iOS设备，因为我想发现这个模棱两可的黑框“ iOS”字样。 在深入研究iOS系统后，我发现了一个内置的配置实用程序，称为“配置配置文件”。 配置配置文件是一个“ .mobileconfig” XML文件，可用于分发配置信息。 如果您需要配置大量设备或为大量设备提供大量自定义电子邮件设置，网络设置或证书，则配置文件是一种简便的方法。 尽管我不是iOS系统的忠实拥护者，但我不得不承认，概要文件对于所有开始采用iOS策略的企业或为轻松配置iOS设备供企业使用而苦苦挣扎的企业来说，都是一个不错的工具。 使用配置文件，可以配置多个设置，包括电子邮件，密码，VPN，Wi-Fi，CalDAV，CardDAV和设备限制。 这些设置可以通过非常简单的HTTP“ GET”请求轻松地应用于多个iOS设备，以便直接设置这些设备。 什么是引擎盖下？ 我们首先从服务器端为配置文件创建一个髭XML模板： 结论： 在这次研讨会中，我非常高兴发现iOS中配置文件的内置支持。 但是，我不喜欢这样的事实，我们必须为开发人员Apple帐户付费才能将我们的应用程序部署到真实的iOS设备上。 总而言之，iOS并不是那么痛苦😉

React Native和Flow入门

向您的React Native应用程序添加静态类型。 Flow使我们能够轻松地向我们的JavaScript添加静态类型检查。 Flow将帮助您防止错误，并可以提供更好的代码文档。 许多React Native文档和源代码已经使用了流程，因此从来没有比现在更好的时间开始使用它了！ 在本文的结尾，我们还将SublimeLinter-flow添加到Sublime Text中，以便在编辑器中进行实时类型检查！ 向React Native添加流 首先，让我们创建一个新的React Native应用程序： 反应本机初始化流程 .flowconfig文件是放置特定流配置的位置，类似于.eslintrc文件。 新的React Native项目带有.flowconfig用的预配置.flowconfig文件。 在本教程的其余部分中，我们将使用此默认配置。 如果您想自定义配置或了解有关配置的更多信息，请查看文档。 现在，我们需要使用flow-bin软件包安装flow。 cd进入根目录，然后在文本编辑器中打开.flowconfig文件，并查看底部以查看您的应用程序需要哪种版本的流： 对我来说，它的版本是0.33.0 ，所以它将成为我安装并另存为dev依赖项的版本。 纱线添加flow-bin@0.33.0 –dev 要么 npm我flow-bin@0.33.0 –save-dev 在本教程中，我们将按照文档以及我在社区中与大多数人交谈的建议在每个项目的基础上安装流程。 首选安装方法是按项目进行安装的原因是，不同的.flowconfig配置需要使用不同版本的流，如果在全局范围内安装它，则在很多情况下将无法正常工作。 要了解有关全局安装的更多信息，请在此处查看文档。 现在已经安装了正确的流版本，我们需要做的最后一件事是设置一个简单的命令，以便我们在每次键入check时都可以运行。 对我来说， npm run flow非常有意义，因此让我们打开package.json并将流程脚本添加到我们的脚本中： “脚本”：{ “ start”：“节点node_modules / react-native / local-cli / cli.js开始”， “ test”：“开玩笑”， “ flow”：“流” }， 现在，我们可以转到命令行来首次启动流服务器： npm运行流程 我们应该得到这个： 从文档： 使用Flow服务器 对于大型项目，您可能只希望Flow在文件更改时逐步检查文件。 […]

快速反应本机：立即开始使用JavaScript学习本机iOS开发！

本书是关于React Native进行移动iOS开发入门的指南。 您可以在https://github.com/azat-co/react-native-quickly中找到源代码和手稿。 您可以在此处或在reactnativequickly.com上在线阅读本书，或者， 如果您喜欢视频 ，可以在Node.University上观看项目视频：http：//node.university/courses/react-native-quickly。 在本书中，我将向您介绍React Native，以进行本机移动iOS和Android开发……并迅速进行。 我们将讨论诸如 为什么React Native很棒 为iOS设置React Native Development Hello World和React Native CLI 样式和Flexbox React Native UI的主要组件 将模块导入Xcode项目 项目：计时器 项目：天气应用 这本书是关于快速开始使用React的，而不是关于React Native的，从技术上讲，它是一个单独的库（有些甚至可以称为框架）。 但是我认为在与React一起进行Web开发的八章工作之后，通过利用这个很棒的库将我们的知识应用于移动开发会很有趣。 您会惊讶于您已经从React中学到了多少React Native技能。 使示例过于复杂或过于简单，从而使它们不现实且无用，总是存在一个平衡。 在本书中，准备构建两个移动应用程序：Timer和Weather应用程序。 Weather应用程序具有3个屏幕录像，您可以在Node.Unversity上观看。 他们将引导您完成“天气”应用程序。 [边注] 阅读博客文章固然不错，但观看视频课程则更好，因为它们更具吸引力。 许多开发人员抱怨Node上缺乏负担得起的高质量视频材料。 观看YouTube视频让人分心，疯狂地花500美元购买Node视频课程！ 去看看Node University，它在Node：node.university上有免费的视频课程。 [旁注结尾] 项目的源代码（以及提交问题/错误的手稿）在https://github.com/azat-co/react-native-quickly存储库中。 请享用！ 为什么React Native很棒 React Native应用程序不同于混合应用程序或所谓的HTML5应用程序。 如果您不熟悉混合方法，那就是将网站包装在无头浏览器中的时候。 无头浏览器是没有URL栏或导航按钮的浏览器视图。 基本上，开发人员使用常规的网络技术（例如JavaScript，HTML和CSS）以及可能的框架（例如jQuery Mobile，Ionic，Ember或Backbone）来构建响应式网站。 然后，他们将其与该无头浏览器一起打包为本地应用程序。 最后，您可以跨平台重用相同的代码库，但是通常缺乏使用混合应用程序的经验。 与本机应用程序相比，它们通常不那么敏捷，或者缺少某些功能。 混合应用程序最受欢迎的框架包括Sencha […]

在React Native中处理来自OneSignal的远程推送通知

两周前，我发表了一篇文章，介绍了通过OneSignal为React Native（iOS和Android）设置推送通知所必须采取的每个步骤。 但是帖子在交付时就停止了-如果您想在用户通过推送通知打开应用程序时为他们做些什么呢？ 如果他们在应用程序中打开了推送通知怎么办？ 这就是我今天打算讲的内容。 在继续本文之前，请确保已为您的平台设置了OneSignal。 访问通知 在我们实际上无法对通知执行任何操作之前，我们需要访问该通知的内容。 使用react-native-onesignal时 我们将利用已打开的事件，我们可以使用OneSignal.addEventListener进行监听 。 确保您也删除了监听器！ 现在，我们对数据的外观有了一个了解。 让我们写一些代码。 我们将使用react-native-root-toast 在应用中显示通知。 这是计划： 不活跃的经历 那么，如果用户在我们的应用程序处于后台时单击通知，该怎么办？ 我将继续进行，好像我们使用的是react-native-router-flux （我有一个有关如何使用它的教程） 。 因此，回顾我们的规范，我们知道在这种情况下，我们不会向用户显示消息（他们已经从通知中看到了该消息），但是我们确实希望将它们带到适当的房间。 您会看到，访问我们从推送通知传递的自定义数据非常简单，从而为用户提供自定义体验并节省时间。