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

Love The Way You Lie 2021-12-19 16:09 468阅读 0赞

### 源码： ###

<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 需要知道的事》][Hybrid App]

### 文章地址：[https://blog.csdn.net/u013350495/article/details/89284167][Hybrid App] ###

# 阅读小编文章，提前绕坑！不踩雷！ #

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Hybrid App]: https://blog.csdn.net/u013350495/article/details/89284167
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211219/b68c4f63078b471ba608288910f5fe01.png