当前位置: 主页 > 前端开发

前端gis开发用什么框架-html5前端开发框架

发布时间:2023-02-10 16:16   浏览次数:次   作者:佚名

首先申明,汽车之家App是指模仿汽车之家App,技术使用React Native,目的仅供学习!

以下文章将 React Native 简称为 RN。 如果你想学习使用RN开发APP,你需要掌握编程语言:JavaScript、HTML/CSS、ES6的编写,以及Node.js(npm)、React和React-Native的简单使用,这样你就可以开始吧。 但是你要有心理准备,React是有生态的前端gis开发用什么框架,有自己的全家桶,新手需要学习的东西很多。

如果你是有经验的同学,比如学习Vue.js,熟悉Node.js,或者开发Ionic App,或者了解MVVM前端框架的思想,那么学习React并不难,但是有很多全家桶里的东西,需要学习的东西很多。 项目实践上,学习成本不低。

! ! 不要被吓倒,但我说的是实话。 上手React和RN花了我一个月的业余时间,而“业余时间”是指每天下班后的晚上时间和周末时间。 如果你有扎实的基础和我上面提到的技术能力,你也可以在一个月内上手。

去年年底学了RN。 由于最近公司用的是ng2和NativeScript,没法继续研究,所以也是闲着玩玩。 毕竟我看好RN; 朋友最近学习RN开发,这个demo是组队一起玩的。

搭建开发环境

开发环境分为IOS和Android两个平台,在RN官网有介绍,这里不再赘述。 如果有朋友在搭建Windows+Android开发环境的过程中遇到问题,可以给本文留言或者在github上提issue,我会帮忙解决。

把自己在学习过程中遇到的一些坑的解决方法整理到了上面的项目中。

开发工具推荐

推荐使用 Visual Studio Code 或 WebStorm 或 IntelliJ IDEA 作为代码编辑器。 如果电脑功能强大,推荐IntelliJ IDEA。 如果没有,请使用 VSC。 因为这些都是比较好用的前端IDE,这里不推荐使用Sublime Text。 上面几个你用多了,你就不想用sublime了。

如果是android环境开发,建议使用Genymotion安装虚拟机,而不是android原生虚拟机,可能会快100倍。

创建一个入门项目

以上都准备好了,创建项目并启动项目:

react-native init autohome
cd autohome
react-native run-android

成功后出现如下信息:

web前端开发框架_html5前端开发框架_前端gis开发用什么框架

创建菜单

汽车之家APP底部有五个菜单:首页、论坛、寻车、探索、我的; 为五个首页创建代码文件,如图:

html5前端开发框架_web前端开发框架_前端gis开发用什么框架

目前先为每个页面写一个简单的Text,因为第一步的目的只是做一个导航菜单

html5前端开发框架_前端gis开发用什么框架_web前端开发框架

然后创建app.js,通过插件react-native-tab-navigator实现菜单点击导航页面

web前端开发框架_html5前端开发框架_前端gis开发用什么框架

详细代码见:

这将调出菜单。

添加应用程序起始页

启动页也叫splash screen,使用插件

react-native-splash-screen 实现。 首先,设计一个启动页面。 只要会PS,就可以随意设计。 一般启动页比较简单,写个名字或者给个logo就可以了。

html5前端开发框架_前端gis开发用什么框架_web前端开发框架

然后按照react-native-splash-screen插件的使用教程配置一些配置项。 具体配置省略,插件文档中有详细说明。

配置完成后,创建WelcomePage.js作为App启动加载时执行的代码:

componentDidMount(){

常量{导航器}=这个。 道具;

newThemeDao().getTheme().then((数据=>{

this.theme=数据;

}));

this.timer=setTimeout(()=>{

交互管理器。 runAfterInteractions(()=>{

闪屏.隐藏();

导航器.resetTo({

组件:应用程序页面,

name:'应用页面',

参数:{

主题:this.theme

}

});

});

},500);

}

使用组件的 componentDidMount 生命周期方法。 组件渲染完成后隐藏启动页,然后导航到AppPage(即上层菜单组件app.js),这样启动页显示后直接进入菜单首页。 分分钟都是NativeScript~别说了,说多了会哭的。 . .

最终效果:

前端gis开发用什么框架_web前端开发框架_html5前端开发框架

源代码

(文中提到的NativeScript也支持JavaScript开发app,ionic也类似。目前React Native和Ionic占据了native app或hybrid app开发的领域,而nativescript则在奋力前行。最后会怎样取决于生态以及开发成本和兼容性稳定性,有兴趣的朋友可以搜索相关的对比文章了解一下,后面会比较熟悉,等我有了以后再根据个人经验总结分析时间)

附言:

汽车之家App的开发刚刚起步,技术目前处于学习阶段前端gis开发用什么框架,还是业余开发。 有时候周末加班或者其他事情比较忙,可能需要学习其他技术,会影响开发进度,所以本系列文章不定期更新,有兴趣的朋友可以一起学习开发,留一个这篇文章的消息。

现在前端可以开发App和桌面软件,你知道吗?

html5前端开发框架_前端gis开发用什么框架_web前端开发框架

吉斯卡弗

GIS520社区站长/前端开发工程师

web前端开发框架_html5前端开发框架_前端gis开发用什么框架

WebGIS|前端开发|技术经验分享