HTML5+js 可以开发手机app么

JavaScript022

HTML5+js 可以开发手机app么,第1张

使用HTML5技术开发APP,实质就是开发一个web app,html5 开发手机app要比pc上面广,如今很多app开发公司都是用了这门语言。结合html5和css的一些特性制作(主要是css3的媒体检查,根据不同视口载入不同样式),但制作出来的东西能否被称为手机app,这个还要看功能,如果你制作出来的东西能完成某些功能或者某种任务,这能被叫做webapp,如果不能就不要叫什么app,最多算是一种手机展示方式。

至于安卓和ios版本的问题,考虑主要是图片分辨率的问题,区别不大。

关于这个问题,还是看看官网是怎么说的吧:

翻译一下:

听上去蛮不错的,那么我们就开始用它来做一个app吧!

创建应用

如果按照Cordova( http://cordova.apache.org/ )官网所述,直接用npm全局安装 cordova ,并创建应用,你可能遇到以下错误:

此时不要紧张,卸载 cordova ,使用 yarn 重新安装一下,猜测可能和npm版本不兼容。

安装好 yarn 和 cordova 之后,使用cli命令 cordova create MyApp 创建project,此时你可能会遇到以下错误:

这是什么原因呢?

原来我们没有将 yarn 的bin目录加入到环境变量 path ,作为一个Windows僵尸粉,判断出这点还是不难的。执行以下命令,找到 yarn 的bin目录所在:

将 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目录添加到windows环境变量 path

配置好环境,重新打开CLI窗口,我们终于可以顺利地创建 cordova 应用,cordova使用默认模板创建好一个Project。

添加Android平台

在项目根目录下,运行命令 cordova build android 来编译你的项目,你可能遇到以下错误:

原因是啥呢?当前cordova要求的Android版本比较高,需要安装 Android SDK Platform 25 才能顺利编译,怎么办? 装!

打开 Android Studio , 安装SDK

安装成功之后,执行命令 cordova build android ,这次终于成功了!

APK包成功打好,这次我们运行一下,执行命令:

这次我们会遇到 环境坑四

不急,仔细看报错信息的意思是没有可用的设备或模拟器。这个简单,打开Android Studio添加一个:

再次运行 cordova run android , 哈! 这次成功了!

什么!闪退!WTF!

运行命令 cordova run android ,将APK包安装到模拟器上结果又报错了!

离成功就差一步了,别泄气!我们慢慢查找原因~

至此,APP终于搞定了!

主要使用:  移动端:ionic、cordova  后端:CoreThink一、安装1.安装node.js 2.安装git 3.安装ionic &cordova: 命令行输入:npminstall –g cordova ionic 注:-g表示全局安装,也可以进入指定的目录安装,但这里推荐全局安装,安装后的目录为C:/users/Administrator/AppData/Roaming/npm/node_modules 4.安装Java JDK 5.安装Apache Ant 6.安装Android SDK(从这里开始后面基本以android为例,ios类似) 7.设置环境变量: ①打开计算机->系统属性->高级系统设置->环境变量 ②在系统变量中新建ANDROID_HOME变量,变量值为sdk所在目录,如图③新建CLASSPATH变量,变量值为.%JAVA_HOME%\lib\dt.jar%JAVA_HOME%\lib\tools.jar ④新建JAVA_HOME变量,变量值为jdk所在目录 ⑤编辑系统变量中的path变量,不要删原来的变量值,在原值后面添加%JAVA_HOME%\bin%JAVA_HOME%\jre\bin%ANDROID_HOME%\tools%ANDROID_HOME%\build-tools%ANDROID_HOME%\platform-tools 注:这里是添加了jdk\bin、jdk\jre\bin、sdk\tools、sdk\build-tools、sdk\platform-tools的路径,互相以英文分号隔开 8.创建项目: 命令行cd进入任何你喜欢的目录,ionic startAnyNameYouLikeblank,如果一切顺利,就会在你指定的目录新建一个你喜欢的名字的文件夹,并在里面初始化一个ionic项目。 9.添加平台 进入刚才新建的项目的目录,命令行输入ionic platform add android 二、在项目目录中有一个www的文件夹,里面的文件有html,js,css等,可随意编写,在platform中的www文件最好不要动它。 三、测试项目 1.进入项目目录,ionic build android编译项目 2.测试项目的方法: 桌面浏览器测试法:ionic serve 模拟器测试法:这个比较烦,而且运行慢,破机子卡到爆,一直没成功,所以略 手机浏览测试法: http://ionicframework.com/docs/guide/testing.html 自己看吧,略 手机测试法:连上数据线,打开开发者选项,执行ionic run android 四、编写项目 http://ionicframework.com/docs/guide/building.html 英文太多,翻译不出来 五、发布app,前面的准备就是为了这一步了 1.执行cordova plugin rm cordova-plugin-console,这一步是Before we deploy, we should take care to adjust plugins needed during development that should not be in production mode. 2.执行cordova build --release android,在platforms/android/build/outputs/apk,中会出现***-release-unsigned.apk,最前面取决于取了什么名字 3.使用keytool打包私有密钥:执行keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 4.给没有签名的apk签名:执行jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name 5.最后一步,执行zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk 六、基本步骤到此结束,可能会出现各种报错的情况,只能具体问题具体分析了, 参考网址:http://ionicframework.com/docs/guide/preface.html https://cordova.apache.org/docs/en/latest/guide/cli/index.html#link-3 http://developer.android.com/sdk/installing/adding-packages.html https://developer.apple.com/ios/download/