This is the first time I use apicloud to do a formal project. The code snippets used in the process are listed below. . . . It's all code copied from the document, but I feel that the document on the official website is so hard to find. . .
Note: The methods of api.???? can only be called in the APP, and the method of $api.??? can be called after introducing that JS
Take the value of a normal text box:
var mobile = $api.val($api.byId('mobile'));
Get the value of the radio box:
var sex = $api.val($api.dom("input[name='sex']:checked"))
Set the top header to move down:
$api.fixStatusBar($api.dom('header'));
(I found on my mobile phone that iphone7 ios11.2 will move the header down, will not cover the signal bar, the header will go up and down The margins are the same, but it will still move down under Meizu mx2 android5.0.1, the signal bar will not be covered, but after he moves down, the upper and lower margins of the header are different)
To determine whether the user is logged in, you need to use:
if($api.getStorage('userid') ==undefined ){
api.openWin({
name: 'login',
url: 'html/login.html'
});
}
rather than
var userid = $api.getStorage('userid')
ifuserid==undefined){
...
}
The loading box pops up before the AJAX call:
api.showProgress({
title: 'Effort loading...',
text: 'Have a cup of tea first...',
modal: true
});
AJAX call:
(Note: The URL address of the AJAX call cannot contain _, otherwise there will be a problem on the Android machine, and it took a day to find this bug)
api.ajax({
url: url,
method: 'post',
data: {
values: postdata
}
}, function (ret, err) {
api.hideProgress();
if (ret) {
$api.setStorage('userid', ret.userid);
$api.setStorage('username', ret.username);
$api.setStorage('useremail', ret.useremail);
$api.setStorage('usermobile', ret.usermobile);
$ api.setStorage ('useralipay', ret.useralipay);
$api.setStorage('userweixin', ret.userweixin);
$api.setStorage('usersex', ret.usersex);
$api.setStorage('useridcard', ret.useridcard);
api.closeWin();
console.log("userid returned after login:"+ret.userid);
} else {
alert( JSON.stringify( err ) );
}
});
Pull up to load and pull down to refresh:
var pageindex = 1;
apiready = function() {
$ api.fixStatusBar ($ api.dom ('header'));
//pull load
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 0 //Triggered when the distance from the bottom is set, the default value is 0, number type
}
}, function (ret, err) {
console.log("Loading page" + (++pageindex) + "page");
});
//Pull down to refresh
api.setRefreshHeaderInfo ({
loadingImg: 'widget://image/refresh.png',
bgColor: '#ccc',
textColor: '#fff',
textDown: 'Pull down to refresh...',
textUp: 'Release refresh...'
}, function (ret, err) {
//Load data from the server here, call the api.refreshHeaderLoadDone() method after loading to restore the component to the default state
api.refreshHeaderLoadDone();
});
}
The method corresponding to the return button at the top:
/**
* This method is used to return the page
* **/
function comeBack() {
api.historyBack({}, function(ret, err) {
if (!ret.status) {
api.closeWin();
}
});
}