龙马行空

React系列——React主要内容简介

久未见 提交于 2020-03-01 04:04:27
React 主要有四个主要内容构成,下面分别来介绍一下: 第1章 1、 Virtual DOM 1.1、 虚拟 DOM 是 React 的基石。 之所以引入虚拟 DOM ,一方面是性能的考虑。 Web 应用和网站不同,一个 Web 应用 中通常会在单页内有大量的 DOM 操作,而这些 DOM 操作很慢。 在 React 中,应用程序在虚拟 DOM 上操作,这让 React 有了优化的机会。简单说, React 在每次需要渲染时,会先比较当前 DOM 内容和待渲染内容的差异, 然后再决定如何最优地更新 DOM 。这个过程被称为 reconciliation 。 除了性能的考虑, React 引入虚拟 DOM 更重要的意义是提供了一种一致的开发方 式来开发服务端应用、 Web 应用和手机端应用: 因为有了虚拟 DOM 这一层,所以通过配备不同的渲染器,就可以将虚拟 DOM 的内容 渲染到不同的平台。而应用开发者,使用 JavaScript 就可以通吃各个平台了。 相当棒的思路! 1.2 、Virtual DOM 速度快的说明 在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何 进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM

Ionic系列——使用ng-cordova插件

六眼飞鱼酱① 提交于 2019-12-01 00:49:28
1、cordova介绍 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。 Cordova支持如下7种移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。 Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字,这会持续一段时间。 2、ng-cordova介绍 ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。 在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码。使用 ngCordova应该可以解决这个问题。 3、Phonegap 和 cordova 的关系 Adobe将会继续以Cordova加上PhoneGap Build和Adobe

Ionic系列——CodePen上的优秀Ionic_Demo

六月ゝ 毕业季﹏ 提交于 2019-11-30 08:45:49
案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Menu Tab layout - view content gap ion-fab-button Tabs calling Action Sheet Hiding slides on ionic SlideBox directive (控制隐藏slides页面) Ionic Slide Tab elastic image(背景弹性图片) Ionic collapsible list Ionic Todo Tutorial(动态添加列表项) Ionic Debounce example (自动增长的徽章) Ionic Tabs with Badges(手动设置徽章数量) Ionic list with dividers(类似电话分组) Ionic list css (只是css样式) Ionic BottomSheet $ionicModel可以设置他的viewType ionic 长按可移动listitem 下拉选项 label toggle 旋转移动翻转 validation

Ionic系列——极光推送

穿精又带淫゛_ 提交于 2019-11-30 08:45:40
一、准备工作 1、首先你要创建好一个Ionic的项目。 2、你要去JPush官网注册一个账号,并新建一个应用,这个管理平台是可以手动发送消息,并统计分析的。 3、在上图中的应用包名要注意,这个得去项目中去找,要和项目中的一致。 二、jpush插件的安装和配置 这一部分其实就是按着github上的步骤来的,但是github上的不够详细有很多细节如果是第一次搞很容易弄错,所以我统一总结为以下的步骤。 1、从github上下载 jpush-phonegap-plugin 压缩包并解压,将文件夹命名为 $JPUSH_PLUGIN_DIR 2、 将 $JPUSH_PLUGIN_DIR/plugin.xml 文件中的AppKey(下边的your appkey的位置)替换为在Portal(上面注册的那个管理平台)上注册该应用的的Key,例如(9fed5bcb7b9b87413678c407) <meta-data android:name="JPUSH_APPKEY" android:value="your appkey"/> 3、 打开 $JPUSH_PLUGIN_DIR/src/ios/PushConfig.plist 文件将文件中的 7d431e42dfa6a6d693ac2d04 替换为在Portal上注册该应用的的Key,例如(9fed5bcb7b9b87413678c407) 4、在

Ionic系列——几种调试方法介绍

拥有回忆 提交于 2019-11-29 07:00:02
一、问题出现 最近我发现之前做微信开发和普通的ionic可以用谷歌浏览器就调试了,但是如果添加了ng-cordova这些功能调试起来就很麻烦了,我需要打包apk,安装apk,出现错误还不知道出现在哪里,然后修改代码,打包apk,安装apk,这样太麻烦了,群里的朋友提供了一种调试ng-cordova这些插件的方法,我写下来作为记录。 二、网页配合手机调试 1、把项目部署到服务器并发布,(最好是外网) 还有一种办法 (推荐) 用ionic serve 本地搭建环境 所谓的远程地址 其实就是你电脑地址,手机跟电脑再同一网段即可,这样就不用搭建站点了,修改了代码立马就可以变。 (不过本机的localhost用数据线连接是否可以认,下班了我就不实验了) 2、修改本地项目中的配置,改为服务器上的Index页面 3、打包android的apk文件,并安装到手机。 4、在浏览器中打开下面的功能 5、打开手机的开发者模式,将手机用数据线连接电脑,启动应用,就可以进行调试了。如果有错误可以直接修改服务器代码,继续点击手机功能调试。 换行 换行 6、调试完毕,修改回来配置文件的index,打包本地apk,发布应用。 但是很遗憾,我没有调试通,avd的环境我也没有配通,感觉好悲哀啊,不过大家可以试试,毕竟有人调通了。 三、其他调试方法 1、android avd 这个东西我的电脑没有调试通。 2