html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5+、ReactNative、Weex、Ionic之间的区别:

html5+和Ionic: 在开发原理上基本相同,都是需要先开发出一个完整的网站,再通过html5+或Ionic提供的打包技术对网站进行打包成移动app,它们实际还是一个网站,并非原生app。

ReactNative和Weex : 在开发原理上基本一样,它们不再开发出一个网站,而是一个模板, 这个模板只是一个半成品,不能被运行在浏览器或移动设备上,想要正常运行,那么就得通过ReactNative或Weex提供的命令行打包命令进行打包成原生的Java或oc代码,注意这里得到的是原生性质的移动app;它们不需要将源代码推送第三方打包处理,只需要在本地配置相关打包环境,是比较安全的,因此也是实际开发中推荐使用的。

本地移动App开发环境配置:

配置java环境:

下载安装Java jdk : 推荐官网下载,其官网:http://www.oracle.com/,具体步骤如下:

1.进入官网首页后点击Products下面的Java,如图:
在这里插入图片描述
2.点击Java后在弹出的页面右上角点击Download Java,如图:
在这里插入图片描述
3.点击download java后,在弹出的页面点击如图所示位置(强调一下:官方要求使用java SE 8版本):
在这里插入图片描述

4.点击jdk download后在弹出的页面底部,找到对应自己电脑系统的文件下载,(这里使用windows介绍),如图:
在这里插入图片描述
5.当点击上面下载时,可能会要求勾选协议,勾选后继续下载,当下载完成后将文件剪切到C盘中F文件夹下Javajdk文件夹中(推荐放到C盘下,文件夹命名自定义即可),如图:
在这里插入图片描述
6.双击打开下载好的javajdk程序,并点下一步,如图:
在这里插入图片描述
7.在弹出的弹框中继续点击下一步(不建议修改默认安装路径,且之前文件夹命名不能为中文),如图:
在这里插入图片描述
8.当安装完成后点击关闭即可,如图:
在这里插入图片描述
特别提醒:新版本java jdk中没有包含jre,此时可以以管理员权限打开终端并切换到jdk-16.0.1目录下后键入:bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre 回车即可安装jre,如图:
在这里插入图片描述

9.配置Java jdk环境变量,具体步骤如下:
在这里插入图片描述
配置path:给系统变量path中添加:%JAVA_HOME%\bin和%JAVA_HOME%\jre\bin如图:
在这里插入图片描述
新增CLASSPATH系统变量,值为:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;,如图:
在这里插入图片描述
10.配置完环境变量后,继续一路确定点击回去后,在终端键入:javac 回车,如果看到以下表示配置成功,如图:
在这里插入图片描述
配置Node.js环境:

Node.js环境在前面已经做过介绍且配置过,如果没有配置且不熟悉配置,可阅读:https://blog.csdn.net/weixin_46758988/article/details/117109297

确保C++环境:

系统一般默认自带C++环境,后面如果报错可手动安装visual studio中的C++环境。

配置Git环境:

关于Git的安装前面也已经介绍过了,如果没有安装且不熟悉Git可阅读:https://blog.csdn.net/weixin_46758988/article/details/116986403

配置Python环境:

1.进入Python官网:https://www.python.org/,进行下载python-3.9.5-amd64.exe文件(版本可不同),如图:
在这里插入图片描述

2.将下载好的python-3.9.5-amd64.exe应用剪切到C盘下F文件夹python中(推荐放到C盘下),双击后在弹出弹框中单击install now,如图:
在这里插入图片描述
3.在弹出的弹框中选择如下图方框单击后关闭此程序即可,如:
在这里插入图片描述
4.在终端输入py查看python是否安装成功,如出现如下所示则表示安装成功,如图:
在这里插入图片描述
配置Android环境:

1.进入网址:https://developer.android.google.cn/在首页点击 下载Android Studio,如图:
在这里插入图片描述
2.在弹出的新页面点击如图所示:
在这里插入图片描述
3.勾选用户协议后点击下载适合自己电脑系统的应用,如:
在这里插入图片描述
4.将下载好的程序放到C盘F目录下(建议C盘下,目录自定义),之后双击在弹出的选框中继续点击Next,如图:
在这里插入图片描述
5.继续Next,如图:
在这里插入图片描述
6.建议修改路径后点击Next,如图:
在这里插入图片描述
注意:这里可能会要求安装在一个空的文件夹中,因此文件夹中如果有文件,需要从新新建一个文件进行安装,这里新建为:androidfile(自定义),之后继续安装。

7.在弹出的选框中默认即可,直接点击install,如:
在这里插入图片描述

8.当进度条完成时,点击Next,此时会弹出一个询问是否启动程序的选择,可选可不选,选择则会进入程序,初次安装建议勾选了解一下,之后点击Finish,如:
在这里插入图片描述
9.如果要启动程序还会弹出弹框,不导入设置即可,如图:
在这里插入图片描述
10.接下来会配置代理等,如果不知道相关配置可忽略,之后选择插件进行下载,最终可以看到如下页面则表示成功,如图:
在这里插入图片描述
安卓配置注意项:

官方对版本有要求,不能使最新版本,具体如下:

1.点击finish,确保:SDK、Platform、Virtual Device存在。
2.官方要求目前安卓支持Android 10 (Q)版本的 SDK,在android studio中config配置下SDK Manager下Android SDK中找对应的Android 10 (Q)版本下载配置即可。
3.同样对ReactNative版本也是有要求的,官方要求React Native 所必须的29.0.2版本,其配置方法是:在SDK Tools中找到对应的29.0.2版本的Android SDK Build-Tools安装即可。
4.在SDK Tools选项卡,点击NDK (Side by side),找到20.1.5948944版本进行安装。
注意:在安装上面配置时,可以一次性选中相关配置,最后点击:Apply一次性下载安装。

5.配置android环境变量(路径大概如下)如图:
在这里插入图片描述
6.将一些工具path配置到环境变量中(%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\emulator;%ANDROID_HOME%\tools;%ANDROID_HOME%\tools\bin),如:
在这里插入图片描述

安装ReactNative(react-native-cli)和yarn:

1.在终端输入:npm install yarn react-native-cli -g 全局安装。

2.yarn默认也是从国外服务器下载包的,如果想要用淘宝镜像,则执行以下命令:

    yarn config set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global

通过react-native-cli打包一个原生移动app:

通过上面开发环境的配置,下面将介绍如何用react-native-cli打包一个原生移动app,其具体步骤如下:

 	1.在终端输入:react-native init mytestreact 初始化一个名为mytestreact的项目。2.当终端显示依赖安装完成后,继续键入:npx react-native run-android3.当显示安装完成时,将mytestreact项目拖到VScode打开,修改App.js中文本部分来测试使用,App.js就是现在页面的主文件4.切换到android目录下,终端继续键入:./gradlew assembleRelease 打一个android的apk安装包5.项目中mytestreact\android\app\build\outputs\apk\release下的apk即是打包后的apk应用。

Weex打包:

    1.终端输入:npm install weex-toolkit -g 全局安装:weex-toolkit脚手架2.终端继续键入:weex create mytestweex 初始化一个mytestweex的项目3.终端进入项目mytestweex目录下继续键入:weex platform add android  如果是创建ios则后面android换ios输入4.终端继续键入:npm install 安装依赖5.终端键入:npm run build 构建打包

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

delphi listview失去焦点后的颜色_阴阳师姑获鸟和惠比寿建模更新对比 爷爷帅了 觉醒后鸟姐颜值提升...

阴阳师体验服近期更新了人气式神姑获鸟还有惠比寿的相关建模,本次特别奉上有关这两位式神的建模形象对比图,对比后发现经过修改和优化之后,爷爷更帅了,而觉醒后的鸟姐颜值也有所提升,一起来看看吧。惠比寿觉醒前觉醒前…

kibana 显示 @timestamp 时间问题(utc or browser当前时间)自动转换显示

https://github.com/elasticsearch/kibana/issues/95 可以统一timestamp时间字段为当前信息时区的时间! http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-date-format.html 转载于:https://www.cnblogs.com/sunxucool/p/3939701.ht…

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发;其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是一个由 Facebook 开发用于构建用户界…

去掉 edittext 长按全选_开封消毒湿巾全选

开封消毒湿巾全选   其实,带有杀菌效果的清洁产品大多通过降低微生物的繁殖力达到预期的杀菌效果,所添加的每种杀菌成分都针对特定细菌,无法杀灭所有细菌。如果产品中的杀菌剂浓度总是不能将细菌完全杀灭,就可能导致细菌对该类杀…

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的?...

上一期小明分享了企业职工养老保险退休待遇怎么算,具体可戳小明说养老|养老金怎么算?小明来教你。在以张阿姨为例的计算举例中,提到张阿姨15年的平均缴费指数为0.8209。对这个平均缴费指数的概念提问较多,今天就来解释一下月平均缴…

ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架; ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替网页中使用的一些元素,如:div, p, img 都不能用了&#xff1…

odis工程师使用方法_傅里叶红外光谱仪常见故障维修及排除方法,你了解有多少种呢?...

傅里叶红外光谱仪在使用过程中难免会出现故障,那我们该怎么检修呢?赛默飞傅里叶红外光谱仪有些光谱仪器的使用说明书会给出光谱仪的常见故障及排查方法,有些光谱仪器还有自诊断功能,当傅里叶红外光谱仪不能正常工作时,…

微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件

微信小程序介绍: 小程序简介: 小程序是一种连接用户与服务的方式,它能在微信内被便捷地获取和传播,具有出色的使用体验。 不需要下载安装,用户通过搜一搜或扫一扫就可以打开使用,使用完后退出即可。 小…

tia v15 添加项目_硬技能,TIA 博途软件界面的介绍

在前面的文章中给大家介绍了TIA 博途软件的安装包等介绍,这次小编给大家介绍一下TIA 博途软件的界面。#电工学习PLC#你知道吗,在博途软件的自动化项目任务的创建中,我们可以使用portal视图和项目视图。Portal视图是面向任务的视图&#xff0c…

UIImagePickerController按钮的中文问题

UIImagePickerController按钮的中文问题 执行以下两步即可 1. 在targets中设置region为China 2. 在project中添加支持中文 转载于:https://www.cnblogs.com/YouXianMing/p/3935460.html

rsatool使用步骤图解_工作中想要事半功倍?图解来助你

一次会议上,老板让我们进行一场头脑风暴,然后将脑中浮现出来的想法以ppt的形式,在会议上与大家分享。在会上我看到其他区域的同事做的ppt,真的叫一个精美啊,有图形对比、有案例分析、有未来展望。反观自己的&#xff0…

ZRender源码分析2:Storage(Model层)

回顾 上一篇请移步:zrender源码分析1:总体结构 本篇进行ZRender的MVC结构中的M进行分析 总体理解 上篇说到,Storage负责MVC层中的Model,也就是模型,对于zrender来说,这个model就是shape对象,在…

java语言概述、java语言特性、java语言发展史、java语言作用

Java介绍: Java语言概述: Java语言是由美国Sun(Stanford University Network)斯坦福网络公司的java语言之父–詹姆斯高斯林,在1995年推出的高级的编程语言。所谓编程语言,是计算机的语言,人们…

电脑显示器不亮主机正常_电脑主机已开机 显示屏却不亮(看完秒懂)

台式电脑是工作的得力助手,我们用的是软件,但是如果硬件出问题了,就无法工作了。有时会遇到台式电脑开机,主机开了,但是屏幕却不亮,是怎么回事呢?现在,笔者告诉大家怎样一步步查明原…

二进制的认识、进制之间的转换、计算机储存单位

二进制: 计算机中的数据不同于人们生活中的数据,人们生活采用十进制数,而计算机中全部采用二进制数表示,它只包含0、1两个数,逢二进一,如:1110。每一个0或者每一个1,叫做一个bit&am…

.net一个函数要用另一个函数的值_VLOOKUP函数

两个表格顺序不同,如何匹配合并?如下图:常常遇到有人问我,两个表格需要按照人名合并起来,但是两表的人名顺序并不相同,怎么处理呢?这个就要用到EXCEL大名鼎鼎的VLOOKUP函数了。具体语法如下&…

外部函数获取内部函数变量_一维随机变量的分布函数

一、分布函数、概率密度(一)一维随机变量的分布函数(二)一维离散型随机变量的概率分布(三)一维连续型随机变量的概率密度(四)一维连续型随机变量的函数的概率密度如:设X的概率密度为f(x), g(x)为连续函数,求Yg(x)的概率密度。方法一、定义法step 1. 求出…

DOS命令、Java语言开发环境(JVM、JDK、JRE)

DOS命令: DOS是一个早期的操作系统(黑窗口),现在已经被Windows系统(图形化)取代,对于我们开发人员,目前需要在DOS中完成一些事情,Java语言的初学者,学习一些D…

shell执行docker命令卡挂住_Docker官方文档翻译4

第四篇:Swarms准备工作安装Docker版本1.13或更高版本。安装Docker compose。安装docker machine阅读第1 2 3部分的内容。确保你已发布并推送到注册仓库的friendlyhello镜像。确保你的镜像可以部署为一个容器。 运行这个命令,在你的信息中插入用户名&…

编写第一个Java程序:helloworld

配置好java开发环境后,我们可以编写第一个java程序(helloworld)。 在开始编写java程序时,我们要知道java程序开发的三个步骤:编写、编译、运行。 编写阶段主要是由程序员编写后缀为.java的文件;将后缀为.ja…