JSAPI

  • prompt

    prompt输入框弹窗的native实现

    使用方法

    AlipayJSBridge.call('prompt', {
      title: '亲',
      message: '确定要这么干吗?',
      placeholder:'提示文案',
      okButton: '是',
      cancelButton: '否'
    }, function(result) {
      alert(JSON.stringify(result));
    });
    

    代码演示

    prompt

    <h1>点击以下按钮看效果</h1>
    <a href="javascript:void(0)" class="btn prompt">点击prompt</a>
    <p class="result"></p>
    <script>
    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }
    ready(function() {
      document.querySelector('.prompt').addEventListener('click', function() {
        AlipayJSBridge.call('prompt', {
          title: '亲',
          message: '确定要这么干吧',
          okButton: '确定',
          cancelButton: '算了',
          placeholder:'placeholder'
        }, function(result) {
          alert(JSON.stringify(result));
          if (result.ok) {
            document.querySelector('.result').textContent = result.inputValue;
          }      
        });
      });
    });
    </script>
    

    API

    AlipayJSBridge.call('prompt',{
      title, message, okButton, cancelButton,placeholder
    }, fn)
    

    入参

    名称类型描述必选默认值版本
    titlestringprompt框标题N‘’
    messagestringprompt框文本N
    alignstringmessage对齐方式,可用枚举left/center/rightNiOS ‘center’, android ‘left’10.0.5
    okButtonstring确定按钮文字N‘确定’
    cancelButtonstring取消按钮文字N‘取消’
    placeholderstring输入框内的提示文案N‘’
    fnfunction回调函数,当点击button后被调用N

    使用注意

    • prompt这个api和alert一样,它也不是阻塞式的,也就是说先后弹2个的话,最后看到的是后弹的那个。