apicloud+Vue.js使用指南

如何在 APICloud 中使用 Vue.js 进行高效开发--重要

 

如何在 APICloud 中使用 Vue.js 进行高效开发_GeekAaron的博客-CSDN博客
apiCloud中引用vue.js的用法_weixin_43368635的博客-CSDN博客

在apiCloud中引用vue.js主要是使用vue的双向数据绑定，vue模块可添加在 apiready中生效，添加vue后，初始化页面的函数需要在created中执行，代码如下：
apiready = function () {
    var app = new Vue({
        el: '#myApp',
        data: {
          // 双向绑定的数据类容
          text: "apiCloud双向绑定"
        },
        created: function () {
          // vue页面初始化执行
          this.text = "成功引入vue"
        },
        methods: {
          // 注册vue函数
        }
      })
      // apiCloud 初始页面执行函数
      showTime();
}

// 当前时间
  function showTime() {
    let date = new Date();
    let dateWra = document.getElementsByClassName('cTime')[0];
    dateWra.innerHTML = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  }

HTML中便可以使用相应的数据

<div class="cTime"></div>
{{text}}

关于页面传参，可直接用apiCloud提供的方法在vue的 methods中使用：

    methods: {
          let val = this.text;
          api.openWin({
             name: 'nextPage',
             url: './nextPage.html',
                pageParam: {
                //  需要传递的值
                name: 'test',
                   nextPageVal: val 
                }
         });
    }

在下个页面的apiready中就可以直接取到传递的val:

apiready = function () {
    // 获取上个页面传递的Val
    let myVal= api.pageParam.nextPageVal;
}
————————————————

1、 用vue做dcloud的前端，是不是vue脚手架cli不建议用了，否咋把项目复杂化了，我们只需要用vue的数据渲染能力（数据一般都是从服务器ajax拉取的）
2、vue写在哪里：情景：apiready 后拉取服务器数据，下拉刷新重新拉取数据，用vue显示数据。
如果apiready 调用拉取数据方法，这时候new Vue写在apiready 外面，否则其他地方方法读取不到初始创建的vue。
如何拉取服务器数据写在apiready 内，new Vue写在apiready 内外无影响。
一句话：apiready = function() {}内不能定义全局变量。

 

var vuedata = {
        'userinfo': {},  //用户信息
        'yy': {}  //语言包
    };
    var app = new Vue({ //创建vue
        el: '#app',
        data: vuedata
    });
    apiready = function() {
        km_apiready('frm'); //api初始化处理状态栏等方法
        vuedata.yy = km_yuyan_data(); //加入本地多语言包语言数据
        ajax_base(); //从服务器拉取页面基本信息-用户数据
        api.setRefreshHeaderInfo({ //下拉刷新
            loadingImg: './image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: false
        }, function(ret, err) {
            ajax_base('xiala');        //从服务器拉取页面基本信息-用户数据
            if(vuedata.yy.yuyan!=$api.getStorage('yuyan')){
              vuedata.yy = km_yuyan_data(); //刷新语言包数据
            }
        });

    }

    function ajax_base(xiala) { //获取页面基本信息
        km_fasong_ing(); //开启数据通讯中蒙版 防止重复提交
        api.ajax({
            url: km_sis('sis_url_ome') + 'api/wode/index',        //服务器地址
            method: 'post',
            headers: km_fasong_tou('api/wode/index'),        //头部信息处理函数
            data: {
                values: km_fasong_data({        //发送数据过滤函数
                    uname: $api.getStorage('uname')
                })
            }
        }, function(ret, err) {
            if (xiala) {
                api.refreshHeaderLoadDone(); //关闭下拉刷新
            }
            km_fasong_end(); //数据通讯结束关闭蒙版
            if (ret) {
                ret = km_jieshou(ret);        //接收数据过滤函数
                if (ret.apizt == 1) {
                    vuedata.userinfo = ret.userinfo;        //更新vue内data信息
                } else {
                    km_toast(ret.msg);
                }
            } else {
                if (err.body) {
                    console.log(err.body)
                } else {
                    console.log($api.jsonToStr(err));
                }
                km_toast('网络错误');
            }
        });
    }

==============================================