apicloud+Vue.js使用指南(源码+设计思路)
源码:<html><head><!-- 头部代码省略 --></head><body><div id="app"><div class="title"><div :style="{'height':(top+'px')}"></div><...
·
源码:
<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,邮箱:helang.love@qq.com
公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号
更多推荐
已为社区贡献10条内容
所有评论(0)