### Configure Guide Component in JSON

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_guide_guide

Register the guide component in the page configuration file.

```json
{

 "defaultTitle": "Guide",

 "usingComponents":{

   "guide": "mini-ali-ui/es/guide/index"

 }

}
```

--------------------------------

### Detailed tabBar Configuration Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_ui_route_switchtab

Provides a comprehensive example of configuring the tabBar with custom colors and multiple items, including page paths and names.

```json
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Home"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Log"
      }
    ]
  }
}
```

--------------------------------

### Grid Component Usage Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_layout-navigation_grid

Provides examples of how to use the Grid component in a mini-program.

```APIDOC
## Grid Component Usage Example

### Description
This section demonstrates how to integrate and use the Grid component within a mini-program, including component registration and data binding.

### Request Example
```json
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "grid": "mini-antui/es/grid/index"
  }
}
```

### Code Snippet
```html
<grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
```

### JavaScript Example
```javascript
Page({
  data: {
    list3: [
      {
        icon: 'https://img.example.com/example1.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example2.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example3.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example4.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example5.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example6.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example7.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example8.png',
        text: 'Title',
        desc: 'text',
      },
      {
        icon: 'https://img.example.com/example9.png',
        text: 'Title',
        desc: 'text',
      },
    ],
  },
  onItemClick(ev) {
    my.alert({
      content: ev.detail.index,
    });
  },
});
```
```

--------------------------------

### Component Usage Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_layout-navigation_list

Example demonstrating how to use the List and List-item components in a mini-program, including data binding and event handling.

```APIDOC
## Component Usage Example

### Description

This example shows how to integrate the AntUI List and List-item components into a mini-program's view, including data setup and event handling.

### Configuration (`app.json` or equivalent)

```json
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index"
  }
}
```

### Template (`.axml` or equivalent)

```html
<view>
  <list>
    <view slot="header">
      List Header
    </view>
    <block a:for="{{items}}">
      <list-item
        thumb="{{item.thumb}}"
        arrow="{{item.arrow}}"
        align="{{item.align}}"
        index="{{index}}"
        onClick="onItemClick"
        key="items-{{index}}"
        last="{{index === (items.length - 1)}}"
      >
      {{item.title}}
        <view class="am-list-brief">{{item.brief}}</view>
        <view slot="extra">
          {{item.extra}}
        </view>
      </list-item>
    </block>
    <view slot="footer">
      List footer
    </view>
  </list>
  <list>
    <view slot="header">
      List Header
    </view>
    <block a:for="{{items2}}">
      <list-item
        thumb="{{item.thumb}}"
        arrow="{{item.arrow}}"
        onClick="onItemClick"
        index="items2-{{index}}"
        key="items2-{{index}}"
        last="{{index === (items2.length - 1)}}"
      >
       {{item.title}}
        <view class="am-list-brief">{{item.brief}}</view>
        <view a:if="{{item.extra}}" slot="extra">
          {{item.extra}}
        </view>
      </list-item>
    </block>
    <view slot="footer">
      List footer
    </view>
  </list>
</view>
```

### JavaScript (`.js`)

```javascript
Page({
  data: {
    items: [
      {
        title: 'Simple List',
        extra: 'Details',
      },
    ],
    items2: [
      {
        title: 'Complex List',
        arrow: true,
      },
      {
        title: 'Complex List',
        arrow: 'up',
      },
      {
        title: 'Complex List',
        arrow: 'down',
      },
      {
        title: 'Complex List',
        arrow: 'empty',
      },
      {
        title: 'Complex List',
      },
    ],
  },
  onItemClick(ev) {
    my.alert({
      content: `Click the ${ev.index} row`,
    });
  },
});
```
```

--------------------------------

### Install Mini Program Extended Component Library

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_overview

Use npm to install the mini-ali-ui dependency. This command adds the library to your project's dependencies.

```bash
$ npm install mini-ali-ui --save
```

--------------------------------

### Define Guide Component in AXML

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_guide_guide

Implement the guide component and trigger buttons in the template.

```axml
<guide
  show="{{guideShow}}"
  hasJump="{{guideJump}}"
  guideList="{{list}}"
  btn_next="Next step"
  btn_jump="Close or Skip"
  btn_over="Finish"
  onGuideOver="closeGuide"
  maskClick="{{true}}"
></guide>

<button size="default" type="primary" onTap="onShowJumpGuide">Guidance that users can skip steps</button>
<button size="default" type="primary" onTap="onShowGuide">General guidance</button>
```

--------------------------------

### Modal Component Usage Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_floating-layer_modal

Example demonstrating how to use the Modal component in a mini-program.

```APIDOC
## Modal Component Usage Example

### Description
This example shows how to integrate and control the Modal component within a mini-program.

### Configuration Example
```json
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "modal": "mini-antui/es/modal/index"
  }
}
```

### Template Example
```html
<view>
  <button onTap="openModal">Show Modal</button>
  <modal
    show="{{modalOpened}}"
    onModalClick="onModalClick"
    onModalClose="onModalClose"
    topImage="https://img.example.com/example.png"
  >
    <view slot="header">Title</view>
    Explain the current status, prompt the user solution, preferably no more than two lines
    <view slot="footer">Confirm</view>
  </modal>
</view>
```

### JavaScript Example
```javascript
Page({
  data: {
    modalOpened: false,
  },
  openModal() {
    this.setData({
      modalOpened: true,
    });
  },
  onModalClick() {
    this.setData({
      modalOpened: false,
    });
  },
  onModalClose() {
    this.setData({
      modalOpened: false,
    });
  }
});
```
```

--------------------------------

### Implement my.showAuthGuide Logic

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Permission_showAuthGuide

JavaScript implementation for invoking the permission guide with success and failure callbacks.

```javascript
// API-DEMO page/API/show-auth-guide/show-auth-guide.js
Page({
  showAuthGuide() {
    my.showAuthGuide({ 
        authType:'LBS',
        success:(res)=>{
            //When shown is true, it indicates the permission guide pop-up will be shown; when it is false, it indicates the user has allowed the permission.
            my.alert({content: 'Call success: '+JSON.stringify(res), });
        },
        fail:(error)=>{
            my.alert({content: 'Call failure:'+JSON.stringify(error), });
        },
    });
  },
});
```

--------------------------------

### User Screen Capture Event API Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_capture_offusercapturescreen

This example demonstrates how to turn on and off screen capture listening events using my.onUserCaptureScreen and my.offUserCaptureScreen.

```html
<!-- API-DEMO page/API/user-capture-screen/user-capture-screen.axml-->
<view class="page">
  <view class="page-description">User screen capture event API</view>
  <view class="page-section">
    <view class="page-section-title">my.onUserCaptureScreen</view>
    <view class="page-section-demo">
      <view>Current status: {{ condition ? "listening on" : 'Listening off' }}</view>
      <view a:if="{{condition}}">
        <button type="primary" onTap="offUserCaptureScreen">Cancel screen capture listening event</button>
      </view>
      <view a:else>
        <button type="primary" onTap="onUserCaptureScreen">Turn on screen capture listening event</button>
      </view>
    </view>
  </view>
</view>
```

```javascript
// API-DEMO page/API/user-capture-screen/user-capture-screen.js
Page({
  data: {
    condition: false,
  },
  onReady() {
    my.onUserCaptureScreen(() => {
      my.alert({
        content: 'Received user screen capture',
      });
    });
  },
  offUserCaptureScreen() {
    my.offUserCaptureScreen();
    this.setData({
      condition: false,
    });
  },
  onUserCaptureScreen() {
    my.onUserCaptureScreen(() => {
      my.alert({
        content: 'Received user screen capture'
      });
    });
    this.setData({
      condition: true,
    });
  },
});
```

--------------------------------

### Install APMP CLI globally

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/command-line

Install the CLI tool globally using npm.

```bash
npm install apmp -g
```

--------------------------------

### Define Permission Guide View

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Permission_showAuthGuide

AXML template defining the button to trigger the permission guide.

```xml
<!-- API-DEMO page/API/show-auth-guide/show-auth-guide.axml-->
<view class="page">
  <view class="page-description">Permission guide API</view>
  <view class="page-section">
    <view class="page-section-title">my.showAuthGuide</view>
    <view class="page-section-demo">
      <button type="primary" onTap="showAuthGuide">Permission guide</button>
    </view>
  </view>
</view>
```

--------------------------------

### Navigator Component Examples

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/component_navigator_navigator

Demonstrates different ways to use the navigator component for various navigation actions within the application. Includes examples for navigating to a new page, redirecting within the current page, and switching tabs.

```html
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">Jump to new page</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">Open in current page</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">Switch Tab</navigator>
</view>
```

--------------------------------

### my.showAuthGuide

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Permission_showAuthGuide

Displays a permission guide pop-up to the user to encourage enabling specific device permissions.

```APIDOC
## my.showAuthGuide

### Description
Displays a permission guide dialog to advise the user to turn on a related permission. This is used for guidance rather than validation.

### Parameters
#### Request Body
- **authType** (String) - Required - Identifier of the permission under guide (e.g., LBS, MICROPHONE, ADDRESSBOOK, CAMERA, PHOTO).
- **success** (Function) - Optional - Callback function upon call success. Returns an object where 'shown' indicates if the pop-up was displayed.
- **fail** (Function) - Optional - Callback function upon call failure.
- **complete** (Function) - Optional - Callback function upon call completion.

### Request Example
my.showAuthGuide({
  authType: 'LBS',
  success: (res) => {
    console.log(res);
  }
});

### Response
#### Success Response (200)
- **shown** (Boolean) - Indicates if the permission guide pop-up was shown (true) or if the user has already allowed the permission (false).
```

--------------------------------

### Configure Permission Guide Page

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Permission_showAuthGuide

JSON configuration for the page title.

```json
// API-DEMO page/API/show-auth-guide/show-auth-guide.json
{
    "defaultTitle": "Permission guide"
}
```

--------------------------------

### Basic Usage Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_layout-navigation_collapse

Demonstrates the basic usage of the Collapse component with multiple collapsible panels.

```APIDOC
## Basic Usage

### Description
This example shows how to use the Collapse component to create a basic collapsible content area.

### Request Example
```json
{
  "defaultTitle": "Mini Program AntUI component library",
  "usingComponents": {
    "collapse": "mini-antui/es/collapse/index",
    "collapse-item": "mini-antui/es/collapse/collapse-item/index"
  }
}
```

### Code
```html
<view>
  <view class="demo-title">Basic usage</view>
  <collapse
    className="demo-collapse"
    collapseKey="collapse1"
    activeKey="{{['item-11', 'item-13']}}"
    onChange="onChange"
  >
    <collapse-item header="Title 1" itemKey="item-11" collapseKey="collapse1">
      <view class="item-content content1">
        <view>Content region</view>
      </view>                
    </collapse-item>
    <collapse-item header="Title 2" itemKey="item-12" collapseKey="collapse1">
      <view class="item-content content2">
        <view>Content region</view>
      </view>
    </collapse-item>
    <collapse-item header="Title 3" itemKey="item-13" collapseKey="collapse1">
      <view class="item-content content3">
        <view>Content region</view>         
      </view>
    </collapse-item>
  </collapse>
</view>
```
```

--------------------------------

### Basic Animation Setup

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_UI_Animation_createAnimation

Initializes an animation instance. After export, previous operations are cleared.

```javascript
Page({
  onReady() {
    this.animation = my.createAnimation()
  },
  // ... other animation methods
})
```

--------------------------------

### Example UserAgent String

Source: https://mini-program.dana.id/docs/miniprogram_dana/platform/transform-html5

A sample UserAgent string containing the MiniProgram identifier.

```text
Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/18D46 ChannelId(35) Ariver/1.0.11 Griver/2.23.0 AppContainer/1.9.1 MiniProgram
```

--------------------------------

### Button Sample Code

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/component_form-component_button

Example code demonstrating the usage of the Button component with different properties.

```APIDOC
## Button Component Usage Examples

### Sample Code
```html
<view class="page">
  <view class="section">
    <view class="title">Type</view>
    <button type="default">default</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>
  </view>
  <view class="section" style="background:#ddd;">
    <view class="title">Misc</view>
    <button type="default" plain>plain</button>
    <button type="default" disabled>disabled</button>
    <button type="default" loading={{true}}>loading</button>
    <button type="default" hover-class="red">hover-red</button>
  </view>
  <view class="section">
    <view class="title">Size</view>
    <button type="default" size="mini">mini</button>
  </view>
  <view class="section">
    <view class="title">Type</view>
    <form onSubmit="onSubmit" onReset="onReset">
      <button form-type="submit">submit</button>
      <button form-type="reset">reset</button>
    </form>
  </view>
</view>
```
```

--------------------------------

### Sample Return Value

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Setting_getSetting

Example structure of the authSetting object returned by the API.

```json
{
    "authSetting": {
        "camera": true,
        "location": true,
        "album": true,
        "userInfo": true,
        "phoneNumber": true
    }
}
```

--------------------------------

### Initialize a project

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/command-line

Create a new project using command parameters or an interactive prompt.

```bash
# Input app type and name via command parameters
apmp app create -t [mini-app] -n [appName]

# Input the app type and name via inquirer Q&A
apmp app create
- project type
> mini-app
- app name : [app name]
```

--------------------------------

### Error Response Object Example (Insufficient Permissions)

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_OpenAPI_getOpenUserInfo

This example shows the response format when the 'Get Basic User Information' package is not connected, resulting in insufficient permissions. The response includes a specific error code and message.

```json
{
    "response":"{\"response\":{\"code\":\"40006\",\"msg\":\"Insufficient Permissions\",\"subCode\": \"isv.insufficient-isv-permissions\",\"subMsg\": \"Insufficient permissions\"}}"
```

--------------------------------

### my.getImageInfo with Local File Path

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Media_Image_getImageInfo

This example shows how to get image information after selecting an image using my.chooseImage. The src parameter uses the apFilePath returned by chooseImage.

```javascript
//apFilePath
my.chooseImage({
  success: (res) => {
    my.getImageInfo({
      src:res.apFilePaths[0],
      success:(res)=>{
        console.log(JSON.stringify(res))
      }
    })
  },
})
```

--------------------------------

### Initialize Mini Program with app.js

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/quick-start_learn-more-about-todo-app-demo

Configures the app lifecycle, global data, and provides methods for storage and user authentication.

```javascript
// Call the storage API to get the stored data
const todos = my.getStorageSync({key:'todos'}).data || [
    { text: 'Learning Javascript', completed: true },
    { text: 'Learning ES2016', completed: true },
    { text: 'Learning Mini Program ', completed: false },
  ];

App({
  // Declare global data
  todos,

  userInfo: null,

  // Declare global method
  setTodos(todos) {
    this.todos = todos;
    // Call storage API to store data
    my.setStorageSync({key:'todos', data:todos});
  },

  getUserInfo() {
    return new Promise((resolve, reject) => {
      if (this.userInfo) resolve(this.userInfo);
      // Call user authorization API to get user info
      my.getAuthCode({
        success: (authcode) => {
          console.info(authcode);

          my.getAuthUserInfo({
            scopes: ['auth_user'],
            success: (res) => {
              this.userInfo = res;
              resolve(this.userInfo);
            },
            fail: () => { 
              reject({});
            },
          });
        },
        fail: () => { 
          reject({});
        },
      });
    });
  },
});
```

--------------------------------

### Permission Guide UI Structure

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_permission_showauthguide

Defines the basic structure of the page that includes the permission guide API. It contains a button to trigger the guide.

```html
<view class="page">
  <view class="page-description">Permission guide API</view>
  <view class="page-section">
    <view class="page-section-title">my.showAuthGuide</view>
    <view class="page-section-demo">
      <button type="primary" onTap="showAuthGuide">Permission guide</button>
    </view>
  </view>
</view>
```

--------------------------------

### GET my.getSetting

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_setting_getsetting

Retrieves the user's current authorization settings for requested permissions.

```APIDOC
## GET my.getSetting

### Description
Obtain the user's current settings. Only the permissions that have been requested by the Mini Program from the user are returned.

### Method
GET

### Endpoint
my.getSetting

### Parameters
#### Request Body
- **success** (Function) - Optional - The callback function for a successful API call.
- **fail** (Function) - Optional - The callback function for a failed API call.
- **complete** (Function) - Optional - The callback function used when the API call is completed.

### Request Example
my.getSetting({
  success: (res) => {
    console.log(res);
  }
})

### Response
#### Success Response (200)
- **authSetting** (Object) - Results of user authorization. Keys are the values of scopes and values are boolean types.

#### Response Example
{
    "authSetting": {
        "camera": true,
        "location": true,
        "album": true,
        "userInfo": true,
        "phoneNumber": true
    }
}
```

--------------------------------

### Extend Info Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/v2_users_inquiryuserinfo

An example of the extendInfo field, which can contain memoization data.

```json
{
    "memo": "memo"
}
```

--------------------------------

### Basic Progress Bar Examples

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/component_basic-content_progress

Demonstrates various ways to use the progress bar component with different properties.

```html
<progress percent="20" show-info/>
```

```html
<progress percent="40" active/>
```

```html
<progress percent="60" stroke-width="10"/>
```

```html
<progress percent="80" active/>
```

```html
<progress percent="80" color="#10AEFF"/>
```

--------------------------------

### Preview an app

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/command-line

Preview the currently selected project on a physical device.

```bash
# Use the currently selected project
apmp app preview
```

--------------------------------

### Check API and Component Support with my.canIUse

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Basic_canIUse

Use these examples to verify the availability of specific APIs, API properties, return values, or component attributes.

```javascript
// check whether newly added API is available
my.canIUse('getFileInfo')
// check whether newly added property of API is available
my.canIUse('getLocation.object.type')
// check whether newly added returned property of API is available
my.canIUse('getSystemInfo.return.brand')
// check whether newly added property of component is available
my.canIUse('button.open-type.getAuthorize')
```

--------------------------------

### Request Body Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/v2_users_inquiryuserinfo

This is an example of the JSON request body for the /v2/users/inquiryUserInfo API call.

```json
{
  "appId": "3333010071465913xxx",
  "accessToken": "281010033AB2F588D14B43238637264FCA5AAF35xxxx",
  "authClientId": "202016726873874774774xxxx"
  
}
```

--------------------------------

### Input Component Usage Examples

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/component_form-component_input

Demonstrates various input configurations including character limits, event binding, and input types like number and password.

```html
<input maxlength="10" placeholder="maximum entered length 10" />
<input onInput="bindKeyInput" placeholder="entry synchronized to view"/>
<input type="number" placeholder="This is a numeral entry box" />
<input password type="text" placeholder="This is a password entry box" />
<input type="digit" placeholder="numeral keyboard with decimal"/>
```

--------------------------------

### Upload an app

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/command-line

Upload the currently selected project.

```bash
# Use the currently selected project
apmp app upload
```

--------------------------------

### Get Saved File Information

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_File_getSavedFileInfo

Use this snippet to get information about a saved file. It first chooses an image, saves it, and then retrieves its file information. Ensure my.saveFile has been successfully called to get the apFilePath.

```javascript
var that = this;
my.chooseImage({
  success: (res) => {
    console.log(res.apFilePaths[0], 1212)
    my.saveFile({
      apFilePath: res.apFilePaths[0],
      success: (result) => {
        console.log(result, 1212)
        my.getSavedFileInfo({
          apFilePath: result.apFilePath,
          success: (resu) => {
            console.log(JSON.stringify(resu))
            that.filePath = resu
          }
        })
      },
    });
  },
});
```

--------------------------------

### Mini Program Lifecycle and Startup

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_mini-program-operation-mechanism

Details on Mini Program startup modes and lifecycle event handling.

```APIDOC
## Mini Program Lifecycle and Startup

### Download
When a user launches a Mini Program for the first time, its resources are downloaded from the server and cached locally. Subsequent launches of the same Mini Program will use the cached resources for faster startup.

### Startup Modes

*   **Cold Startup:** Occurs when a Mini Program is launched after not being run or after being destroyed by the system. This involves an initialization process that triggers the `onLaunch` callback.
*   **Hot Startup:** Occurs when a user switches to a Mini Program that is already running in the background. The Mini Program is brought to the foreground without re-initialization, and the `onLaunch` callback is not triggered.

### Foreground/Background Running

*   **Foreground Running:** The state when a Mini Program is actively being used by the user.
*   **Background Running:** Occurs when the user closes the Mini Program or navigates away using the Home button. The Mini Program is not destroyed but suspended.
*   **Switching from Background to Foreground:** When a Mini Program in the background is reactivated or reopened, it transitions back to the foreground.

### Lifecycle Callbacks

Callback functions for foreground/background switching can be registered in `app.js`:

*   `onShow()`: Triggered when the Mini Program switches from background to foreground.
*   `onHide()`: Triggered when the Mini Program switches from foreground to background.
```

--------------------------------

### Result Object Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/v2_users_inquiryuserinfo

Example of the result object returned in the API response, indicating the status of the request.

```json
{
    "resultCode":"SUCCESS",
    "resultStatus":"S",
    "resultMessage":"success"
}
```

--------------------------------

### Manage Guide State in JS

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_guide_guide

Define the guide list data and the close event handler in the page logic.

```javascript
Page({

 data: {

   list: [

     {

       url: 'https://example.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',

       x: '150rpx',

       y: '100rpx',

       width: '200px',

       height: '300px',

     },

     {

       url: 'https://example.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',

       x: '250rpx',

       y: '50rpx',

       width: '200px',

       height: '100px',

     },

     {

       url: 'https://example.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',

       x: '350rpx',

       y: '200rpx',

       width: '100px',

       height: '300px',

     },

     {

       url: 'https://example.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',

       x: '400rpx',

       y: '200rpx',

       width: '200rpx',

       height: '300rpx',

     },

   ],

 },

 onLoad() {},

 closeGuide() {

   this.setData({

     guideShow: false,

   });

 },

});
```

--------------------------------

### my.openSetting

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Setting_openSetting

Opens the Mini Program settings page to allow users to manage permissions. Only permissions previously requested by the Mini Program are displayed.

```APIDOC
## my.openSetting

### Description
Use this API to open the Mini Program settings page and returns permission setting results. Only the permissions that have been requested by the Mini Program from the user are displayed on the settings page.

### Method
N/A (This is a client-side API call, not a traditional HTTP request)

### Endpoint
N/A

### Parameters
#### Callback Parameters
- **success** (Function) - Optional - The callback function for a successful API call.
- **fail** (Function) - Optional - The callback function for a failed API call.
- **complete** (Function) - Optional - The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

### Success callback function Parameters
#### Parameters
- **authSetting** (Object) - Results of user authorization. Keys are the values of `scopes` and values are boolean types, which shows whether the user gives the permission or not. See Scopes for details.

### Scopes
#### Parameters
- **location** (my.getLocation) - This field specifies whether to authorize access to geographic location.
- **album** (my.chooseImage, my.saveImage) - This field specifies whether to authorize to save images to the albums.
- **camera** (my.scan) - This field specifies whether to authorize access to camera.
- **userInfo** (my.getOpenUserInfo) - This field specifies whether to authorize access to user information.

### Request Example
```javascript
my.openSetting({
  success: (res) => {
    console.log(res.authSetting);
  }
});
```

### Response
#### Success Response (Implicit via callback)
- **authSetting** (Object) - An object containing the authorization status for various scopes.

#### Response Example (within success callback)
```json
{
  "authSetting": {
    "userInfo": true,
    "location": false
  }
}
```
```

--------------------------------

### Call my.showAuthGuide API

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_permission_showauthguide

Initiates the permission guide pop-up for a specified permission type. Handles success and failure callbacks, providing feedback on the API call outcome.

```javascript
Page({
  showAuthGuide() {
    my.showAuthGuide({
        authType:'LBS',
        success:(res)=>{
            //When shown is true, it indicates the permission guide pop-up will be shown; when it is false, it indicates the user has allowed the permission.
            my.alert({content: 'Call success: '+JSON.stringify(res), });
        },
        fail:(error)=>{
            my.alert({content: 'Call failure:'+JSON.stringify(error), });
        },
    });
  },
});
```

--------------------------------

### Success Callback Response Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_OpenAPI_signContract

An example of the response object received in the success callback function after a successful authorization.

```json
{
	"authState":"663A8FA9-D836-48EE-8AA1-1FF682989DC7",
	"authCode":"663A8FA9D83648EE8AA11FF682989DC7"
}
```

--------------------------------

### Success Response Object Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_openapi_getopenuserinfo

Example of the JSON structure returned in the success callback when user information is successfully retrieved.

```json
{
    "response": "{\"response\": {\"code\": \"10000\",\"msg\": \"Success\",\"countryCode\": \"code\",\"gender\": \"f\",\"nickName\": \"XXX\",\"avatar\": \"https://cdn/images/partner/XXXXXXXX\",\"city\": \"city\",\"province\": \"province\"}}"
}
```

--------------------------------

### Configure Mini Program with app.json

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_app_overview

Defines the pages and global window settings for the application.

```json
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}
```

--------------------------------

### Implement Mini Program JSAPI Demo

Source: https://mini-program.dana.id/docs/miniprogram_dana/platform/transform-html5

A complete HTML example demonstrating how to trigger a my.alert JSAPI call upon a button click.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Miniprogram JSAPI Demo</title>
  <script src="https://cdn.marmot-cloud.com/npm/hylid-bridge/1.0.5/index.js"></script>
</head>
<body>
  <div>
    <button id="alert">my.alert</button>
  </div>
  <script>
    var alertButton = document.getElementById('alert');
    alertButton.addEventListener('click', function () {
      my.alert({
        title: 'Test Alert!!',
        content: window.navigator.userAgent,
        buttonText: 'Alert Button',
        success: function (res) {
          my.alert({
            content: 'success!' + JSON.stringify(res),
          });
        },
        fail: function () {
          my.alert({
            content: 'fail!',
          });
        },
        complete: function () {
          my.alert({
            content: 'complete!',
          });
        },
      });
    });
  </script>
</body>
</html>
```

--------------------------------

### Configure Permission Guide Dialog

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_permission_showauthguide

Sets the default title for the permission guide dialog. This configuration is applied to the dialog's appearance.

```json
{
    "defaultTitle": "Permission guide"
}
```

--------------------------------

### Response-Time Header Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/openapi_overview

Example of the 'Response-Time' header, which specifies the time the response was returned, adhering to ISO8601 format and accurate to milliseconds.

```text
Response-Time: 2019-04-04T14:08:56.253+05:30
```

--------------------------------

### Map setting Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/component_map_map

Configure map settings such as gesture enablement, scale visibility, compass, tilt gestures, traffic, map text, and logo position.

```javascript
{ "gestureEnable": 1, "showScale": 1, "showCompass": 1, "tiltGesturesEnabled": 1, "trafficEnabled": 0, "showMapText": 0, "logoPosition": {"centerX": 150, "centerY": 90 }}
```

--------------------------------

### Error Response Object Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_openapi_getopenuserinfo

Example of the JSON structure returned when the user information feature is not properly configured or permissions are missing.

```json
{
    "response":"{\"response\":{\"code\":\"40006\",\"msg\":\"Insufficient Permissions\",\"subCode\":\"isv.insufficient-isv-permissions\",\"subMsg\": \"Insufficient permissions\"}}"
}
```

--------------------------------

### Install JS Bridge Package

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/jsbridge-guide

Install the hylid-bridge package using npm. This is the first step to enable JS bridge functionality.

```bash
npm install hylid-bridge --save
```

--------------------------------

### Open Mini Program Settings

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Setting_openSetting

Opens the settings page and handles the success callback to retrieve current authorization statuses.

```javascript
my.openSetting({
  success: (res) => {
    /*
     * res.authSetting = {
     *   "userInfo": true,
     *   "location": true,
     *   ...
     * }
     */
  }
})
```

--------------------------------

### Get Server Time UI

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/api_device_server_getservertime

This is the UI component for the get server time feature. It includes a button to trigger the API call.

```xml
<!-- API-DEMO page/API/get-server-time/get-server-time.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="getServerTime">Get server time </view>
    </view>
  </view>
</view>
```

--------------------------------

### my.getSetting

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_Device_Setting_getSetting

This API retrieves the user's current settings. It only returns permissions that have been requested by the Mini Program from the user.

```APIDOC
## GET my.getSetting

### Description
Use this API to obtain the user's current settings. Only the permissions that have been requested by the Mini Program from the user are returned.

### Method
GET

### Endpoint
/my/getSetting

### Parameters
#### Query Parameters
- **success** (Function) - Optional - The callback function for a successful API call. See Sample Return Value for details.
- **fail** (Function) - Optional - The callback function for a failed API call.
- **complete** (Function) - Optional - The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

### Request Example
```javascript
my.getSetting({
  success: (res) => {
    /*
     * res.authSetting = {
     *   "location": true,
     *   "audioRecord": true,
     *   ...
     * }
     */
  }
})
```

### Response
#### Success Response (200)
- **authSetting** (Object) - Results of user authorization. Keys are the values of `scopes` and values are boolean types, which shows whether the user gives the permission or not. See Scopes for details.

#### Response Example
```json
{
    "authSetting": {
        "camera": true,
        "location": true,
        "album": true,
        "userInfo": true,
        "phoneNumber": true
    }
}
```
```

--------------------------------

### API Request Signature Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/openapi_overview

This is an example of the 'Signature' header used for API requests. It includes algorithm, key version, and the signature value.

```text
Signature: algorithm=RSA256, keyVersion=1,
signature=KEhXthj4bxxxJ801Hqw8kaLvEKc0Rii8KsNUazw7kZgjxyGSPuOZ48058UVJUkkR21iD9JkHBGR
rWiHPae8ZRPuBagh2H3qu7fxY5GxVDWayJUhUYkr9m%2FOW4UQVmXaQ9yn%2Fw2dCtzwAW0htPHYrKMyrT
pMk%2BfDDmRflA%2FAMJhQ71yeyhufIA2PCJV8%2FCMOa46303A0WHhH0YPJ9%2FI0UeLVMWlJ1XcBo3Jr
bRFvcowQwt0lP1XkoPmSLGpBevxxxDE8%2FQ9WnxjPNDfrHnKgV2fp0hpMKVXNM%2BrLHNyMv3MkHg9iTMOD%
2FFYDAwSd%2B6%xxxx
```

--------------------------------

### my.navigateBackMiniProgram

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_OpenAPI_navigateBackMiniProgram

Returns to the previous Mini Program and optionally passes extra data.

```APIDOC
## my.navigateBackMiniProgram

### Description
Return to the previous Mini Program. Only used for when another Mini Program jumps back to the foregrounded Mini Program.

### Parameters
#### Request Body
- **extraData** (Object) - Optional - The extra data that needs to be returned to the target Mini Program, and the target Mini Program can get it in App.onLaunch() or App.onShow().
- **success** (Function) - Optional - Callback function upon call success.
- **fail** (Function) - Optional - Callback function upon call failure.
- **complete** (Function) - Optional - Callback function upon call completion (to be executed upon either call success or failure).

### Request Example
{
  "extraData": {
    "data1": "test"
  }
}
```

--------------------------------

### Install Third-party NPM Module

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_overview

Command to install a third-party NPM module using npm. This should be run in the Mini Program root directory.

```bash
$ npm install lodash --save
```

--------------------------------

### List Component Configuration (.json)

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_layout_secondlist

Configure the list, list-item, and list-secondary components in the JSON file. This setup is necessary for the components to be recognized and used within the mini-program.

```json
{
 "defaultTitle": "List",
 "usingComponents":{
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "list-secondary": "mini-ali-ui/es/list/list-secondary/index"
 }
}
```

--------------------------------

### Success Callback Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_OpenAPI_tradePay

This is an example of a successful response from the payment process, containing the resultCode. This callback is triggered upon successful completion of the payment transaction.

```json
{
    "resultCode":"9000"
}
```

--------------------------------

### Register App with Lifecycle Methods

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_app_register-mini-program

Use App() to register the Mini Program and configure its lifecycle. Call App() once in app.js. The onLaunch method is called once when the Mini Program initializes, and onShow is called when the Mini Program starts or returns to the foreground.

```javascript
App({
  onLaunch(options) {
    // first opening
    console.log(options.query);
	// {number:1}
  },
  onShow(options) {
    // reopening with schema from background
	console.log(options.query);
	// {number:1}
  },
})
```

--------------------------------

### Configure Multiple Custom Components

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_custom-component_use-custom-component

Configure multiple custom components in a page's JSON file, including components from npm modules, project-relative paths, and directory-relative paths. The project absolute path starts with '/', relative paths start with './' or '../', and npm paths do not start with '/'.

```json
// page.json  Note that it is not configured in app.json 
{
  "usingComponents":{
    "your-custom-component":"mini-antui/es/list/index",
    "your-custom-component2":"/components/card/index",
    "your-custom-component3":"./result/index",
    "your-custom-component4":"../result/index"
  }
}
// The project absolute path starts with /; the relative path starts with ./ or ../; the npm path does not start with /

```

--------------------------------

### Implement tips-plain Component

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_prompt-guide_tips

Display a simple tip box using the tips-plain component in AXML.

```xml
<tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
```

--------------------------------

### Check Native App Environment and Get App ID

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/jsbridge-guide

Import 'appEnv' and 'getAppIdSync' from 'hylid-bridge'. Use 'appEnv.isLazada' to conditionally get the app ID, falling back to a default if not on Lazada.

```javascript
import { appEnv, getAppIdSync } from 'hylid-bridge'

Page({
  onLoad() {
    const { appId } = appEnv.isLazada ? getAppIdSync() : { appId: 'taobao-appid' }
  }
})
```

--------------------------------

### Basic Flex Layout Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/extended-component_layout-navigation_flex

Demonstrates basic usage of the flex and flex-item components to create rows of blocks. Use the 'wrap' attribute for multi-line layouts.

```html
	<view class="flex-container">
	  <view class="sub-title">Basic</view>
	  <flex>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	  </flex>
	  <view style="height: 20px;" />
	  <flex>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	  </flex>
	  <view style="height: 20px;" />
	  <flex>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	    <flex-item><view class="placeholder">Block</view></flex-item>
	  </flex>
	  <view className="sub-title">Wrap</view>
	  <flex wrap="wrap">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <view className="sub-title">Align</view>
	  <flex justify="center">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <flex justify="end">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <flex justify="between">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <flex align="start">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline small">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <flex align="end">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline small">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	  <flex align="baseline">
	    <view class="placeholder inline">Block</view>
	    <view class="placeholder inline small">Block</view>
	    <view class="placeholder inline">Block</view>
	  </flex>
	</view>
```

--------------------------------

### Initialize Git Repository

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/mini-program-studio_function-panel_git-management

Use this command to initialize a new Git repository in your project directory if one does not already exist.

```bash
git init
```

--------------------------------

### Success Response Object Example

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_OpenAPI_getOpenUserInfo

This is an example of a successful response object returned by `my.getOpenUserInfo` in the success callback. It contains user details like code, message, country code, gender, nickname, avatar, city, and province.

```json
{
    "response": "{\"response\": {\"code\": \"10000\",\"msg\": \"Success\",\"countryCode\": \"code\",\"gender\": \"f\",\"nickName\": \"XXX\",\"avatar\": \"https://cdn/images/partner/XXXXXXXX\",\"city\": \"city\",\"province\": \"province\"}}"
```

--------------------------------

### GET /getFileInfo

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/API_File_getFileInfo

Retrieves information about a specified file.

```APIDOC
## GET /getFileInfo

### Description
Get file information.

### Method
GET

### Endpoint
/getFileInfo

### Parameters
#### Query Parameters
- **apFilePath** (String) - Required - File path.
- **digestAlgorithm** (String) - Optional - Digest algorithm, supporting `md5` and `sha1`, `md5` by default.

### Request Example
```javascript
my.getFileInfo({
    apFilePath: 'https://resource/apml953bb093ebd2834530196f50a4413a87.video',
  	digestAlgorithm: 'sha1',
    success: (res)=> {
        console.log(JSON.stringify(res))
    }
})
```

### Response
#### Success Response (200)
- **size** (Number) - File size.
- **digest** (String) - Digest result.

#### Response Example
```json
{
  "size": 1024,
  "digest": "example_digest"
}
```
```

--------------------------------

### Configure Page Window Settings

Source: https://mini-program.dana.id/docs/miniprogram_dana/mpdev/framework_page_page-configuration

Example of setting navigation bar options, click-through, and icon themes within a page's JSON configuration file.

```json
{
	"optionMenu": {
	"icon": "https://img.example.com/example.png"
	},
	"titlePenetrate": "YES",
	"barButtonTheme": "light"
}
```