Cordova: 仅使用HTMLJS即可制作一个Android或者iOS的App

JavaScript014

Cordova: 仅使用HTMLJS即可制作一个Android或者iOS的App,第1张

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

翻译一下:

听上去蛮不错的,那么我们就开始用它来做一个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终于搞定了!

一、对于Android和ios我们要执行不同的操作,下面是判断系统的js代码

// alert(ismobile(1))1表示Android,0表示ios

function ismobile(test){

var u = navigator.userAgent, app = navigator.appVersion

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")&lt0){

try{

if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){

return '0'

}else{

return '1'

}

}catch(e){}

}

}else if( u.indexOf('iPad') &gt-1){

return '0'

}else{

return '1'

}

}

二、js调用app端函数,下面是js代码

if(ismobile(1)==1){

Android.setTypeActivity(id,type,href)

}else{

jsToios(id,type,href)

}

setTypeActivity是Android端定义的函数,jsToios是ios端定义的函数,括号里是js端传递的参数。

三、至于js端怎样获取app端的数据,只需在js端提供给app端函数名字,在通知app端调用即可

四、还有一种方法可以不通过app的方法将数据传递给另一个页面,那就是通过URL的方式

在本页面将数据拼接在ip后面

在另外一个页面通过下面方法获取URL后的参数

function GetRequest() {

var url = location.search//获取url中"?"符后的字串

var theRequest = new Object()

if (url.indexOf("?") != -1) {

var str = url.substr(1)

strs = str.split("&")

for(var i = 0i <strs.lengthi ++) {

theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1])

}

}

return theRequest

}

// 获取URL参数

var Request = new Object()

Request = GetRequest()

var name

name = Request['name']

我的世界js必须用到一个工具,那就是启动器,下面就详细的介绍下js的用法:

1、首先下载最新的V1.7.7启动器(安卓版),这个启动器支持我的世界手机版0.9.5;

2、然后运行启动器,也就是打开有个扳手图标;

3、再点Options这个选项,在弹出的界面中选择第二个“Manage ModPE Scripts”。如下图。

4、接下来点“输入”,在弹出的窗口中,第一项“Local storage”是读取你保存在手机中的文件js,第二个“Treebl's official repo”是输入代码js的。