绪论
学习appcan也有一段时间了。开发了一些demo 。还没有开发出产品。这里就appcan的学习进行讲述,让大家远离破烂学习资料的坑。
appcan官网有学习的视频和文档,视频还是那个6小时的好一点(在首页上点击学习中心)。其他的都白扯,个人觉得讲的不好。快睡着了。
吐槽
看了视频在看文档,文档非常次有很多错误。例子也不是很好,根本学不会的。加群和论坛。几乎是问了问题没人回答你。再说初学者也问不出来啥。
这时候我们最快的就是学习方式就是demo 然后才是文档,最后是源码分析。 那对于初学者继续改怎么学呢。看完视频还是不会(可能我学习能力不强吧)。
正题
下面我就针对学习能力不强的同学说一下关键点,穿一下主线,做两个demo ,然后开发项目。顺便说一下,你的下载他们的ide 学会简单的调试,网上有很多文章,这里不讲解了。
appcan 在你看6小时的时候 。 主要有ui部分。和插件部分。
appcan特性
ui部分 有个appcan的两个核心;我就两个核心讲解一下我的理解,和appcan的原理。
这里说一句废话:appcan 其实不是一种html 的开发,他和phoengap 是不一样的。他是一种深度的混编,可以说更像nativejs。
第一个特性 ,ui 采用弹性盒模型 。这个东西是一个css的东西,不过对于一把我这种后端java 或者 php的开发人员来说,是一个熟悉又陌生的东西。知道又不太会用,这时候我发现了一个好东西——那就是张鑫旭的博客,写的很详细
看完他的博客后,自己写两个例子,然后看看appcan的css 源码。你用他的IDE 随便建一个项目在css中就能找到。 弹性盒模型就攻破了。
第二个特性,窗口模式。窗口是appcan的一个核心亮点,他不是简单webView 直接加载你的页面。而是多个webView 这些多个的webView 建成一个栈,每一个webview 是一个窗口,也是你的一个页面。你打开一个页面就将一个页面压栈同时取一个名字。你按下返回键后就将这个页面弹栈。这样你就可以看到像原生一样的效果了。不会你 a 标签打开一个页面。关闭了。然后在打开又刷新了。(这也是appcan速度快的一个原因)
好了这里就产生了一个问题。你的页面弹栈以后,是不会消失的。那你怎么通知他刷新呢。appcan为了解决这个问题,提供了两种方式。
第一种 订阅式 非常重要的两个方法
appcan.window.publish( id, msg) 第一参数是通道id (自己定) 第二个是通知的信息
appcan.window,subscribe(id,fun) 第一个参数是通道id (你想收到那个通知) 第二个 通知的回调函数 function(msg)
第二种 指定调用 在窗口模式中,我们有两种打开窗口的模式
一种 appcan.window.open(name,页面name) 第一个参数你取的名字,第二个参数页面路径
补充:第一个面就是启动页面,名称叫做root 。 其他参数看官网的api 是一些打开页面的特效设置。
二种 appcan.frame.open (选择器,路径 ,距离左边,距离上边) 这个是打开一个悬浮窗口,这个窗口指定一个div 或者一个位置打开,同时这个位置的名称还是他的名称,建议使用id
回到调用上 对于窗口 appcan.window.evaluateScript("friend","list()"); 第一个参数 页面名称,第二个参数js 代码,可以调用指定页面你的方法。
对于悬浮窗口 appcan.window.evaluatePopoverScript("root", "content", "go()"); 第一个参数页面名称, 第二个参数悬浮窗名称,第三个参数 js代码
好了你会了这个,你就可以处理,用户登录后,让那个页面加载什么数据,只需要在那个页面写好方法调用,或者订阅模式都可以。
注:初学者会发现,appcan中 uexwindow 什么的每个官方的例子给的都不太一样。打开窗口的方式有很多。其实都是一种uexwindow 。其他什么jssdk中都是对uexwindow 的封装,yz等等都是封装。也就是所有jssdk都是对uex的封住哪个。 你随便会一个就行。但是uexwindow 在预览(appcan的ide调试用的)中可能不好使。 jssdk 中appcan.window这种,有时候好使,有时候不好使郁闷。
插件导语
系统的插件可以直接本地生成apk进行调试,或者使用它的调试工具进行调试,第三方的sdk只能在线打包进行调试,这里不说了全是泪,我会在环信插件的使用的时候的文章给出,解决办法。
下面给点福利, 我吧appcan的一些好的例子都收集了一下进行分享 : 其中有美食app 、 会生活、环信使用demo 、官方demo 、hiappcan 、 appcanshow 等
地址如下 http://pan.baidu.com/s/1sltafCD