HTML5混合应用开发技术栈
文章平均质量分 51
最近几年,HTML5的发展速度如日中天,各种技术更是错综复杂,高效率,低成本的移动应用开发成为更多企业追求的目标,本专栏致力于分享此项技术。
天外野草
现任职移动研发部Team Leader, 高级咨询顾问、开发架构师,移动开发布道师, CSDN专家博主,CSDN讲师, 主修数学专业,曾获全国大学生数学建模大赛、东北三省大学生数据建模大赛一等奖,精通移动开发,熟悉 Angular、React、SAP FIORI等各种HTML5主流框架,对大数据开发,AI技术领域有一定的经验心得,同时拥有丰富的课程录制以及授课经验,也拥有多个大型企业级跨平台项目开发经验,乐观向上,乐于求知,不限领域!
展开
-
(声明)“天外野草”为本人今后的笔名以及网名
前言作为一名理工男,数学专业出身,但是酷爱文学,喜欢阅读,热爱演讲,平日里喜欢分享,传授,闲暇之余写写文章。对此本人决定,将使用“天外野草”作为今后写作的网名以及笔名。寓意为:“天外”即为不拘世俗,敢于突破,无所畏惧。 “野草”不管何等条件,何等环境,都能凭借顽强的生命力,谋求生存之地,生生不息,力求改变。终定为:”天外野草”!个人微信公众号原创 2017-12-02 23:17:05 · 1069 阅读 · 0 评论 -
(头条)Cordova+React+OnsenUI+Redux新闻App开发实战教程
前言伴随着HTML5技术的普及力度与日俱增, 混合应用开发已经备受关注, 百家争鸣的技术框架,如何做好技术选型,搭建最稳健的架构,快速的持续集成,是一个跨平台App开发的关键所在,所以本套视频教程凭借实战App开发做实验讲解,带您共同学习基于Cordova平台的混合应用开发。效果展示Cordova集成Cordova作为最跨平台开发框架,已经变得越来越普及,已然成为各个平台开发的首选框架,Cordov原创 2017-11-27 21:20:24 · 1744 阅读 · 0 评论 -
React-Native之TextInput实现高度自增长解决方案
前言TextInput在部分业务场景下, 需要随着字体多少进行高度自行调节,那么这个效果如何实现呢?方法为了方便重用,我们定义一个公用的组件:class AutoExpandingInput extends Component{ onContentSizeChange(event) { this.setState({height: event.nativeEvent.cont原创 2017-03-08 15:00:59 · 5009 阅读 · 0 评论 -
React-native之Navigator调用popToRoute无效解决方案
前言在使用RN过程中, 经常会遇到如下场景, 当前在D页面, 栈里有A =》 B => C => D 四个页面, 我们往往需要返回之前的某个页面(B页面),并卸载 C, D两个页面,此时就需要用到官方定义的popToRouter方法,但是本人尝试了一下无效,this.props.navigator.popToRoute({name:'login'});于是查找一番找个了一个方法。方法const ro原创 2017-03-08 17:52:25 · 4483 阅读 · 3 评论 -
React-Native之禁用Navigator默认的右滑手势返回上一页
前言对于RN默认的导航组件Navigator, 可以通过右滑切换view,这样效果往往在项目中并不是很需要,但是想要去掉,也着实费了点功夫,下面来看如何解决这个问题?方法主要原理,也很简单,就是设置gestures属性为{}或者null即可,为了方便使用,我们直接看代码:...<Navigator ref="navigator" initialRoute={{name: 'your原创 2017-03-08 14:15:08 · 7835 阅读 · 1 评论 -
React-Native在登陆成功或注销后销毁路由,只保留当前栈
前言在移动APP中,我们经常会遇到登陆成功,或者注销后,不允许返回上一页面,这就需要我们清楚栈中的其余view, RN中我们应该如何处理呢?方法主要原理是借助于onDidFocus和immediatelyResetRouteStack两个方法实现。对此我们先看看Navigator提供给我们默认的方法有哪些?getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop原创 2017-03-08 14:22:16 · 11140 阅读 · 3 评论 -
React-Native跨平台多屏幕尺寸适配方案一览
前言对于RN而言,跨平台已经是不二之选,那么对于不同平台的尺寸的适配又是一个亘古的难题,下面说一下我再项目中的一点实践心得,大神勿喷。方法getstatic静态方法,进行返回屏幕的像素密度。一些例子如下:PixelRatio.get()==1 mdpi Android设备(160 dpi) PixelRatio.get()==1.5 hdpi Android设备(240 dpi)原创 2017-02-23 21:40:44 · 13670 阅读 · 1 评论 -
React-Native之IOS本地模块的应用实践分享(仅此一篇足以...)
前言React-Native从诞生至今,火热程度已经不言而喻,在不断的框架迭代过程中,RN也提供了丰富的组件,以供开发者使用,但是在实际应用中,我们可能需要更为丰富的交互组件,但是RN中又没有及时提供,这时候我们就需要使用RN的本地模块,本地模块即可以使用JS调用Native,也可以使用Native调用JS, 并传递各种参数,实现完整功能,接下来我们看看具体的使用方法,方便大家参考学习,如果想了解更原创 2017-02-15 20:20:59 · 8400 阅读 · 0 评论 -
React-Native 学习系列课程笔记(React-Native开发环境搭建)
对于2016年最火爆的前端H5框架无疑是Facebook推出的React, React框架可以说是一个系列框架,可以分为web端,服务端,移动端,其核心思想都是自己组件化开发,这也是未来前端或者是移动领域一个不小的趋势所在。那么今天我们就来尝试一下React-Native,这个一个对于一个移动领域不小的突破, 目前其主要针对两个平台,IOS和Android, 我们先来搭建一个开发环境, 这里推荐大家原创 2016-08-11 02:37:52 · 1520 阅读 · 0 评论 -
React-Native 学习系列课程笔记(React-Native 开发从零开始)
React-Native 和React的原理大体相同,但是React-Native更多的是用Native组件替代web组件,为了能够更好的理解React-Native,大家最好先了解一下React的基本语法结构。我们先来看看一个简单的Hello world的实现方式:import React, { Component } from 'react';import { AppRegistry, Tex原创 2016-08-11 03:07:21 · 2296 阅读 · 0 评论 -
React-Native编写针对平台的代码
前言我们在实际项目开发中,Android和IOS平台显示的效果可能并不相同,针对不同平台编写不同代码的需求, 下面举例说明React-Native工程下几种平台区分的方法,以供参考。用不同文件夹区分建立不同的文件夹,存放不同平台的代码,是很常见的一种方式,大概如下:/common/components/ /android/components/ /ios/components/ios文原创 2017-01-23 14:10:55 · 6173 阅读 · 0 评论 -
Redux中间件在React和React-Native项目架构中的应用实践
前言在MVVM框架模式独揽天下的今天,React凭借其独特的设计思想,深入的设计理念,开辟了一条崭新的康庄大道,实属是一个重大的突破,为什么这么说呢?因为React论其设计思想,充其量只是MVVM种的V而已,对于大量而且复杂的数据来讲,自身处理上显得有些力不从心,这时候,传统的Redux和Flux的设计思想起到了决定性的作用,对于Redux和Flux这里不多赘述,这个观念在这两年被炒的异常火热,网上原创 2017-01-13 16:12:32 · 4455 阅读 · 0 评论 -
React-Native工程项目打包编译发布过程详解
前言现在大红大紫的React-Native框架热度可谓与日俱增,React-Native的热更新操作,在开发过程中的确带来很多好处,但是对于发布来讲,不同平台却不尽相同, 下面来具体看一下Android和IOS两个平台是如何执行发布产品的。React-Native之Android平台发布Android平台有两种发布方式,一种是借助于命令行操作,另外一种是借助于Android Studio进行发布,具原创 2017-01-03 19:51:07 · 11537 阅读 · 1 评论 -
React-Native Issue: PCH was compiled with module cache path
最近React-Native项目中发现一个奇怪的问题:当执行:react-native run-ios的时候,发生如下错误:PCH was compiled with module cache path '/Users/tyler/workspace/html5space/HappyTime/ios/build/ModuleCache/HST39TUTS9TS', but the path is c原创 2017-01-04 10:04:49 · 3132 阅读 · 0 评论 -
Redux-Saga在React工程架构之的应用实践详解
前言React的作用View层次的前端框架,自然少不了很多中间件(Redux Middleware)做数据处理, 而redux-saga就是其中之一,目前这个中间件在网上的资料还是比较少,估计应用的不是很广泛,但是如果使用得当,将会事半功倍的效果,下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件,主要集中处理react架构中的异原创 2017-01-12 15:12:08 · 24910 阅读 · 0 评论 -
react-native报错解决方法 in next release empty section headers will be rendered
错误截图解决方法在ListView下 加个 enableEmptySections = {true} 就可以解决了原创 2017-01-11 14:42:08 · 1670 阅读 · 0 评论 -
React-Native调试状态下App运行缓慢问题解决方案
问题正在使用RN进行开发的小伙伴会发现,当我们在远程调试状态下会有这个一个页面提示(黄色)并且App运行非常的缓慢。提示如下:react-native fix this by foregrounding the tab(or opening it in a sepatate window)解决方案有两个采用独立的浏览器tab,也就是一个新的窗口问题解决采用独立的调试app,可以使用一个gith原创 2017-01-11 15:10:36 · 8801 阅读 · 0 评论 -
React-Native应用ListView实现上拉下拉刷新效果实践
前言在移动应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中应该如何实现呢,我们具体来看一下?必备的组件ListView:效果和ScrollView比较类似,但是效率会高些,因为只渲染当前屏幕显示的数据。RefreshControl:这是一个组件嵌入到ListView,ScrollView中,实现刷新的效果。上面两个组件都是RN自带的组件的实现起来比较容易。原创 2017-01-13 15:03:12 · 10021 阅读 · 4 评论 -
React-Native版本升级的实践方案
前言在React Native的工程项目中,版本升级是避免不了的,尤其是RN这种框架版本的迭代速度非常之快,如果一味使用旧版本,就无法使用新特性,如果升级,很可能会导致版本兼容问题,正所谓“与何雄站不可兼得”,但是为了长远发展,我们依然要选择升级, 那么对于RN我们如何升级会更好的呢?下面说我我的一些观点。在此强调一下,RN 0.40版本和一下的版本变动比较大, 所以升级方式会有所不同。使用reac原创 2017-01-23 15:06:08 · 7564 阅读 · 0 评论 -
React Native监听Android回退按键,程序化退出应用
前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看。BackAndroid此模块用于监听硬件的back键操作。看下具体代码:BackAndroid.addEventListener('hardwareBackPress', function()原创 2017-02-10 16:26:29 · 6379 阅读 · 0 评论 -
React-Native项目中应用剪贴板复制粘贴操作
前言很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。方法Clipboard组件可以在iOS和Android的剪贴板中读写内容。常用API1.得到复制内容static getString() 获取剪贴板的文本内容,返回一个Promise你可以用下面的方式来调用。async _getContent() { var content = await Clipboa原创 2017-02-10 17:19:30 · 9533 阅读 · 0 评论 -
React-Native屏幕适配之ImageView的应用解析
前言对于移动设备来讲,屏幕适配是必不可少的一个工作,但是对于Android和IOS两个平台,图片适配各不相同,那么在React Native中又是如何应用的呢?Native适配方案这里我们先说一下Android和IOS两大平台如何进行图片适配的。1.AndroidAndroid平台采用drawable文件夹区分不同分辨率的图片,android系统会自动区分当前手机的分辨率,并自动进行图片适配,同理也原创 2017-02-13 11:03:52 · 3412 阅读 · 0 评论 -
Hybrid移动应用语音录制及断点上传实现思路
前言断点上传功能在移动应用中较为常见,使用过程中,要求录制较为清晰切大小适中的语音文件,能够控制断点上传会有较好的用户体验, 下面是我在这方面的一些实践经验,分享一下,不成熟的地方欢迎指正!混合应用中的音频录制首先创建一个Cordova项目:cordova create Audio com.delaware.AudioDemo AudioDemocd Audiocordova platform ad原创 2016-10-14 16:59:34 · 2345 阅读 · 2 评论 -
Hybrid移动应用在多页面大数据复杂业务背景下的优化实践方案
前言对于混合应用而言,性能问题一直被吐槽,虽然设备的内存的不断增大,很大程度上缓解了这个一问题,但是和原生应用来讲还是有很大区别,本人从Phonegap2.x开始,一直的探索和使用混合应用技术。当时的2.x性能真是不怎么样,首次加载时间也比较长,后来phonegap被apache纳入旗下以后,更名为Cordova,可以说从此以后,性能问题得到了很大的改善,占用内存也越来越小,到如今使用的版本已经变为原创 2016-10-12 17:26:29 · 2739 阅读 · 1 评论 -
混合移动应用中地图导航功能开发与应用
前言地图功能再常见不过, 技术也很成熟,对于native的时间方案,有很多,我们可以使用高德地图sdk, 腾讯地图sdk, 百度地图sdk。但是混合移动应用中,改如何实现呢?下面我们以百度地图为例。可以实现的几种方案大概有一下两种方案可选:编写地图插件,进行插件调用,但显示地图为native view.(实现起来比较麻烦)调用JS library, 实现地图功能,但是功能相对匮乏,有特殊需要还需原创 2016-10-13 14:19:41 · 6989 阅读 · 0 评论 -
CodePush热更新云服务在Cordova项目中的应用实践
前言由于App每次升级打包的繁琐性,项目中不想进行二次打包,这就需要实时更新的服务,探索了许久,发现CodePush满足了我们的需求。CodePush 是微软开发的,可以实时更新 React Native 和 Cordova 应用。CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个云仓库,作为开发者可以直原创 2016-10-12 11:54:42 · 4986 阅读 · 2 评论 -
React-Native实际项目开发中的高效率调试实践方案
前言项目开发过程中,调试非常重要,调试工具决定了我们的开发效率,最近在做一个项目采用React-Native框架,对这个框架的调试做了一点研究,为此分享一下个人的见解:方法在运行带RN的工程后,当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键,调出RN的开发者菜单,如图所示,其中有选项“Debug JS Remotely”,可以将JS脚本在浏览器中进行调试。原创 2016-09-28 17:00:07 · 2303 阅读 · 0 评论 -
React-Native在MacOS 10.12 Sierra后无法启动及监听解决方案
问题描述出于好奇,本人最新升级了苹果最新的Sierra系统,最近在调试React-Native项目过程当中发现一个奇怪的问题,项目可以成功build, 通过xcode也可以编译到手机上,但是无法自动启动模拟器,并且报出监听失败的问题,issue截图如下:解决方案需要安装watchman在mac os上,这个一款facebook推出的用来监听文件改变的开源框架。sudo brew install原创 2016-09-28 14:59:31 · 3095 阅读 · 0 评论 -
驱动原生型移动应用的跨平台分析与见解(个人观点)
前言前言从事移动应用开发已经有些年头,做过Android, IOS,混合应用开发,应用过Wex5, Cordova等平台框架,对于这些平台还是有一定了解,但是驱动原生型移动应用开发理念还是第一次听说普元移动开发平台Weex移动开发平台React Native开发平台原创 2016-09-26 17:42:41 · 2372 阅读 · 0 评论 -
(热更新技术)高效率Hybird移动应用开发过程解决方案
前言作为一名移动应用开发者而言快速高效进行版本测试,是至关重要的,所以一直在探索一个解决方案,可以随时更新我们的逻辑代码,今天我们就来看一下,我是如何在项目中进行应用的。热更新这个名词很早就听说过,只不过一直都没有一个明确的定义,也没有过多的机会去尝试,但是最近遇到过一个需求,尝试了一下, 所谓热更新就是在不需要重新安装的情况,升级和测试我们的app, 这个理念多被应用在混合和驱动原生型的应用当中。原创 2016-09-26 16:54:15 · 2873 阅读 · 0 评论 -
Babel在ES6项目架构中的搭建与应用方案解析
前言自从ES2015发布以来,所有的项目都转到了这一个标准,但是考虑到兼容性的问题,不得不对现有代码做一个转换,也就是说将ES6规范的代码转换到ES5的标准,保证项目不存在任何问题的情况下运行,有人会问,这不是多此一举吗,但是我想说ES6给开发带来的语法糖非常之多,足以吸引多数的技术决策者去尝试,此规范也大大提高了项目的可维护性和规范性,个人非常推崇,并且在项目中的应用稳定性也很高,如果你还没原创 2016-09-26 10:02:10 · 3698 阅读 · 1 评论 -
Cordova 混合应用处理输入法相关事件
最近一个混合应用项目(Cordova+ios+android)。其中android有返回键,当我们页面已经弹出了输入法,有的用户习惯用返回键关闭输入法,这时候就有一个问题,当我们点击返回键时,页面会发生回退现象,这不是我们想要的结果。后来尝试了如下方法,可行。document.addEventListener("showkeyboard", function(){}原创 2015-09-22 15:26:49 · 1504 阅读 · 0 评论 -
Mac OS下Android开发环境配置详解
1.启动Terminal终端工具2.输入cd ~/ 进入当前用户的home目录3. 创建:touch .bash_profile4.打开并编辑:open .bash_profile5、在文件中写入以下内容:export PATH=${PATH}:/Users/sxpmg/Application/android-sdk-mac_x86/tools:/Use原创 2016-02-16 10:08:51 · 1518 阅读 · 0 评论 -
Android Studio 默认debug证书位置在哪里(Mac os)
由于最近改用Android Studio 开发Android应用,但是在mac os上不知道Android studio 的默认debug证书放在哪里了,所以我查阅了一下,相信很多人都有这样的问题keytool -list -v -keystore ~/.android/debug.keystore在mac os 上,用上面这段代码就ok 了原创 2016-03-21 17:41:41 · 2754 阅读 · 0 评论 -
最新Google Analytics在Android Studio工具中的集成使用
前言自动google发布Android Studio以来,很多项目都转到这了这个开发工具,Android Studio采用gradle进行构建,虽然某种意义上十分的自动化,但是对于用惯了Eclipse+ADT开发的人来讲,最开始还是有很多的不适应,在第一次构建项目的时候,最好能让你的网络连接google,否则会有很多问题,因为自动构建会从google服务上获取相应的服务包,这是需要能够访问googl原创 2016-09-23 19:29:06 · 2206 阅读 · 0 评论 -
How to optimize the WebStrom performance?
As I know, everybody is working by webstrom for now.But the performance is very bad about the latest version.I am testing one solution that it can optimize it. Everybody can try it it there is some im原创 2016-09-21 10:40:10 · 1720 阅读 · 0 评论 -
IONIC自定义动态高度SubHeader的解决方案
IONIC subheader是我们常用的一个css 属性,但是这个subheader的高度是固定的,当然也是可以改变的,但是如果改了subheader的告诉,还要更改content的top值,稍微有些麻烦,如果是动态告诉的subheader就麻烦了,还需要动态更改content的top数值,所以就写了一个directive解决这个问题:上代码吧:/** * Created by Richard原创 2016-09-21 11:45:40 · 3701 阅读 · 1 评论 -
Android 6.0+ 相机图册调用崩溃解决方案
最近客户更新系统发现,以前的项目在调用相机的时候,闪退掉了,很奇怪,后来查阅后发现,Android 6.0以后需要程序授权相机权限,默认会给出提示,让用户授权,个人感觉这一特性很好,大概如下:导入Android V4, V7包!Android Studio 导入很简单,右键项目后找到dependency就ok了。继承AppCompatActivitypublic class MainActivity原创 2016-09-21 21:16:43 · 2517 阅读 · 0 评论 -
Hybird App混合移动应用开发技术整体解决方案,速来围观!
摘要由于H5的逐步普及,混合移动应用开发变的炙手可热,其主要的开发语言就是JavaScript,这在很多人看来无论是在性能和安全上来讲,并不被大家所看好,所今天就来谈一下如何对混合应用做优化以及加密,希望对大家有所帮助,本人一直沿用Cordova做混合应用开发平台,这也是目前使用最为广泛,而且比较稳定,社区最为活跃的一个平台,今天我们就基于这个平台做相关讲解!Hybird APP混合应用原理分析混合原创 2016-09-20 17:17:05 · 8240 阅读 · 0 评论 -
混合应用开发之定位后只获取国家和城市名称
混合应用开发主要应用技术就是H5,H5定位的实现方法也比较广泛,但是定位后如何获取到有用的信息,这个还需要一番研究,本人就遇到过这个问题。在我的应用已经定位到坐标,需要根据坐标获取国家和城市名,不需要其他信息,但是返回信息中又无法指定。于是找到下面的方法:navigator.geolocation.getCurrentPosition(position => { let ad原创 2016-09-20 10:50:52 · 1482 阅读 · 0 评论