APIcloud 备忘

APIcloud开发备忘

最近在开发一个行业供应链类型的APP,在其中使用了APIcloud技术。试用了APIcloud的superwebview和vue技术。推荐大家使用vue来做数据管理。

但是APIcloud不建议使用单页面应用。我们在实际应用中也发现APIcloud的多窗口管理跟vue的单页面是有些冲突的,但是APIcloud并没有很好解决html代码的共用问题。

思路大家其实都有,比如requirejs,backbone之类的cmd方式引用,但这个也会造成,繁多的文件数。

目前我们开发的h5部分采用的vue多页面,没有使用过多的component,在其中尝试使用mint-ui,但是页面会崩溃,未找到原因,以后再试。

关于窗口管理

窗口管理,是APIcloud开发的一个重中之重,你需要手动管理自己打开窗口,并且适当的,及时的关闭一些没有用的窗口。在H5部分我们都是在html代码中手动关闭窗口。但是很多时候不灵敏。根据测试结果和APIcloud相关说明得到一下经验

所有的窗口手动操作都不应该在窗口切换过程。

api.closeWin({name:'page'}})可以关闭任意窗口,但是要注意一点必须要有延时。也就是说页面一打开就关闭是不行的。必须在页面打开后多少毫秒后再关闭。目前可以在新打开的窗口中使用。

1
2
3
4
5
setTimeout(function(){
api.closeWin({
name:'个人中心'
});
},500)

不使用延时操作,不起作用的原因是你当前窗口的切换操作(新打开)还没有执行结束,在窗口切换过程中,所有的openWin等
如图 closeWin()方法不支持在窗口切换时操作

上拉滚动加载,下拉刷新的应用

原生脚本的使用

原生脚本,我们没有使用,因为发现需要使用openFrame()方法,后来发现这个见解是错误,所以在这里列出来。
官方做了一个 UIPullRefresh
需要注意的两点

  1. 确定监听行为 其实就是定义默认的控制方法
  2. 加在数据方法,然后在加载结束后设置结束状态

分享功能

安卓下使用分享需要自己写一些原生插件,一定不要使用官方的shareAction 太坑 只支持文字分享,没法支持图片分享
目前免费的有微信wx申请了开放平台应用后可以直接使用,还是比较不错的

Vue的使用

测试版本要引入开发版

  1. 开发测试的时候务必要引入开发版本的vue确保你能够快速的定位所书写vue代码的bug位置
  2. 为什么这样做,一开始的时候出了一些语法错误,因为我们的使用方式是es5 而官方的很多例子都是es6和es7导致迁移时,产生很多语法问题,vue不报错,一些token错误,js也没有让APIcloud的exception捕捉到

组件使用的理解

在我们的使用过程中引入了时间组件,引入了vue-date-pickervue-scroller,vue-lazyloadvue-countdownvue-lazyloadvue-scrollervue-date-picker用的最好,因为他有打包好的es5脚本。但是在vue-countdown的上做了好多,我讲他的.vue脚本手工重写成了es5。经过这次重写,加深了对js和vue的理解。
有些组件需要用Vue.use(),有些不需要用,但总得说来都离不开这个component
我其实还是没有分成出 plugincomponent 有什么区别,所以我将他们混淆为一体了。 勿怪,每个人应用的场景和使用深度不同,对事物的理解也不同。

数据为主

vue所有的操控都是数据,我们传递的不再是dom操作,而是数据状态。
一个节点的显示或者根据条件来添加删除节点,都是数据的变化。
dom节点定一个v-show可以控制这个节点的显示
dom节点定一个v-if可以控制这个节点的添加和删除

熟练应用

vue的理念和jquery是不同的,不应该再使用jquery的方式来操作节点。写vue的页面,随着使用时间,使用经验的累积会发现逐渐的减少了dom的操作。

  • Post author: hainuo
  • Post link: apicloud-vue-in-work
  • Copyright Notice: All articles in this blog are licensed under BY-NC-SA unless stating additionally.