1. 程式人生 > >apicloud結合vue實現資料實時重新整理使用工具類

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 ) );
            }
        });

      }