华尔街小趴菜 發表於 2023-4-20 18:42:00

小程序开发 对话框功能

<h1><span style="color: rgba(22, 145, 121, 1)">版权声明</span></h1>
<p>本文来自博客园，作者：观心静&nbsp;，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17337941.html</p>
<div>本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。</div>
<h1><span style="color: rgba(22, 145, 121, 1)">前言</span></h1>
<p>  小程序的对话框其实已经帮你实现了很多类型，原则上没有特殊需求不需要自定义开发对话框，这部分内容微信文档上讲解的还是挺不错的，所以写这篇博客有点多余。但是，有一个很不爽，他们没给效果图，所以这篇博客是带着效果图看看小程序的对话框效果。</p>
<p>  参考的微信文档：wx.showToast(Object object) | 微信开放文档 (qq.com)</p>
<h1><span style="color: rgba(22, 145, 121, 1)">WX对话框API</span></h1>
<ul class="NavigationLevel__children">
<li><span class="NavigationItem NavigationItem--active">wx.showToast&nbsp; &nbsp; 显示提示的对话框</span></li>
<li><span class="NavigationItem">wx.showModal&nbsp; 显示选择的对话框-带按钮</span></li>
<li><span class="NavigationItem">wx.showLoading&nbsp; 显示加载对话框</span></li>
<li><span class="NavigationItem">wx.showActionSheet&nbsp; 显示列表选项对话框</span></li>
<li><span class="NavigationItem">wx.hideToast&nbsp; &nbsp; 隐藏提示对话框</span></li>
<li><span class="NavigationItem">wx.hideLoading&nbsp; 隐藏加载对话框</span></li>
<li><span class="NavigationItem">wx.enableAlertBeforeUnload&nbsp; 启用退出拦截对话框，比如在要退出某个页面时提示，退出后数据会被清空</span></li>
<li><span class="NavigationItem">wx.disableAlertBeforeUnload&nbsp; 取消退出拦截对话框</span></li>
</ul>
<h1><span style="color: rgba(22, 145, 121, 1)">showToast</span></h1>
<h2><span style="color: rgba(35, 111, 161, 1)">提示成功的效果</span></h2>
<p><span style="color: rgba(0, 0, 0, 1)">效果图：</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230420182941278-764715544.png"></span></p>
<p><span style="color: rgba(0, 0, 0, 1)">js代码</span></p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: 'title',   //标题
            icon:"success",   //图标 success
            duration:1000000,   //持续时间
          })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1); background-color: rgba(255, 255, 255, 1)">提示失败的效果</span></h2>
<p><span style="color: rgba(0, 0, 0, 1)">效果图：</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230420183127036-1183211732.png"></span></p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: 'title',   //标题
            icon:"error",   //图标 error
            duration:1000000,   //持续时间
          })
    },</code></pre>
<p><span style="color: rgba(0, 0, 0, 1)">js代码</span></p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: 'title',   //标题
            icon:"error",   //图标 error
            duration:1000000,   //持续时间
          })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">提示加载中的效果</span></h2>
<p><span style="color: rgba(0, 0, 0, 1)">效果图</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230420183257646-2083731497.gif" alt="" height="276" width="308"></span></p>
<p id="1681986779073">js代码</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: 'title',   //标题
            icon:"loading",   //图标 loading
            duration:1000000,   //持续时间
          })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">没有图标的效果</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230420183511064-269419622.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: 'title',   //标题
            icon:"none",   //没有图标 none
            duration:1000000,   //持续时间
          })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">自定义图标的效果</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230420183940513-215330477.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: '设置成功',   //标题
            image:'/image/ic_settings_1.png',   //自定义图标的本地路径，image 的优先级高于 icon
            duration:1000000,   //持续时间
          })
    },</code></pre>
<div>
<h2><span style="color: rgba(35, 111, 161, 1)">触控阻挡</span></h2>
</div>
<p><span style="color: rgba(0, 0, 0, 1)">js</span></p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: '设置成功',   
            icon:'success',
            duration:1000000,
            mask:true, //是否显示透明蒙层，可以阻止触控事件穿透对话框，点击下层的视图元素
          })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">回调</span></h2>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showToast({
            title: '设置成功',   
            icon:'success',
            duration:1000000,
            success(){
                console.log('成功')
            },
            fail(){
                console.log('失败')
            },
            complete(){
                console.log('完成')
            },
          })
    },</code></pre>
<div>
<h1><span style="color: rgba(22, 145, 121, 1)">showModal</span></h1>
<h2><span style="color: rgba(35, 111, 161, 1)">正常使用</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421101401054-1752566927.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showModal({
          title: 'title',
          content: 'content',
          complete: (res) =&gt; {
            if (res.cancel) {
                console.log('点击取消')
            }
            if (res.confirm) {
                console.log('点击确定')
            }
          }
      })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">不显示取消按钮</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421101641685-838915538.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showModal({
          title: 'title',
          content: 'content',
          showCancel: false,
          complete: (res) =&gt; {
            if (res.confirm) {
                console.log('点击确定')
            }
          }
      })
    },</code></pre>
</div>
<h2><span style="color: rgba(35, 111, 161, 1)">自定义按钮文本与颜色</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421102147095-791677269.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showModal({
          title: '提示',
          content: '是否关闭此设备',
          confirmText:'开启',       //自定义提交按钮文本，最多4个字
          confirmColor:"#DC143C",   //自定义提交按钮颜色
          cancelText:'关闭',      //自定义取消按钮文本，最多4个字
          cancelColor:"#228B22",    //自定义取消按钮颜色
          complete: (res) =&gt; {
            if (res.cancel) {
                console.log('点击取消')
            }
            if (res.confirm) {
                console.log('点击确定')
            }
          }
      })
    },</code></pre>
<h1><span style="color: rgba(35, 111, 161, 1)">显示输入框</span></h1>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421105424641-782776234.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showModal({
            title: '提示',
            content: '', //这里可以预设输入框内容
            editable: true, //是否显示输入框
            placeholderText: '请输入设备名称', //输入框文本提示
            complete: (res) =&gt; {
                console.log('输入框里的内容=', res.content) //res.content 可以获得输入框里输入的内容
                if (res.cancel) {
                  console.log('点击取消')
                }
                if (res.confirm) {
                  console.log('点击确定')
                }
            }
      })
    },</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">回调</span></h2>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showModal({
          title: 'title',
          content: 'content',
          success(){

          },
          fail(){

          },
          complete: (res) =&gt; {
   
          }
      })
    },</code></pre>
<div>
<h1><span style="color: rgba(22, 145, 121, 1)">showLoading</span></h1>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421110001219-2017100804.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      //显示加载对话框
      wx.showLoading({
          title: '加载中',
          mask:true,    //设置蒙版不让触控穿透
      })
      //超时5秒后关闭对话框
      setTimeout(function() {
            wx.hideLoading()
      }, 5000)
    },</code></pre>
</div>
<div>
<h1><span style="background-color: rgba(255, 255, 255, 1); color: rgba(22, 145, 121, 1)">showActionSheet</span></h1>
</div>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421111622661-562934482.png"></p>
<p>js</p>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>    onLoad(options) {
      wx.showActionSheet({
            alertText: "提示",
            itemList: ['苹果', '香蕉', '葡萄',],
            itemColor:'#ff6633',
            success(res) {
                console.log('用户点击选择的位置 = ', res.tapIndex) //res.tapIndex为选中的位置
            },
            fail(res) {
                console.log(res.errMsg)
            }
      })
    },</code></pre>
<div>
<h1><span style="color: rgba(22, 145, 121, 1)">enableAlertBeforeUnload</span></h1>
</div>
<p>注意这个需要在能退出的页面才会触发退出警告对话框。</p>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202304/1497956-20230421112550382-1708800724.png"></p>
<p>js</p>
<pre id="__new" class="language-javascript highlighter-hljs" data-dark-theme="true"><code>      wx.enableAlertBeforeUnload({
            message: '你真的要退出吗？',
            success(){

            },
            fail(){
               
            },
            complete(){
               
            }
      })</code></pre>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: rgba(22, 145, 121, 1)">End</span></p>

</div>
<div id="MySignature" role="contentinfo">
    <div style="text-align: center">
    <p style="color:orange;font-size:16px;" >本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17337941.html </p>
    <div style="color:orange;font-size:16px;">本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div>
</div><br><br>
来源：https://www.cnblogs.com/guanxinjing/p/17337941.html
頁: [1]
查看完整版本: 小程序开发 对话框功能