As we all know, developing apps in Apicloud is also very popular now.

Advantages of Apicloud:

1. Official signing

APICloud, as a well-known mobile APP development platform, will sign the order with you directly, relying on professional APP development technology as a reliable guarantee for the project to be launched as scheduled.

2. Insurance online

APICloud CTO personally evaluates each project and assigns senior project supervisors to ensure timely delivery of quality and quantity. APICloud promises to finally submit to Apple and the major Android market approval, so that customers have no worries.

3. Cheap

Based on APICloud cross-platform development technology, a set of front-end code directly generates applications for apple and Android platforms, reducing the cost of traditional development by 70%. APICloud integrates a variety of commonly used function modules and almost all third-party cloud services in China, enabling one-click access and eliminating repetitive development costs. APICloud’s engine technology allows a single set of code to work perfectly with more than 100 screen sizes, dozens of major phone brands and versions of Android and iOS.

4. Quick

APICloud provides the development team with a large number of native application function modules, cloud database and other functions to achieve efficient development and significantly shorten the development cycle. App development, release and operation can be completed in one stop, and Android and iOS system upgrade can be completed in one click. Based on the APICloud platform written code standard, easy to read, easy to quickly start operation and maintenance after delivery.

So many advantages of Apicloud now do not learn when to wait, learn can raise salary!!

Development preparation stage

Before developing the app, there must be a design draft, and the recommended design draft is 750*1080

The advantage is obvious. The front-end developer only needs to measure the actual size of the design and then /2 will get the actual PX value, which is very convenient.

App development with AppCloud is different from H5 development, in fact, there is no need to consider too much adaptation, you can not USE REM, percentage and so on, what you need is the FRAMEWORK of the API, not detailed here, you can see the documentation

Add to your page: < meta name = “viewport” content = “maximum – scale = 1.0, the minimum – scale = 1.0, user – scalable = 0, width = device – width, initial – scale = 1.0” />

That’s it.

Display :flex; display:flex; display:flex; Very convenient, and then really can not write the actual size, height, then generally according to the design draft.

Here are some of the basics of Apicloud, some of the most common methods I use to develop my own app.

(1) First of all, every page needs to be used

This event is generated when the API object is ready and needs to be listened for in the HTML code of each Window or Frame to determine that the APICloud extension object is ready to call.

apiready = function() {
    bMap = api.require("bMap");        
}Copy the code

openWin()

This method basically loads the framework provided by the API

You need to configure the default home page address in the default index

The jump page of the page

api.openWin({
    name: 'page1',
    url: './page1.html',
    pageParam: {
        name: 'test'}});Copy the code

CloseWin:

Close the window

This method will not work if the window operations such as openWin and closeWin are in progress

closeWin({params})Copy the code

CloseToWin:

Close to the specified window. All Windows between the specified window and the specified window will be closed

This method will not work if the window operations such as openWin and closeWin are in progress

closeToWin({params})Copy the code

(2) openFrame is equivalent to opening the child window of the page, and the child window is embedded inside the parent window.

api.openFrame({
      name: 'cityselect_frame',
      url: 'cityselect_frame.html'X :0, y:50, w:'auto',
            h:'auto' 
           }, 
      pageParam:{ 
            name:'test'}});Copy the code

(3) the openFrameGroup

Open frame group

If a frame group already exists, the frame group is displayed first. After the frame group is enabled, the page is preloaded with a specified number of pages after the current page is loaded

openFrameGroup({params}, callback(ret, err))

api.openFrameGroup({ 
 name: 'group1',
 rect: {
        x: 0,
        y: 0,
        w: 'auto',
        h: 'auto'
    }, 
 frames: [{
        name: 'frame1',
 url: 'frame1.html'.bgColor: '#fff'
    },
 { 
 name: 'frame2',
 url: 'frame2.html'.bgColor: '#fff'}},function(ret, err) 
{ 
 var index = ret.index; 
});
Copy the code

This method is equivalent to the page menu bar, click the menu bar to switch between the middle content.

(4) Storage method

// apicloud stores global information api.setprefs ({key:'user_id', value: ret.id // assign the value to user_id}); User_id = api.getPrefs({sync:true,
    key: 'user_id'}); // apicloud remove storage information api.removePrefs({key:'user_id'}); // apicloud passes api.openw to the next pagein({
    name: 'qgxq_head',
    url: '.. /list/qgxq_head.html', pageParam: { goods_id: id, region_id: region_id, area_id: area_id } }); Var ret = api.pageparam.data; var ret = api.pageparam.data; // <div id="text" value="123"  data-name="A black ally."><div> // JQUERY"#text").data("name");
api.showProgress({
    style: 'default',
    animationType: 'fade',
    title: 'Trying to load... ',
    text: 'Have a cup of tea first... ',
    modal: false
});
api.hideProgress();Copy the code

(5) Monitoring

/ / / / / / / / / / / / / send to monitor / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / API adds ({name:'login', extra: { key1: 1, } }); / / / / / / / / / / / / / / / / accept listen / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / API addEventListener ({name:'login'
}, function(ret, err) {
    //coding...
    //                  alert(JSON.stringify(ret))
    if(ret.value.key1 == 1) { getData() } }); / / / / / / / / / / / / / / / get the app cache / / / / / / / / / / / / / / / / / / / / / / / / / API getCacheSize (function(ret) {
    var size = ret.size;
    cache = (size / 1024 / 1024).toFixed(2) + "M";
    $("#cache").text(cache); }); / / / / / / / / / / / / / / remove app cache / / / / / / / / / / / / / / / / / / / / / / / / /function clearhuancun() {
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: 'Striving to submit... ',
        text: 'Have a cup of tea first... ',
        modal: false
    });
    api.clearCache(function() {
        api.hideProgress();
        api.toast({
            msg: 'Clean done'
        });
        cache = "0M";
        $("#cache").text(cache); })}Copy the code

(6) drop-down refresh and drop-down load

///////// drop down refresh ////////// api.setreFreshHeaderInfo ({// Call UI component to display top drop down refresh component, the page must be set to bounce.setRefreshHeaderInfo({params}, callback(ret, err))
    visible: true, // Optional whether to see loadingImg:'widget://image/refesh.png', // Pull-down imagesbgColor: '#fff'// Load the background color of the message textColor:'#ccc'// Load the color of the text textDown:'Pull down refresh... ', // Drop down to remind the text textUp:'Release refresh... ', // Release to remind text showTime:true// Whether to display update time},function(ret, err) {
    user_id = api.getPrefs({
        sync: true,
        key: 'user_id'
    });
    user_rank = api.getPrefs({
        sync: true,
        key: 'user_rank'
    });
    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: 'Trying to load... ',
        text: 'Have a cup of tea first... ',
        modal: false}); duqu(user_id, user_rank); }) / / stop the refresh API. RefreshHeaderLoadDone (); //////////// start///////// var page = 1; Api.addeventlistener ({// Pull-up loading can only be implemented by binding custom events, without UI component names:'scrolltobottom'Extra: {threshold: 0 // Set the distance to the bottom of the page, the default value is 0, number type}},function(ret, err) { getDataPage(); }); var page = 1; Page ++ API. AddEventListener ({// Pull-up loading can only be implemented by binding custom events, no UI component name:'scrolltobottom'Extra: {threshold: 0 // Set the distance to the bottom of the page, the default value is 0, number type}},function(ret, err) {
 
    getDataPage();
});
 
function getDataPage() {
    page++;
    api.ajax({
        url: url,
        method: 'get',
        timeout: 30,
        dataType: 'json'.returnAll: false, data: {values: {//you parameter page: page},}},function(ret, err) {
        if(ret) {/ / alert (JSON. Stringify (ret))}})} / / / / / / / / / / / / / tensile load on the end / / / / / / / / / /Copy the code

(7) Ajax requests provided by Apicloud

Url:

  • Type: string
  • Default value: none
  • Description: Request address

Encode:

  • Type: Boolean
  • Default value: true
  • Description :(optional) whether to encode the url. By default or true, Android will always encode the URL, while iOS will only encode the URL if it is illegal (such as Chinese characters). If special characters need to be encoded in the URL, you are advised to encode them in the JS layer first, and then pass false.

Tag:

  • Type: string
  • Default value: none
  • Description :(optional) this field is passed to the cancelAjax method to cancel the request. If this field is passed, make sure that each ajax tag field is unique

Method:

  • Type: string
  • Default value: GET
  • Description :(optional) asynchronous request method type
  • Value range: 
    get
post
put
delete
head
options
trace
patch
Copy the code

Cache:

  • Type: Boolean
  • Default value: true
  • Description :(optional) whether to cache, if cache, the next request when no network, cache will be used, only for get requests

Timeout:

  • Type: Number
  • Default value: 30
  • Description :(optional) timeout period, in seconds

DataType:

  • Type: string
  • Default value: JSON
  • Description :(optional) return data type. If the field is sent as JSON, the system attempts to convert the data returned by the server into a JSON object. If the data cannot be converted into a JSON object, an incorrect data type is returned
  • Value range:
Json // The returned data is a JSON object. Text // The returned data is a stringCopy the code

Charset:

  • Type: string
  • Default value: UTF-8
  • Description :(optional) used to parse data when no character set encoding is returned in the response header

Headers:

  • Type: JSON object
  • Default value: none
  • Description :(optional) sets request header data. You are advised to use uppercase letters for keys, such as user-agent

The report:

  • Type: Boolean
  • Default value: false
  • Description :(optional) whether to return the file upload progress in real time

ReturnAll:

  • Type: Boolean
  • Default value: false
  • Description :(optional) whether all response information (including the response header, message body, and statusCode) needs to be returned. If this parameter is true, the returned headers, message body, and statusCode methods (ret.statuscode) are returned.

Data:

  • Type: JSON object
  • Default value: none
  • Description :(optional) POST data. If method is get, data is not transmitted. The following parameters cannot be used at the same time except values and files.
  • Internal fields:
{stream:""// Commit files as binary streams. Stream indicates the file path (a string) and supports the absolute path and file path protocols such as fs://, cache://, and box://. You can directly use the results returned by other apis, such as the ret.data of the api.getpicture callback.""// Submit data as plain text. Body supports strings and JSON objects. When submitting a JSON object, set application/ JSON content-Type values: {}, // Submit parameters as a form (JSON object), for example, {"field1": "value1"."field1": "value2"} (Directly pass the JSON image.) Files: {} // Submit files in form mode, support multiple file upload (JSON object), such as {"file": "path"}, also support the same field corresponding to multiple files: {"file": ["path1"."path2"]}. File path, supporting absolute path, and fs://, cache://, box:// and other file path protocols. You can directly use the results returned by other apis, such as ret.data in the api.getpicture callback.Copy the code

Certificate:

  • Type: JSON object
  • Default value: none
  • Description :(optional) used to configure the p12 security certificate on the client when bidirectional authentication is enabled for HTTPS requests.
  • Internal fields:
{
    path:' ', //p12 certificate path. Fs ://, Widget ://, cache:// and other file path protocols are supported. The value is a string of characters.' '// Certificate password, string type}Copy the code

callback(ret, err)

Ret:

  • Type: JSON object or string
  • Description: Usually the data returned directly to the server, but in some cases it may vary, depending on the dataType passed in, the returnAll parameter, and whether the upload progress is returned when the file is uploaded.
// returnAll parameters of the transmissiontrueStatusCode: // statusCode, headers: {}, // response header, JSON object body:' '// The body of the message, which is the data returned by the server. Body is a JSON object if dataType is JSON, otherwise string}Copy the code
// If the report field is transmitted during file uploadtrue{progress: 100, // Upload progress, 0.00-100.00 status: {progress: 100, // Upload progress, 0.00-100.00 status:' '// Upload status, numeric type. (0: upload, 1: upload completed, 2: upload failed)' '// The data returned by the server when the upload is complete. Body is a JSON object if dataType is JSON, otherwise string}Copy the code

Err:

  • Type: JSON object
  • Internal fields:
{statusCode: 400, // network request statusCode, number type code:0, // error code, number type. (0: connection error, 1: timeout, 2: authorization error, 3: data type error) MSG:' '// Error description, string body: // raw data returned by the server}Copy the code

// Form submit data or file API. Ajax ({url:'http://192.168.1.101:3101/upLoad',
    method: 'post',
    data: {
        values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'}}},function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else{ api.alert({ msg: JSON.stringify(err) }); }}); // Submit JSON data api.ajax({url:'http://192.168.1.101:3101/upLoad',
    method: 'post',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    data: {
        body: {
            name: 'haha'}}},function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else{ api.alert({ msg: JSON.stringify(err) }); }});Copy the code

(8) Oh, there’s another practical way

getCacheSize

Get the size of the cache, including downloaded cache files, temporary photo files, and web cache files, which may take some time to calculate

getCacheSize({params}, callback(ret, err))Copy the code

Sync:

  • Type: Boolean
  • Default value: false
  • Description: How to return the result of an execution. Return via callback if false or directly if true.

callback(ret, err)

Ret:

  • Type: JSON object
  • Internal fields:
{size: // Cache size, expressed in bytes. -1: no storage device. -2: A USB storage device is being prepared. -3: a storage device cannot be accessed.Copy the code
// async return result: api.getcachesize (function(ret) { var size = ret.size; }); Var size = api.getcachesize ({sync:true
});Copy the code

clearCache

Clearing caches, including downloaded files, temporary photos, and web cache files, may take a certain amount of time.

clearCache({params}, callback(ret, err))Copy the code

api.clearCache(function() {
    api.toast({
        msg: 'Clean done'
    });
});Copy the code