了解微信小程序之wx.showToast - Web前端

昨天才做了个微信小程序的页面，因为入门不久，很多东西还不熟悉，一些弹出层的交互还是比较陌生，还有很多要学习。今天在这里就分享昨天才学习到的微信小程序之wx.showToast。

wx.showToast(Object)这个是微信提供的API，其作用是是显示消息提示框。下面是官方的文档说明：

注意：其中的图标，只支持”success”、”loading”虽然只有两种图标，但是可以用到很多的场景，所有要说明成功失败或者其他文字说明的都可以用这个”success”图标，但是如果需要给用户有等待的心态，就要用到"loading"这个图标了。
下面是官方的示例代码：

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000})

大家可以把代码复制进去试试看下效果。

接下来我们一起来看下官方提供的一个DemO，如下图：

index页面的Wxml代码所示：

<view class="body-vIEw">
    <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
        默认    </toast>
    <button type="default" bindtap="toast1Tap">点击弹出默认toast</button></view><view class="body-view">
    <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
        设置duration    </toast>
    <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>
</view>

比如我们想实现弹出“登录成功”和“加载中”的提示，页面上JS交互这样来写：

toast1Change: function () {
    wx.showToast({    
    title: '登陆成功',    
    icon: 'success',    
    duration: 1200
  })
},
toast1Tap: function () {
  wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1200
  })
},

最终效果很简单，这只是提示最基本的功能，在很多情况下我们都需要自定义弹出框的，很少用系统自带的，这里提出来只是告诉大家交互的基本方法。

如果我们想自定义弹出层怎么弄呢，很简单的哟，继续往下看。

首先我们在WXML代码里新建一个按钮和弹出层的代码：

  <button type="PRimary" bindtap="searchBTn">点击弹出</button>

  <!-- layer   -->
    <toast hidden="{{status}}" duration="3000" bindchange="toastHide">
          <view>这里是弹出层的内容123123</view>
          <view>这里是弹出层的内容</view>
          <button bindtap="toastHide">关闭</button>
    </toast>

上面的WXML，按钮我们使用了bindtap和bindchange方法，分别传参数searchBtn和toastHide，接下来我们的js代码可以这样来写：

var status = true;
Page({
    searchBtn: function (event) {
      console.log("触发了点击事件，弹出toast")
      status = false
      this.setdata({ status: status })　　　　//setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
    },
    toastHide: function (event) {
      console.log("触发bindchange，隐藏toast")
      status = true
      this.setData({ status: status })
    },
    data: {
      status: status　　　　　　　　　　　　//data里面的属性可以传递到视图
    },    
})

对于上面提到的参数分别执行了动，核心代码就这些，至于样式大家自己去搞定。

标签：程序WebshowToastwx微信小