Mobile Platform as a Service:フィードバック

my.alert

アラートボックス。アラートボックスのタイトル、コンテンツ、およびボタンテキストを設定できます。画像などのスタイルの設定は現在サポートされていません。

パラメーター

サンプルコード

// API-DEMO page/API/alert/alert.json
{
  "defaultTitle": "アラート"
}

<!-- API-DEMO page/API/alert/alert.axml-->
<view class="page">
  <view class="page-description">アラートボックス API</view>
  <view class="page-section">
    <view class="page-section-title">my.alert</view>
    <view class="page-section-demo">
      <button type="primary" onTap="alert">アラートボックスを表示する</button>
    </view>
  </view>
</view>

// API-DEMO page/API/alert/alert.js
Page({
  alert() {
    my.alert({
      title: 'お客様各位',
      content: '月次請求書が作成されました',
      buttonText: '了解',
      success: () => {
        my.alert({
          title: 'ユーザーが「了解」をクリックしました',
        });
      }
    });
  },
})

my.confirm

確認ボックス。現在の操作を確認するようにユーザーに促すための確認ボックス。確認ボックスのタイトル、コンテンツ、および確認ボタンまたはキャンセルボタンのテキストを設定できます。

パラメーター

success の戻り値

サンプルコード

// API-DEMO page/API/confirm/confirm.json
{
    "defaultTitle": "確認"
}

<!-- API-DEMO page/API/confirm/confirm.axml-->
<view class="page">
  <view class="page-description">確認ボックス API</view>
  <view class="page-section">
    <view class="page-section-title">my.confirm</view>
    <view class="page-section-demo">
      <button type="primary" onTap="comfirm">確認ボックスを表示する</button>
    </view>
  </view>
</view>

// API-DEMO page/API/confirm/confirm.js
Page({
  comfirm() {
    my.confirm({
      title: 'リマインダー',
      content: '追跡番号：\n1234567890 の荷物照会を実行しますか？',
      confirmButtonText: '今すぐ照会',
      cancelButtonText: '今はしない',
      success: (result) => {
        my.alert({
          title: `${result.confirm}`,
        });
      },
    });
  },
});

my.prompt

このインターフェイスを使用すると、ユーザーがダイアログボックスにテキストを入力するためのダイアログボックスを表示できます。

パラメーター

success の戻り値

サンプルコード

my.prompt({
  title: '単一行タイトル',
  message: '現在の状況を説明し、ユーザーに解決策を提示します。できれば2行以内にしてください',
  placeholder: '友達にメッセージを残す',
  okButtonText: 'OK',
  cancelButtonText: 'キャンセル',
  success: (result) => {
    my.alert({
      title: JSON.stringify(result),
    });
  },
});

my.showToast

このインターフェイスを使用すると、トーストを表示できます。トーストの表示時間を設定できます。

パラメーター

サンプルコード

// API-DEMO page/API/toast/toast.json
{
    "defaultTitle": "トースト"
}

<!-- API-DEMO page/API/toast/toast.axml-->
<view class="page">
  <view class="page-description">トースト API</view>
  <view class="page-section">
    <view class="page-section-title">my.showToast</view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastSuccess">成功プロンプトテキストを表示する</view>
      <view type="primary" onTap="showToastFail">失敗プロンプトテキストを表示する</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">例外プロンプトテキストを表示する</view>
      <view type="primary" onTap="showToastNone">「なし」トーストを表示する。</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">トーストを非表示にする。</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: '操作成功',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: '操作失敗',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: 'ネットワーク例外',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '少々お待ちください',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.hideToast

このインターフェイスを使用すると、トーストを非表示にできます。

パラメーター

サンプルコード

// API-DEMO page/API/toast/toast.json
{
    "defaultTitle": "トースト"
}

<!-- API-DEMO page/API/toast/toast.axml-->
<view class="page">
  <view class="page-description">トースト API</view>
  <view class="page-section">
    <view class="page-section-title">my.showToast</view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastSuccess">成功プロンプトテキストを表示する</view>
      <view type="primary" onTap="showToastFail">失敗プロンプトテキストを表示する</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">例外プロンプトテキストを表示する</view>
      <view type="primary" onTap="showToastNone">「なし」トーストを表示する。</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">トーストを非表示にする。</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: '操作成功',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: '操作失敗',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: 'ネットワーク例外',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '少々お待ちください',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'トーストが消えました',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.showLoading

このインターフェイスを使用すると、読み込みプロンプト付きのトランジション効果を表示できます。このインターフェイスは、my.hideLoading 操作と一緒に使用できます。

パラメーター

サンプルコード

// API-DEMO page/API/loading/loading.json
{
    "defaultTitle": "読み込みプロンプト"
}

<!-- API-DEMO page/API/loading/loading.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">
      読み込みプロセス中は、HTML5 ページ全体が覆われ、インタラクティブではなくなります。
    </view>
    <view class="page-section-btns">
      <view onTap="showLoading">読み込みプロンプトを表示する。</view>
    </view>
  </view>
</view>

// API-DEMO page/API/loading/loading.js
Page({
  showLoading() {
    my.showLoading({
      content: '読み込み中...',
      delay: 1000,
    });
    setTimeout(() => {
      my.hideLoading();
    }, 5000);
  },
});

/* API-DEMO page/API/loading/loading.acss */
.tips{
  margin-left: 10px;
  margin-top: 20px;
  color: red;
  font-size: 12px;
}
.tips .item {
  margin: 5px 0;
  color: #888888;
  line-height: 14px;
}

my.hideLoading

このインターフェイスを使用すると、読み込みプロセスを表示するために指定されたトランジション効果を非表示にできます。このインターフェイスは、my.showLoading 操作と一緒に使用できます。

パラメーター

サンプルコード

Page({
  onLoad() {
    my.showLoading();
    const that = this;
    setTimeout(() => {
      my.hideLoading({
        page: that, // page パラメーターを指定して、必要に応じて特定のページで my.hideLoading 操作が実行されるようにします。
      });
    }, 4000);
  }
})

my.showActionSheet

このインターフェイスを使用すると、アクションシートを表示できます。

パラメーター

badges パラメーターの各オブジェクトに指定するパラメーター

サンプルコード

// API-DEMO page/API/action-sheet/action-sheet.json
{
    "defaultTitle": "アクションシート"
}

<!-- API-DEMO page/API/action-sheet/action-sheet.axml-->
<view class="page">
  <view class="page-description">アクションシートを表示するための API 操作</view>
  <view class="page-section">
    <view class="page-section-title">my.showActionSheet</view>
    <view class="page-section-demo">
      <button type="primary" onTap="showActionSheet">アクションシートを表示する。</button>
    </view>
  </view>
</view>

// API-DEMO page/API/action-sheet/action-sheet.js
Page({
  showActionSheet() {
    my.showActionSheet({
      title: 'Alipay-アクションシート',
      items: ['メニュー 1', 'メニュー 2', 'メニュー 3'],
      cancelButtonText: 'キャンセル',
      success: (res) => {
        const btn = res.index === -1 ? 'キャンセル' : 'No.' + res.index;
        my.alert({
          title: `選択したのは ${btn} です`,
        });
      },
    });
  },
});