| 混合开发, cordova, 调试

hybrid开发

Hybrid App（混合模式移动应用）开发是指介于Web-app、Native-App这两者之间的一种开发模式，兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。很多人都知道，React Native 是 Facebook 开源的框架，可以直接用 Javascript 开发原生的APP.

安装cordova

1
npm i cordova -g

创建

1
2
cordova create 文件夹名字 包名(example.footballSNS) 项目名(footballSNS)
cd->上面文件夹名字的文件夹中

安装平台

1
2
cordova platform  ls 查看本地安装了什么平台 
cordova platform add android 安装ANDROID平台

Build

1
2
3
4
5
6
7
先安装java的JDK ->更改路径 安装完后执行 java 出现提示表示成功
 安卓的SDK ->里面有两个目录都要更改到同一个目录
 	配环境变量
 	新建一个JAVA_HOME 变量值为jdk的目录
 	新建一个ANDROID_HOME  变量值为sdk的目录
cordova build android 会安装一些安卓的依赖包 
//可以在本地虚拟机测试

连接手机

执行 cordova run android –device 打到手机上

netstat -ano|findstr “端口号”查看该端口的占用情况

1
2
在index.js ->deviceready里面做自己的事情
改图标 platform  ->res ->hdpi mdpi xhdpi 覆盖图片

将本地文件打入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在wwww目录下操作
在index.html 先引入<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
	document.addEventListener('deviceready',function(){
		//动态创建
		//script标签
		var scripts =["路径a","路径b"];
		for(var i=0;i<scripts.length;i++){
			var script =document.createElement('script');
			script.src=scripts[i];
			document.body.appendChild(script);
		}

		//link标签同理
		},false)
</script>

装一个浏览器平台 可以在本机调试

1
2
cordova platform add browser
cordova run browser 在本地调试

chome调试方法 只适用于Android 4.4以上

1
chrome://inspect 点inspect

Welnre调试

1
2
3
4
5
6
7

cnpm i weinre  -g //web inspect remote 远端web测试
weinre --httpPort 端口号 --boundHost -all-//启动
浏览器打开输入ip:8080
拷贝example里面的代码放到入口文件
修改webpack配置devServer里面加一项 host: //里面是IP 手机访问的IP
输入ip:端口 access里面

debuggap调试

1
2
3
4
5
6
7
debuggap.com
下载文件夹里client->debuggap.js 拷贝到index可以方便访问的地方
启动Debuggap
入口引入debuggap.js
打开Debuggap ->web工具->调试H5 到webpack里面的host配置
打开connect 
手机打开会出现一个圆圈 点击打开出现一个大图标 第三象限有个config  里面有serverport 写上host:端口号

MAC打包

1
2
3
4
5
6
7
8
9
cnpm i cordova -g //安装cordova
cordova create 文件夹名字 包名(example.footballSNS) 项目名(footballSNS)
cordova platform add ios --save  //安装ios平台 
cordova build
cordova run ios --device //需要证书
在build Settings ->Gemeral ->automa
sigins里面都选developer
手机连接->在Device中选择自己的 ->run
选择手机 模拟器打开 scale调整下模拟器的大小

Mac调试

1
自带浏览器就可以调试

安装plugins

1
cordova plugin add cordova-plugin-camera //安装相机插件