源码：
<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 省事）；
要开发出一款流畅体验的 APP，推荐阅读小编的原创文章《开发一款流畅的 Hybrid App 需要知道的事》
文章地址：https://blog.csdn.net/u013350495/article/details/89284167
阅读小编文章，提前绕坑！不踩雷！
作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
