兰塔教程:10分钟写一个H5混合型应用app(Android+iOS双平台)

使用H5开发出来的App可以是混合型应用（Hybrid App），也可以是Web的应用（Web App）。混合型应用安装在iOS和安卓手机上，Web的应用在微信中运行。混合型应用看上去是一个本地化应用（NativeApp），其实里面只有一个UIWebView，就是包了个客户端的壳，其实里面是H5的网页，通过Cordova插件，使得App具备访问本地服务的能力，例如相机、录音等等。

1.下载node.js，如果您的电脑是windows版本，请直接下载并安装：

https://nodejs.org/dist/v6.11.1/node-v6.11.1-x64.msi

点击下一步

继续下一步直到完成

2.安装cordova组件：打开命令行工具，直接运行：npm install -g cordova.

完成后直接回车即可，等待下载

此服务器在外网，可能会比较慢，请耐心等待

安装完成后，若有安装问题请在留言区评论

3.使用cd命令进入一个工作目录，执行以下命令语句然后新建一个cordova项目：

d:cd workspacecordova create MyApp

请依次执行以上命令

这里输入y就好了

4.得到一个由cordova帮我们创建好了的应用：

这是一个比较完整的目录

5.为这个应用添加一个平台（Android，iOS或WP），此次我们以Android为例（请提前配置好android-sdk，最简单的办法是下载一个android studio）：

cordova platform add android

6.如果您拥有一部安卓手机并且开启了开发者模式，则可以直接使用命令行安装我们的应用：

cordova run android

手边没有安卓手机怎么办？我们可以下载一个安卓模拟器：

http://aliosscdn.bluestacks.cn/package/BluestacksCnSetup.exe

然后运行：

cordova build android 此时cordova为我们打包了一个apk文件供安装：

d://workspace/myApp/platforms/android/build/output/apk/android-debug.apk

7.为了开发的方便，建议您安装一个浏览器平台：

cordova platform add browsercordova run browser 此时会自动弹出一个浏览器页面：

这里就是我们的第一个混合架构的app页面

8.现在您可以根据自己的需求进行html页面的编写了：

html,js,css文件都这里面

此时根据您的需求尽情编写吧

今天的教程就到这里，感谢您的耐心观看，有疑问可以在评论区提出，小编会第一时间解答。

此篇教程仅仅是入门篇，还有许多功能比如各种插件各种模板我们没有接触到，请关注兰塔观察的后续文章。