使用ClojureScript编写Phonegap应用

本文简单介绍使用ClojureScript开发Phonegap应用。示例以安卓平台为例,Web及iOS平台方法类似。

准备

首先请确保你已经安装phonegapleiningen

创建Phonegap项目

我们先创建一个Phonegap项目:

# 创建Phonegap项目
phonegap create CljsPhonegap
cd CljsPhonegap
# 添加Android平台
phonegap platform add android

确保能正常运行:

# 本地浏览器预览
phonegap serve
# 或连接手机测试下
phonegap run android

加入ClojureScript项目

回到上级目录,并新建一个ClojureScript项目:

cd ../ 
lein new figwheel cljs-phonegap -- --reagent

将ClojureScript代码合并至Phonegap项目中

cp -r cljs-phonegap/project.clj CljsPhonegap/
cp -r cljs-phonegap/src CljsPhonegap/
cp -r cljs-phonegap/resources CljsPhonegap/

静态资源位置应该一致,这里将public目录链接到Phonegap的www目录

cd ../CljsPhonegap/resources
rm -rf public
ln -s ../www public

编辑CljsPhonegap/www/index.html,使用ClojureScript编译js替换,即将

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
   app.initialize();
</script>

替换为

<script src="js/compiled/cljs_phonegap.js" type="text/javascript"></script>

编辑CljsPhonegap/www/index.html,修改交给ClojureScript处理的DOM,即将

<div class="app">

修改为

<div class="app" id="app">

测试

使用figwheel测试

这里将测试ClojureScript项目能正常编译。

cd CljsPhonegap
lein figwheel

从浏览器打开http://localhost:3449/index.html可预览结果。

修改core.cljs,确认figwheel实时预览正常:

[:h3 "Hello cljs-phonegap!"]

测试Phonegap

先测试Phonegap打包正常:

phonegap run android

安装成功后,应该能看到我们修改后的页面。

实时预览

这时再编辑core.cljs,我们会发现ClojureScript页面http://localhost:3449/index.html会自动更新,但安卓App不会自动更新。这是因为Figwheel使用Websocket热更新代码,但打包至App后,App端的Websocket并不能与本地运行的figwheel连接。

解决办法是使用Phonegap官方的App(从这里下载:https://phonegap.com/getstarted/)。安装并打开这个App,然后在本地CljsPhonegap目录里,执行

phonegap serve

在PhoneGap App里输入上面命令执行后显示的网址,就可以实时预览了。

注意事项

  • 在调试过程中,本地Figwheel Web页面(http://localhost:3449/index.html)不能关闭,以便Figwheel能实时编译。
  • 不论是Figwheel Web页面还是PhoneGap调试App都不能测试设备特有的接口(如蓝牙等)。如果要测试,只能打包安装到设备上测试
留言