踩坑:
- 使用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)
});
}