apicloud结合vue实现数据实时刷新使用工具类

1.在入口页 index.html

apiready = function(){



        var dataDefault = {
            user:{
              nickname:'胡辉',
              age:'18',
              sex:'男',
              avatar:'../../image/photo.png'
            },
            setting:{
              func:'智能翻译',
              voice:'小燕-女青、中英、普通话',
              type:'普通话'
            },
            chat:{

            },
  }
     var datastr = api.getPrefs({
            sync:true,
            key: 'data'
     });
     console.log(datastr)
     if (datastr==''){
       api.setPrefs({
           key: 'data',
           value: JSON.stringify(dataDefault)
       },function(ret,err){
         console.log('初始化完成')
       });

     }
     api.openSlidLayout({
          type: 'left',
          fixedPane: {
             name: 'sectting',
             url: 'html/setting/setting_win.html'
          },
          slidPane: {
             name: 'mian',
             url: 'html/main/main_win.html'
          }
          });
        }

2.在setting_frm.html

2.1导入 common.js

  <script type="text/javascript" src="../../script/common.js"></script>

      var data;
      var app;

      apiready = function(){

        //获取本地数据
        data = $tools.getData();
        console.log('setting页面得到的data：' + JSON.stringify(data));

        app = new Vue({
          el: '#app',
          data: data
        });

        //添加data refresh事件监听

        api.addEventListener({
            name: 'avatarsave'
        }, function(ret, err) {
            console.log('头像已经保存好了:' + JSON.stringify(ret));
            $tools.saveData('user',{
              avatar: ret.value.avatarurl
            });
        });

      };

      //保存数据

      //选择功能
      function setFunc(){
        api.actionSheet({
            title: '选择功能',
            cancelTitle: '取消按钮',
            buttons: ['智能翻译','智能聊天']
        }, function(ret, err){
            if( ret ){
                if (ret.buttonIndex==1) {

                  $tools.saveData('setting',{
                    func:'智能翻译'
                  })
                }else if (ret.buttonIndex==2) {

                  $tools.saveData('setting',{
                    func:'智能聊天'
                  })
                }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });
      }

      //选择功能
      function setVoice(){
        api.actionSheet({
            title: '选择发音人',
            cancelTitle: '取消按钮',
            buttons: ['小燕','小明']
        }, function(ret, err){
            if( ret ){
                if (ret.buttonIndex==1) {

                  $tools.saveData('setting',{
                    voice:'小燕'
                  })
                }else if (ret.buttonIndex==2) {

                  $tools.saveData('setting',{
                    voice:'小明'
                  })
                }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });
      }

      //选择识别语言
      function setType(){
        api.actionSheet({
            title: '选择识别语言',
            cancelTitle: '取消按钮',
            buttons: ['普通话','粤语']
        }, function(ret, err){
            if( ret ){
                if (ret.buttonIndex==1) {

                  $tools.saveData('setting',{
                    type:'普通话'
                  })
                }else if (ret.buttonIndex==2) {

                  $tools.saveData('setting',{
                    type:'粤语'
                  })
                }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });
      }

      //唤醒开关
      function setWakeup(){

        $tools.saveData('setting',{
          wakeup:!data.setting.wakeup
        })
      }

      function openUser(){
        api.openWin({
            name: 'user',
            url: '../user/user_win.html'
        });

      }

3在user_setting.html

      var app;
      var data;

      apiready = function(){

        data = $tools.getData();
        console.log('user页面得到的data：' + JSON.stringify(data));

        app = new Vue({
          el: '#app',
          data: data
        });

        //添加data refresh事件监听
        $tools.dataRefresh(app);

        //添加一个头像保存完成的消息监听
        api.addEventListener({
            name: 'avatarsave'
        }, function(ret, err) {
            console.log('头像已经保存好了:' + JSON.stringify(ret));
            $tools.saveData('user',{
              avatar: ret.value.avatarurl
            });
        });

      }
      function setAge() {
        api.prompt({
            title:'年龄',
            text:$api.html($api.dom('#age')),
            type:'number',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret.buttonIndex==1 )
                $tools.saveData('user',{
                  age: ret.text
                });
            }else if(ret.buttonIndex==2){
                 alert( JSON.stringify( ret ) );
            }
        });

      }

      function setSex(){
        api.actionSheet({
            title: '设置性别',
            cancelTitle: '取消按钮',
            buttons: ['男','女']
        }, function(ret, err){
            if( ret ){
                if (ret.buttonIndex==1) {
                  $tools.saveData('user',{
                    sex: '男'
                  });
                }else if (ret.buttonIndex==2) {
                  $tools.saveData('user',{
                    sex: '女'
                  });
                }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });

      }

      function setName(){
        api.prompt({
            title: '修改',
            msg: '请修改昵称',
            text: $api.html($api.dom('#nickname')),
            type: 'text',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret ){
              console.log(JSON.stringify( ret ));
              if (ret.buttonIndex==1) {
                $tools.saveData('user',{
                  nickname: ret.text
                });
              }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });

      }

      function setAvatar(){
        api.actionSheet({
            title: '更换头像',
            cancelTitle: '取消',
            buttons: ['打开相册','打开相机']
        }, function(ret, err){
            if( ret ){
              var sourcetype = ''
              if (ret.buttonIndex==1) {
                sourcetype = 'library';
              }else if (ret.buttonIndex==2) {
                sourcetype = 'camera';
              }else {
                return;
              }
              api.getPicture({
                  sourceType: sourcetype,
                  encodingType: 'jpg',
                  mediaValue: 'pic',
                  destinationType: 'url',
                  allowEdit: true,
                  quality: 100,
                  saveToPhotoAlbum: false
              }, function(ret, err){
                  if(ret){
                    console.log(JSON.stringify(ret));
                    if (api.systemType=='ios') {
                      $tools.saveData('user',{
                        avatar: ret.data
                      });
                    }else{
                      api.openFrame({
                          name: 'avatar',
                          url: './avatar_frm.html',
                          rect: {
                              x: 0,
                              y: 0,
                              w: api.winWidth,
                              h: api.winHeight
                          },
                          pageParam: {
                              imgurl: ret.data
                          }
                      });

                    }

                  }else{
                       alert(JSON.stringify(err));
                  }
              });

            }else{
                 alert( JSON.stringify( err ) );
            }
        });

      }