vue+apicloud 开发APP实践

2018-11-09T13:00:00

踩坑：

  • 使用vue后，tapmode的减少300毫秒的延迟失效，在IOS端尤其明显。
    解决办法：使用fastclick来解决300毫秒延迟失效问题；
  • 使用vue一定不要使用ES6语法，否则会很惨，安卓低版本是不支持ES6的，如果已经使用ES6，就只有使用在线ES6转ES5，一个一个文件转。

使用心得

  • 使用vue前，一定要对vue的生命周期有所了解；
  • 顶部下沉使用如下代码
//通用函数 base.js
function fixBar(dom) {
    var statusBarAppearance = api.statusBarAppearance;
    if (statusBarAppearance) {
        $api.fixStatusBar(dom);
    }
}
//vue部分代码
  created: function created() {
                var header = $api.dom('header');
                fixBar(header);
            },
  • 正确的vue混入的使用姿势
//mixin.js

var mixin = {
    created: function created() {
        // this.addEventHandler()
        this.fixHeader();
    },

    methods: {
        fixHeader: function fixHeader() {
            var header = $api.dom('header');
            $api.fixStatusBar(header);
        },
        clsWin: function clsWin() {
            api.closeWin();
        },
        sendUpdateEvent: function sendUpdateEvent(params) {
            if (!params) {
                var params = {};
            }
            api.sendEvent({
                name: 'updateData',
                extra: params
            });
        },
        addEventHandler: function addEventHandler() {
            var _this = this;

            api.addEventListener({
                name: 'updateData'
            }, function (ret, err) {
                if (ret.value) {
                    if(ret.value.action){
                        if (_this.universalUpdateData && typeof _this.universalUpdateData == 'function') {
                            return _this.universalUpdateData(ret.value);
                        }
                    }
                    //console.log(JSON.stringify(ret));
                }
                console.log('mixin走到这，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，');
                _this.initData();

            });
        },
        openWin: function openWin(winname) {
            var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

            api.openWin({
                name: '' + winname,
                url: './' + winname + '.html',
                pageParam: params
            });
        }
    }
};

页面引入mixin.js，然后mixins: [mixin],

常用函数封装base.js

这个base.js全是我自己封装的，能够满足日常使用

const BASE_URL = "http://xxx.com/api/";
const HOST = "http://xxx.com";
const SOCKET_URL = 'xxxx';
const SOCKET_PORT = 8888;
const DEBUG = true;
function fnSelect(cb){
  api.actionSheet({
      cancelTitle: '取消',
      buttons: ['拍照', '从手机相册选择']
  }, function(ret, err) {
      logger(ret);
      var index = ret.buttonIndex;
      if(index==1){
          getPic1(cb);
      }else if (index==2) {
          getPic2(cb);
      }
  });
}
function getPic1(cb){
  api.getPicture({
      sourceType: 'camera',
      encodingType: 'jpg',
      mediaValue: 'pic',
      destinationType: 'url',
      allowEdit: true,
      quality: 50,
      //targetWidth: 100,
      //targetHeight: 100,
      saveToPhotoAlbum: false
  }, function(ret, err) {
      if (ret) {
        if(ret.data!=""){
          upload(ret.data,cb);
        }
      }
  });
}
function getPic2(cb){
  api.getPicture({
      sourceType: 'album',
      encodingType: 'jpg',
      mediaValue: 'pic',
      destinationType: 'url',
      allowEdit: true,
      quality: 50,
      //targetWidth: 100,
      //targetHeight: 100,
      saveToPhotoAlbum: false
  }, function(ret, err) {
      if (ret) {
        if(ret.data!=""){
          upload(ret.data,cb);
        }
      }
  });
}

function upload(src,cb){
        api.showProgress({
          title: '',
          text: '',
          modal: false
      });
  api.ajax({
      url: BASE_URL+'common/upload',
      method: 'post',
      data: {
          values: {
              token: $api.getStorage('token'),
          },
          files: {
              file: src
          }
      }
  }, function(ret, err) {
      if (ret) {
          api.hideProgress();
          cb(ret);
        //fnBack();
      } else {
          api.hideProgress();
          api.alert({ msg: JSON.stringify(err) });
      }
  });
}
function fixBar(dom) {
    var statusBarAppearance = api.statusBarAppearance;
    if (statusBarAppearance) {
        $api.fixStatusBar(dom);
    }
}
function showImg(img){
  var photoBrowser = api.require('photoBrowser');
  photoBrowser.open({
      images: [img],
      bgColor: '#000'
  }, function(ret, err) {
      if(ret.eventType=='click'){
        photoBrowser.close();
      }
  });
}
function initFastClick() {
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
    }, false);
  }
}
function openUrl(_url) {
    api.openWin({
        name: 'web',
        url: api.wgtRootDir + '/html/web/web.html',
        pageParam: {
            url: _url
        },
        slidBackEnabled: false,
    });
}


function fnRefresh_user(_fn) {
    logger('******************freshing**************************');
    var token = $api.getStorage('token');
    if (typeof(token) != 'undefined' && token != '') {
        fnPost_noLoadding('user/info', {
            token: $api.getStorage('token')
        }, function(ret) {
            $api.setStorage('user', ret.data);
            api.sendEvent({
                name: 'refresh_user'
            });
            _fn && _fn(ret);
        });
    } else {
        api.sendEvent({
            name: 'refresh_user'
        });
    }
}

function fnToast(info) {
    api.toast({
        msg: info,
        duration: 2000,
        location: 'middle'
    });
}

function fnLoadImage(ele_) {
    var dataUrl = $api.attr(ele_, 'data-url');
    var _url;
    if (dataUrl != "" && dataUrl != "null") {
        if (('@' + dataUrl).indexOf("http://") > 0) {
            _url = dataUrl;
        } else {
            _url = HOST + dataUrl;
        }
        api.imageCache({
            url: _url
        }, function(ret, err) {
            if (ret) {
                ele_.src = ret.url;
                $api.attr(ele_, 'data-url', '');
            } else {}
        });
    }
}
function fnDropDown(cb) {
  api.setRefreshHeaderInfo({
    loadingImg: 'widget://image/refresh.png',
    bgColor: '#ccc',
    textColor: '#fff',
    textDown: '下拉刷新...',
    textUp: '松开刷新...'
  }, function(ret, err) {
    //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
    cb();
  });
}
function fnCloseDropDown() {
    api.refreshHeaderLoadDone();
}

function doT_Tpl(_id, _jsonData) {
    var evalText = doT.template(document.getElementById('TPL-' + _id).innerText);
    document.getElementById(_id).innerHTML = evalText(_jsonData);
}

function doT_Tpl_append(_id, _jsonData) {
    var evalText = doT.template(document.getElementById('TPL-' + _id).innerText);
    $api.append($api.byId(_id), evalText(_jsonData));
}

function fnPost(_url, _data, _successFn) {
  _data.token=$api.getStorage('token');
    api.showProgress({
        title: '',
        text: '',
        modal: false
    });
    api.ajax({
        url: BASE_URL + _url,
        method: 'post',
        timeout: 30,
        data: {
            values: _data
        }
    }, function(ret, err) {
        DEBUG ? logger(_data) : null;
        DEBUG ? logger(ret) : null;
        api.hideProgress();
        if (ret) {
            if (ret.code == 1) {
                _successFn && _successFn(ret);
            } else if (ret.statusCode == 401) {
                $api.rmStorage('token');
                setTimeout(function() {
                    api.openWin({
                        name: 'login',
                        url: api.wgtRootDir + '/html/login/login.html',
                        slidBackEnabled: false,
                    });
                }, 300);
            } else if (ret.code == -10) {
                api.alert({
                    title: '提示',
                    msg: ret.msg
                }, function(ret, err) {
                    fnOpenWin('pay', api.wgtRootDir + '/html/pay/pay.html');
                });
            } else {
                api.alert({
                    title: '提示',
                    msg: ret.msg
                });
            }
        } else { //网络错误等
            DEBUG ? logger(err) : null;
            if (err.statusCode==401) {
              $api.rmStorage('token');
              api.openWin({
                  name: 'login',
                  url: api.wgtRootDir + '/html/login/login.html',
                  slidBackEnabled: false,
              });
              setTimeout(function() {
                  api.closeWin({
                      name: 'main'
                  });
              }, 500);
            }else{
              fnToast(err.msg);
            }
        }
    });
}

function fnPost_login(_url, _data, _successFn) {
    api.showProgress({
        title: '',
        text: '',
        modal: false
    });
    api.ajax({
        url: BASE_URL + _url,
        method: 'post',
        timeout: 30,
        data: {
            values: _data
        }
    }, function(ret, err) {
        DEBUG ? logger(_data) : null;
        DEBUG ? logger(ret) : null;
        api.hideProgress();
        if (ret) {
            if (ret.code == 1) {
                _successFn && _successFn(ret);
            } else if (ret.code == -9) {
                $api.rmStorage('token');
                setTimeout(function() {
                    api.openWin({
                        name: 'login',
                        url: api.wgtRootDir + '/html/login/login.html',
                        slidBackEnabled: false,
                    });
                }, 300);

            } else if (ret.code == -10) {
                api.alert({
                    title: '提示',
                    msg: ret.msg
                }, function(ret, err) {
                    fnOpenWin('pay', api.wgtRootDir + '/html/pay/pay.html');
                });
            } else {
                api.alert({
                    title: '提示',
                    msg: ret.msg
                });
            }
        } else { //网络错误等
            DEBUG ? logger(err) : null;
            if (err.msg.indexOf('{') == -1) {
                fnToast(err.msg);
            } else {
                var info = $api.strToJson(err.msg);
                fnToast(info.msg);
            }

        }
    });
}

function fnPost_noLoadding(_url, _data, _successFn) {
    _data.token=$api.getStorage('token');
    api.ajax({
        url: BASE_URL + _url,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        timeout: 30,
        data: {
            values: _data
        }
    }, function(ret, err) {
        DEBUG ? logger(_data) : null;
        DEBUG ? logger(ret) : null;
        if (ret) {
            if (ret.code == 1) {
                _successFn && _successFn(ret);
            } else if (ret.statusCode == 401) {
                $api.rmStorage('token');
                api.openWin({
                    name: 'login',
                    url: api.wgtRootDir + '/html/login/login.html',
                    slidBackEnabled: false,
                });
                setTimeout(function() {
                    api.closeWin({
                        name: 'main'
                    });
                }, 500);
            } else {
                api.alert({
                    title: '提示',
                    msg: ret.msg
                });
            }
        } else { //网络错误等
            DEBUG ? logger(err) : null;
            if (err.statusCode==401) {
              $api.rmStorage('token');
              api.openWin({
                  name: 'login',
                  url: api.wgtRootDir + '/html/login/login.html',
                  slidBackEnabled: false,
              });
              setTimeout(function() {
                  api.closeWin({
                      name: 'main'
                  });
              }, 500);
            }else{
              fnToast(err.msg);
            }
        }
    });
}

function getValue(_name) {
    return $api.val($api.dom('input[name=' + _name + ']'));
}

function getRadioValue(_name) {
    return $api.val($api.dom('input[name=' + _name + ']:checked'));
}
/**
关闭当前页面返回上一页面
name 可选项
**/
function fnBack(name) {
    name = name || "";
    if (name == "") {
        api.closeWin({
            animation: {
                type: "reveal",
                subType: "from_left",
                duration: 0
            }
        });
    } else {
        api.closeWin({
            name: name,
            animation: {
                type: "reveal",
                subType: "from_left",
                duration: 0
            }
        });
    }
}
/**
打开一个新窗口
name 窗口名
url  窗口路径
**/
function fnOpenWin(name, url, param) {
    param = param || "";
    if (param == "") {
        api.openWin({
            name: name,
            url: url
        });
    } else {
        api.openWin({
            name: name,
            url: url,
            pageParam: param
        });

    }
}

function fnOpenWinCheck(name, url, param) {
    var token = $api.getStorage('token');
    if (typeof(token) == 'undefined' || token == '') {
        fnOpenWin('login', '../login/login.html');
    } else {
        param = param || "";
        if (param == "") {
            api.openWin({
                name: name,
                url: url
            });
        } else {
            api.openWin({
                name: name,
                url: url,
                pageParam: param
            });
        }
    }
}

function fnOpenLogin(name, url) {
    api.openWin({
        name: name,
        url: url,
        slidBackEnabled: false,
    });
}
/**
拨打电话
_num 电话号码
**/
function call(_num) {
    api.call({
        type: 'tel_prompt',
        number: _num
    });
}
/**
输出日志封装，可输出json
ret 内容
**/
function logger(ret) {
    console.log(JSON.stringify(ret));
}
/**
隐藏Frame
name 必填  要隐藏的Frame名
**/
function hiddenFrm(name) {
    api.setFrameAttr({
        name: name,
        hidden: true
    });
}
/**
显示Frame
name 必填  要显示的Frame名
**/
function shownFrm(name) {
    api.setFrameAttr({
        name: name,
        hidden: false
    });
}
/**
数字前面补0函数
num 必填  数字
length 必填 长度
**/
function PrefixInteger(num, length) {
    return (Array(length).join('0') + num).slice(-length);
}
/**
获取系统状态栏高度
**/
function getStyleBarHeight() {
    var sysType = api.systemType;
    if (sysType == 'ios') {
        var strSV = api.systemVersion;
        var numSV = parseInt(strSV, 10);
        var fullScreen = api.fullScreen;
        var iOS7StatusBarAppearance = api.iOS7StatusBarAppearance;
        if (numSV >= 7 && !fullScreen && iOS7StatusBarAppearance) {
            return 20;
        }
    } else if (sysType == 'android') {
        var ver = api.systemVersion;
        ver = parseFloat(ver);
        if (ver >= 4.4) {
            return 25;
        }
    }
    return 0;
}
/*************************缓存ajax数据****************start********************/
//缓存方法
function doCache(folder, id, url, callback) {
    readFile('/' + folder + '/' + id + '.json', function(ret, err) {
        if (ret.status) {
            //如果成功，说明有本地存储，读取时转换下数据格式
            //拼装json代码
            //alert('取到缓存')
            var cacheData = ret.data;
            callback(JSON.parse(cacheData));
            //iCache($('.cache'));
            //再远程取一下数据，防止有更新
            ajaxRequest(url, 'GET', '', function(ret, err) {
                if (ret) {
                    if (cacheData != JSON.stringify(ret)) {
                        //有更新处理返回数据
                        //alert('更新缓存')
                        callback(ret);
                        //缓存数据
                        writeFile(ret, id, folder);
                        //iCache($('.cache'));
                    }

                } else {
                    alert('数据获取失败！');
                }
            })
        } else {
            //如果失败则从服务器读取，利用上面的那个ajaxRequest方法从服务器GET数据
            ajaxRequest(url, 'GET', '', function(ret, err) {
                if (ret) {
                    //处理返回数据
                    //alert('没取到缓存')
                    callback(ret);
                    //缓存数据
                    writeFile(ret, id, folder);
                    //iCache($('.cache'));
                } else {
                    alert('数据获取失败！');
                }
            })
        }
    })
}

//ajax请求
function ajaxRequest(url, method, datas, callBack) {
    api.ajax({
        url: BASE_URL + url,
        method: method,
        cache: false,
        timeout: 30,
        dataType: 'json',
        data: {
            values: datas
        }
    }, function(ret, err) {
        if (ret) {
            callBack(ret, err);
        } else {
            api.alert({
                msg: ('错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode)
            });
        }
    });
}

//读文件
function readFile(path, callBack) {
    var cacheDir = api.cacheDir;
    api.readFile({
        path: cacheDir + path
    }, function(ret, err) {
        callBack(ret, err);
    });
}
//写文件
function writeFile(json, id, path) {
    //缓存目录
    var cacheDir = api.cacheDir;
    api.writeFile({
        //保存路径
        path: cacheDir + '/' + path + '/' + id + '.json',
        //保存数据，记得转换格式
        data: JSON.stringify(json)
    }, function(ret, err) {

    })
}
/*************************缓存ajax数据**************end**********************/
function exitApp() {
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {
        api.toast({
            msg: '再按一次返回键退出',
            duration: 2000,
            location: 'bottom'
        });

        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWidget({
                silent: true
            });
        });

        setTimeout(function() {
            exitApp();
        }, 2000)
    });
}
当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

© 2018 {大冰} v0.7.5 . 豫ICP备16002096号-3