用HTML和JS来开发移动app - Hello Cordova

发现对一个习惯了硬件设备侧C开发的人来说,不管是用cordova(HTML+JS) 还是直接用android studio(JAVA)开发,都是一样的...都是从0开始。

之前虽然高中时代做个网站,也仅限于用FLASH和Dreamweaver 所见即所得开发.. 对Html CSS JS都是一窍不通。为了给设备开发APP,在w3school上硬着头皮看了4个小时JavaScript 课程。勉强能把它当C++中的结构体和类来幻想一下,具体更多了解还需要实战.

昨晚把开发环境部署好了,今天看了半天的JavaScript教程,晚上边google边尝试着开发第一app。

首先在终端利用命令行创建一个app项目,

cordova create 1stProject com.1stproject.hello HelloWorld

接着添加 android 相关工具,

cordova platform add android

成功后可以看到新建成功一个1stProject的文件夹,里面这个HelloWorld项目的所有工程文件了。

用Webstorm打开后,简单了下,主要文件是就www文件夹下的index.css index.js index.html 文件了。

Webstorm界面截图

根据下午看的一点JS皮毛,稍微修改了下代码,实现按下“Click Here”文字后会变成“Hello World”

<div class="app">
            <div id="deviceready" class="blink" >
                <p class="event listening" id="demo">Click Here</p>
            </div>
        </div>
        <script>
            document.getElementById("deviceready").onclick = function(){myTest()}
           function myTest()
           {
               document.getElementById("demo").innerHTML="Hello World"
           }
        </script>

可以打开index.html预览效果,鼠标点了下确实变了。试试插上手机,然后将app编译后安装到手机中去试试(手机必须把USB调试模式打开):

cordova run android

效果还不错 :) 我的第一个手机app 哈哈
手机APP截图

感觉要排出好看的版面不容易啊,到京东买本HTML和JS入门的书先...春节规划:完成一个手机计算器APP - 再通过蓝牙实现跟硬件设备侧LCD同步显示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值