1. 程式人生 > >微信小程式開發之——wx.showToast(OBJECT)的使用

微信小程式開發之——wx.showToast(OBJECT)的使用

wx.showToast API是顯示訊息提示框的作用。
先讓我們看一下官方的文件說明:
這裡寫圖片描述

注意:其中的圖示,只支援”success”、”loading”

示例程式碼:

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

接下來演示如何使用,先開啟微信web開發者工具,新建快速專案,刪除掉首頁沒用的內容,保留如下部分。
這裡寫圖片描述
新增兩個按鈕,同事新增點選事件。再在按鈕上新增navigator導航,連結到預設的日誌頁面。程式碼如下:

  <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>

index.js程式碼如下:

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

為了測試效果直觀一些,我們在兩個按鈕中插入一塊view標籤,讓兩個按鈕上下之間有間距。wxml程式碼如下:

  <view class="br">
</view>

wxss檔案程式碼如下:

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

最終的頁面樣式如下:
這裡寫圖片描述

點選登陸的效果圖:
這裡寫圖片描述
點選檢視更多的效果圖:
這裡寫圖片描述

如果我的文章對您有幫助,微信支付寶打賞:

這裡寫圖片描述
這裡寫圖片描述

相關推薦

程式開發——wx.showToast(OBJECT)的使用

wx.showToast API是顯示訊息提示框的作用。 先讓我們看一下官方的文件說明: 注意:其中的圖示,只支援”success”、”loading” 示例程式碼: wx.showToast({ title: '成功', ico

程式開發小米商城(一)

小程式開發之小米商城Lite 剛接觸小程式不久,感覺相對來說比較簡單,就自己花了五六天做了一個專案,因為本身也是米粉,就看中了小米的微信小程式(可憐國慶擼了幾天的程式碼,哈哈),話不多說,先上效果圖吧。 算了算了。本來還打算上gif圖,但是太難搞了,說明一下吧。

程式開發rpx 的使用說明

最近正著手開發微信小程式,才發現自己差的還是有點遠的。因為在之前的工作中,也都是在閒魚時間通過瀏覽官網api,寫點簡單的demo#hello world#。當我真正去使用它開發專案時,才發現其奧祕頗深。

程式開發SSL證書相關問題

最重要的放最上面:阿里雲CDN 使用的是 Nginx (.crt為證書,.key為私鑰) 阿里雲證書格式說明地址 ssl證書其實本站有很多相關的文章,但是沒有針對ssl證書做過專門的說明,最近發現,還是有很多同學,困擾在這個地方;所以特整理一些有用的知識放在

程式開發路上遇到的那些坑

微信野心越來越大,如今已經從開始簡單的聊天工具發展成了一個網際網路生態系統,網羅了目前各大網際網路平臺所具備的功能,最近iOS端微信上線的“搜一搜”和“看一看”更加證實了這一點,直接看下面這張圖吧: 好了,今天繼續給大家分享這個牛逼的“削蘋果”的小程式的相

程式開發返回重新整理

小程式返回是不會重新重新整理頁面的,因此要事件控制才能人為重新整理頁面 前提:假設是a頁面 跳轉到 b頁面,在b頁面修改後返回 a頁面,要使得a頁面中相關資料進行重新整理 首先,我們在a頁面中寫一個

程式開發get請和post請求的兩種用法

我們在開發微信小程式,需要進行資料請求,這裡只有get和post兩種.get請求,如下圖 但是呢,在很多情況下光只有get請求是不行的,還必須要有post請求,那麼post請求怎麼寫呢,如下圖 這

程式開發城市選擇器 城市切換

移動開發中城市選擇器必不可少.  空白造了個.  gif:  這裡只上部分js程式碼: var city = require('../../utils/city.js'); //歡迎關注:http://www.wxapp-union.com/portal.php //

程式開發使用者系統 一鍵登入 獲取session_key和openid

思來想去不願自己的微信小程式是個單機版本.自己又不會寫後臺.現在藉助leancloud可以實現微信小程式一鍵登入功能.嘗試後,做筆記. 第二步:使用 const AV = require('../.

程式開發頁面分享 onShareAppMessage 分享引數用處

今天下午突然聽到群裡有人說微信小程式工具更新了,文件也更新了不少內容. 顧不上吃冬至的餃子.我就衝進來了. 先說分享功能,目前真機尚不能除錯.開發工具上可以看看效果.後續還會更新. Pag

程式開發五星評分

一位同學說要寫五星評分.要有半顆星的評分. 於是我做了個玩具.有空了做模組化,這程式碼看不下去了. gif: 程式碼: 1.index.wxml <block wx:for="{{s

程式開發左滑修改、刪除功能

wxml: <view class="offer-item" wx:for-items='{{offerList}}'> <!--這裡綁定了剛才說的3個函式分別為 touchS,touchM touchE--> &l

程式開發不能使用eval函式的問題

一 eval函式問題 JavaScript中的eval函式是頗受開發者爭議的問題之一,問題主要在於其可能導致的不安全性。有關此方面問題,在此不再贅述,讀者可能很容易地瀏覽到許多介紹性文章。 但是,eval函式的優點也是很明顯的。例如,使用JS編寫一個計算器程式,在遇到"2+

程式開發動畫 Animation 放大 透明度

突發奇想,做個錄音的模組,結果折騰到一點鐘,還在做話筒的動畫. 最後發現微信還有bug,我也是醉了.有空再接著敲. 先上gif: 這還沒完成,做完之後應該是水波紋的樣子.無奈函式執行多次,動畫只執

程式開發圖片上傳+Java服務端接收 好不好使有待確認

閒言少敘直入正題存放路徑:/root/apache-tomcat-8.5.30/webapps/images/xxx.jpg前端程式碼在網上一搜一大堆,且搜出來的結果基本上是正確的,沒啥好說的,我連程式碼都不想貼(如果有時間的話明天整理下貼在文章結尾,沒時間的話就不貼了)。但是,但是,但是,靠譜的,不用改動就

程式開發網路請求(POST請求)

微信小程式開發中網路請求必不可少.GET.POST請求是最常用的.GET請求 POST請求的時候有好幾個坑.我已經為大家填好了. <img src="https://img-blog.csd

程式開發資料請求載入

開發中不可避免會與後臺進行多條、多次的資料傳遞,那我們該如何來將這部分的資料載入進行公共方法進行呼叫呢,下面就直接上程式碼啦~ loadList: function (event) { if

程式開發網路請求(GET請求)

微信小程式開發中網路請求必不可少,今天說說最簡單的請求.後續會嘗試上傳下載,Socket這些. 1.一個微信小程式,同時只能有5個網路請求連線。 這個規定應該是微信為了保證使用者體驗制定的,畢竟是小程

程式開發電影預告

一、小程式支援的標籤1、view:div和view都是盒模型,預設display:block。盒模型在佈局過程中,一般推薦display:flex的寫法,配合justify-content:center;align-items:center;的定義實現盒模型在橫向和縱向的居中。2、text:除了text文字節

程式開發獲取openid及使用者資訊

1. 獲取openid 1.1 獲取code 呼叫介面獲取登入憑證(code)進而換取使用者登入態資訊,包括使用者的唯一標識(openid) 及本次登入的會話金鑰(session_key)。使用者資料的加解密通訊需要依賴會話金鑰完成。 wx.login({ //獲