使用ClojureScript编写Phonegap应用

phonegapclojureclojurescript

  1. 准备
  2. 创建Phonegap项目
  3. 加入ClojureScript项目
  4. 测试
    1. 使用figwheel测试
    2. 测试Phonegap
    3. 实时预览
  5. 注意事项

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

准备

首先请确保你已经安装phonegap与leiningen。

创建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都不能测试设备特有的接口（如蓝牙等）。如果要测试，只能打包安装到设备上测试
Comment