下载文档

IDE开发流程之多入口开发(Beta版)
更新时间:2016-09-09

随着移动互联网的爆发,入口之争愈演愈烈。从大的趋势看,App、Web、微信成为最火热的三大入口。这给移动开发者和移动创业者带来新的考验,需要考虑多个入口下的开发与管理。
顺应这种趋势,AppCan全新升级IDE系统,为开发者提供全入口开发支持,即一次开发,多平台,多入口,全适配。基于AppCan新版IDE,开发者可一键生成App、Web/微信 App两种形式,轻松应对市场需求,在竞争中更胜一筹。

写在前面:以Windows版ide操作为例,mac版ide可参考以下操作。

1、使用范围

当您的应用中仅涉及到了以下方法,均可支持生成Web/微信 App。

uexWindow.open
uexWindow.cbOpen
uexWindow.close
uexWindow.cbClose
uexWindow.closeByName
uexWindow.openPopover
uexWindow.closePopover
uexWindow.setPopoverFrame
uexWindow.setBounce
uexWindow.refreshBounce
uexWindow.evaluateScript
uexWindow.evaluatePopoverScript
uexWindow.alert
uexWindow.closeAlert
uexWindow.confirm
uexWindow.toast
uexWindow.closeToast
uexWindow.actionSheet
uexWindow.cbActionSheet
uexWindow.bringPopoverToFront
//窗口打开暂不支持多窗口数组形式

另外,想要使用微信接口,需要后端提供一个签名服务器(该版面提供nodejs 版本),并且再所有用到接口的页面进行签名否则所有接口失效,该版本提供一个setWeiXinConfig(url)方法,进行自动签名,URL是签名接口的完整路径。
已兼容接口:

· startRecord <==> uexAudio.startBackgroundRecord
· stopRecord <==> uexAudio.stopBackgroundRecord
· onVoiceRecordEnd <==> uexAudio.cbBackgroundRecord
· playVoice <==> uexAudio.open && uexAudio.play
· pauseVoice <==> uexAudio.pause
· stopVoice <==> uexAudio.stop
· onVoicePlayEnd <==> uexAudio.onPlayFinished
· chooseImage <==> uexImageBrowser.pick && uexImageBrowser.pickMulti
· previewImage <==> uexImageBrowser.open
· getNetworkType <==> device.getInfo(‘13’)
· openLocation <==> uexBaiduMap.open && uexBaiduMap.setZoomLevel && uexBaiduMap.setCenter
· getLocation <==> uexBaiduMap.getCurrentLocation
· scanQRCode <==> uexScanner.open
如想用微信其他接口,可自行封装。

2、使用方法

在IDE中应用开发完成后,如要生成Web/微信 App,需先配置当前应用的config.xml文件,勾选”Web/微信 App”选项并保存;

请注意勾选保存之后,以下文件默认会被替换成web微信文件,否则以下操作无法正常进行!

注:勾选“Web/微信 App”后,请避免使用页面实时预览、模拟器调试及svn代码上传功能。如想使用,请提前在config.xml文件中勾掉不选。

在当前应用中选择phone目录右键,

1)、选择“启动Web/微信 App服务”,可启动本地服务在内网中预览应用效果,此时控制台会显示本机IP及端口

测试验证是否生效:在手机浏览器或微信中输入或扫描IP+端口地址,直接预览应用效果;

2)、选择“生成Web/微信 App”,在安装目录中的WebApp-Applications中生成一个zip包

将zip包部署至外网服务器即可访问。

3)、项目开发完成后需要部署到服务器上才能访问,首先你需要一台外网机器,以我的测试机器为例,登录到服务器上

可以自己部署服务器,也可以用我们提供的nodejs包nodejs包,安装nodejs,也可以参考nodejs官方文档,按照完成后输入node –version;查看nodejs是否安装成功

部署我们提供的nodejs包,可以在index.js中修改端口号,你的webapp应该放在public文件下,该目录默认为静态文件目录,你也可以在index.js中修改

把该包传到服务器上然后,切换到相对应目录用node index.js来启动服务

注:使用node index.js启动服务时如遇以下错误,请在根目录创建logs目录即可


我们就可以在手机上访问我们的web app网站了地址为:http://ip:port/index.html
如果我们想生成微信的app,调用微信的接口,我们需要修改一下配置文件,来启动签名服务。打开config目录下面的config.js文件

在微信的公众号管理后台中找到这些参数,参考:
http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

配置完成后重写启动node服务器后,可以打开默认的签名服务接口

如需配置为自有的公众号接入微信JS SDK接口,需登录公众号微信公众平台-》公众号设置-》功能设置-》js接口安全域名设置,
例如:

生成微信版项目中plugin.js中已设置window.setWeinxinConfig()注册签名,在微信中打开然后所有的接口都可用了,如需更改请根据需要传入相应参数。
微信jssdk接口验证使用的,只有使用的微信jssdk的时候才有用。设置当前站点当前页面的url到微信jssdk官网验证通过

在微信中打开然后所有的接口都可用了,demo效果,demo下载

3、常见问题及解决方法

1)、名称冲突:如果你修改了一个元素属性或者一个元素的样式不起作用时,你可以考虑一下去检查是不是元素命名冲突了,因为我们要把所有的popover合并到一个页面中所以会有冲突问题。
2)、css样式覆盖:如果你加载一个页面后原始页面的其他样式乱了,你可以考虑一下新页面中的样式是否把原有样式覆盖了,因为我们要把所有的popover合并到一个页面中所以会有冲突问题。
3)、css样式不起作用:如果你打开一个新的popover页面,引用的css文件中修改样式不起作用,可以考虑这个问题,同一个样式在同一个win中只会加载一次,后续的不会加载。
4)、js冲突问题:如果你新打开一个浮动窗口,然后关闭了,以前写的某个方法原本好的现在报错了,可以考虑一下这个问题,因为我们要把所有的popover合并到一个页面中所以会有冲突问题。
5)、js判断问题:如果你新打开一个浮动窗口,执行一个判断某一个变量是否存在,或者不是按照正确的方式,可以考虑一下这个问题,因为我们要把所有的popover合并到一个页面中所以会有冲突问题,所以后面执行后会修改已存在的变量。
6)、body、html样式问题:如果你在body、html上面加了一些样式,在web app中可能不显示,因为我们默认会把所有的body、html、head等元素删掉。
7)、滑动区域高度问题:如果你打开popover之后操作dom,高度变化,请尽量调用refreshBounce更新IScroll高度,否则可能滑动到底部会有显示不完全的问题
8)、白色popover问题:由于popover会相互覆盖,web app默认会把所有的popover设置成白色,如果需要将popover设置成透明,请根据文档设置extraInfo参数。
9)、返回按钮:因为open的页面设计为跳转,如果你在一个页面调用openPopover,然后在popover内调用open是从主窗口直接跳转,然后close主窗口返回上一个主窗口,可能返回不到你之前在主窗口操作的记录如底部有tab选项卡切换popover时,可通过setPopTabIndex(popName,index)设置浮动窗口对应的tab选项卡的索引值,配合监控回调函数

  1. window.onUexWindowClose = function(obj){
  2. console.log(obj.tabIndex);
  3. tabview.moveTo(obj.tabIndex);
  4. }//实现close返回当前主窗口时打开对应的浮动窗口和tab选项卡

10)、修改页面高度多出内容会覆盖:因为我们用的是IScroll加载页面,如果内容修改需要重新刷新页面保证页面滚动,请调用refreshBounce()来保证页面效果。
11)、页面展示内容覆盖:可以考虑内容是否是异步加载的,因为我们是直接取现有的高度如果你异步加载某些内容的话重新修改高度可能会把原来的已经算好的popover覆盖掉。
12)、页面不能滑动:如果你在某一个元素上面绑定了事件,同时阻止了事件的传播这一块可能造成IScroll接受不到事件导致页面不能滑动。
13)、功能不能用:请检查是否用到了没有封装的接口,目前我们只对uexWindow做了封装,如果是微信内运行的话还有一些微信的插件可以支持,另外如果取数据的话可以把appcan.request.ajax 改为Zepto.ajax,同时保证参数问题,因为Zepto传文件会有问题,建议复用函数,这些多多少少还是有一点不同的,getJSON,get,post这些方法完全可以使用。
14)、元素点击等默认事件不响应:如果打开的页面是popover,内部在元素上添加了onclick事件,微信/web点击的时候无法响应,请给元素添加以btn开头的className,例如btn-click.因为iframe内容外层添加了IScroll,元素默认的事件被阻止。
15)、close返回问题:因为web版新open方法打开一个页面是通过url跳转,所以如果调用open方法打开了a.html,当a.html加载的时候调用open方法则从a.html跳转到b.html,所以当从b.html调用close方法返回到a.html的时候又会open跳转到b.html从而陷入死循环,因此类似原app版本的抽屉效果暂时未予支持


以上信息是否解决您的问题?


免费注册,快速体验