wx.showToast API是顯示消息提示框的作用。 
先讓我們看一下官方的文檔說明： 

注意：其中的圖標(biāo)，只支持”success”、”loading”

示例代碼：

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

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

接下來演示如何使用，先打開微信web開發(fā)者工具，新建快速項(xiàng)目，刪除掉首頁沒用的內(nèi)容，保留如下部分。    添加兩個(gè)按鈕，同事添加點(diǎn)擊事件。再在按鈕上添加navigator導(dǎo)航，鏈接到默認(rèn)的日志頁面。代碼如下：

  <navigator url="../logs/logs">
    <button type="primary" bindtap="logbtn"> 登陸 </button>
  </navigator>
  <view class="br">

  </view>
  <navigator url="../logs/logs">
    <button type="primary" bindtap="morebtn"> 查看更多 </button>
  </navigator>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

index.js代碼如下：

  logbtn: function () {
    wx.showToast({
      title: '登陸成功',
      icon: 'success',
      duration: 1200
    })
  },
  morebtn: function () {
    wx.showToast({
      title: '加載中',
      icon: 'loading',
      duration: 1200
    })
  },

為了測試效果直觀一些，我們在兩個(gè)按鈕中插入一塊view標(biāo)簽，讓兩個(gè)按鈕上下之間有間距。wxml代碼如下：

  <view class="br">

  </view>

• 1
• 2
• 3

• 1
• 2
• 3

wxss文件代碼如下：

.br{
  width: 100%;
  height: 200rpx;
}

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

最終的頁面樣式如下： 

點(diǎn)擊登陸的效果圖：    點(diǎn)擊查看更多的效果圖：