apicloud+Vue.js使用指南（源码+设计思路）

本文主要是介绍apicloud+Vue.js使用指南（源码+设计思路），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

源码：

<html>
<head><!-- 头部代码省略 -->
</head>
<body>
<div id="app"><div class="title"><div :style="{'height':(top+'px')}"></div><div @click="look">{{authorInfo}}</div></div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">var vueObj={el: '#app',data:{top:0,author:{"name":'helang',"age":24,"job":'web前端工程师'}},computed:{authorInfo:function(){return '姓名：'+this.author.name+"，年龄："+this.author.age+"，职业："+this.author.job}},mounted: function () {this.$nextTick(function () {/* 设置顶部安全区域，解决状态栏沉浸式 和 刘海屏问题 */this.top=api.safeArea.top;});},methods:{look:function(){api.toast({msg: '点击了作者信息',duration: 2000,location: 'bottom'});}}}apiready=function(){/* apiready 函数中 实例化 Vue 对象，并添加到 window 全局对象中暴露出去 */window.app = new Vue(vueObj);}
</script>
</body>
</html>

为何要这样设计，请看下方的【设计理由】

设计理由：

Vue 函数接收的参数以一个对象传入是将api与vue本身分开，避免代码片过多；
如键盘监听、窗口手势监听、下拉刷新等操作与 Vue 关系不大，这类代码写在 apiready 函数中即可。监听方法触发后调用 Vue 对象相应的方法即可；
因为要使 apiready 函数中可以调用 Vue 的实例对象（其它窗口调用指定窗口的函数），所以将对象的实例(app)添加到 window 中，与赋值给全局变量一个道理。这样在 apiready 函数中可以使用 app.look() 就能执行 Vue 实例对象的 look 方法了。
为了使 apicloud 项目拥有流畅的窗口切换体验，得将 js 函数在窗口切换动画结束后再调用。这时候只需要在 apiready 函数中延迟实例化 vue对象即可（延迟方式有setTimeout 或 viewappear 方式，可能 setTimeout 方式不是最科学的方式，但是比 viewappear 省事）；