閱讀(7.8k) 書簽贊(0) 我要糾錯

百度智能小程序API 界面

2020-08-12 16:03 更新

交互反饋

showToast

解釋：顯示消息提示框

參數(shù)：Object

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
title	String	否	提示的內(nèi)容（最多 14 個字符）
icon	String	否	圖標，有效值 “success”, 默認“normal”
duration	Number	否	提示的延遲時間，單位毫秒，默認：1500
mask	Boolean	否	是否顯示透明蒙層，防止觸摸穿透，默認：false
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.showToast({
    title: '我是標題',
    icon: 'loading',
    duration: 1000,
});

showLoading

解釋：顯示 loading 提示框, 需主動調(diào)用 hideLoading 才能關(guān)閉提示框

參數(shù)：Object

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
title	String	是	提示的內(nèi)容
mask	String	否	是否顯示透明蒙層，防止觸摸穿透，默認：false
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

hideToast

解釋：隱藏消息提示框

hideLoading

解釋：隱藏 loading 提示框

示例：

swan.showLoading({
    title: '加載中',
    mask: 'true'
});

setTimeout(function() {
    swan.hideLoading();
}, 2000);

showModal

解釋：顯示模態(tài)彈窗

參數(shù)：Object

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
title	String	是	提示的標題
content	String	是	提示的內(nèi)容
showCancel	Boolean	否	是否顯示取消按鈕，默認為 true
cancelText	String	否	取消按鈕的文字，默認為“取消”，最多 4 個字符
cancelColor	HexColor	否	取消按鈕的文字顏色，默認為 “#000000”
confirmText	String	否	確定按鈕的文字，默認為“確定”，最多 4 個字符
confirmColor	HexColor	否	確定按鈕的文字顏色，默認顏色為“#3c76ff”
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

success返回參數(shù)說明：

參數(shù)名	類型	說明
confirm	Boolean	為 true 時，表示用戶點擊了確定按鈕
cancel	Boolean	為 true 時，表示用戶點擊了取消

示例：

swan.showModal({
    title: '提示',
    content: '這是一個模態(tài)彈窗',
    cancelColor: '#999999',
    confirmColor: '#0099cc',
    success: function (res) {
        if (res.confirm) {
            console.log('用戶點擊了確定');
        } else if (res.cancel) {
            console.log('用戶點擊了取消');
        }
    }
});

showActionSheet

解釋：?顯示操作菜單

參數(shù)：Object

?Object參數(shù)說明：

參數(shù)名	類型	必填	說明
itemList	String Array	是	按鈕的文字數(shù)組，數(shù)組長度最大為6個
itemColor	HexColor	否	按鈕的文字顏色，默認顏色為“#3c76ff”
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)，詳見返回參數(shù)說明
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

success返回參數(shù)說明：

參數(shù)名	類型	說明
tapIndex	Number	用戶點擊的按鈕，從上到下的順序，從0開始

示例：

swan.showActionSheet({
    itemList: ['同意', '一般', '不同意'],
    success: function (res) {
        console.log('用戶點擊了第' + (res.tapIndex + 1) + '按鈕');
    }
});

設(shè)置導(dǎo)航條

setNavigationBarTitle

解釋：動態(tài)設(shè)置當前頁面的標題。

參數(shù)：Object

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
title	String	是	頁面標題
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.setNavigationBarTitle({
    title: '我是頁面標題'
});

showNavigationBarLoading

解釋：該方法在當前頁面顯示導(dǎo)航條加載動畫

hideNavigationBarLoading

解釋：隱藏導(dǎo)航條加載動畫。

setNavigationBarColor

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
frontColor	String	是	前景顏色值，包括按鈕、標題、狀態(tài)欄的顏色，僅支持 #ffffff 和 #000000
backgroundColor	String	是	背景顏色值，有效值為十六進制顏色
animation	Object	否	動畫效果
animation.duration	Number	否	動畫變化時間，默認0，單位：毫秒
animation.timingFunc	String	否	動畫變化方式，默認 linear
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

animation.timingFunc 有效值：

值	說明
linear	動畫從頭到尾的速度是相同的。
easeIn	動畫以低速開始
easeOut	動畫以低速結(jié)束。
easeInOut	動畫以低速開始和結(jié)束。

success返回參數(shù)說明：

參數(shù)名	類型	說明
errMsg	String	調(diào)用結(jié)果

示例：

swan.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
        duration: 500,
        timingFunc: 'linear'
	}
});

設(shè)置tabBar

setTabBarBadge

解釋：為 tabBar 某一項的右上角添加文本

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
index	String	是	tabBar的哪一項，從左邊算起
text	String	是	顯示的文本，超過 4 個字符則顯示成“…”
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.setTabBarBadge({
    index: '0',
    text: '文本'
});

removeTabBarBadge

解釋：移除tabBar某一項右上角的文本。

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
index	String	是	tabBar的哪一項，從左邊算起
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.removeTabBarBadge({
    index: '1'
});

showTabBarRedDot

解釋：顯示 tabBar 某一項的右上角的紅點

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
index	String	是	tabBar的哪一項，從左邊算起
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.showTabBarRedDot({
    index: '1'
});

hideTabBarRedDot

解釋：隱藏 tabBar 某一項的右上角的紅點

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
index	String	是	tabBar的哪一項，從左邊算起
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.hideTabBarRedDot({
    index: '1'
});

setTabBarStyle

解釋：動態(tài)設(shè)置 tabBar 的整體樣式

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
color	HexColor	是	tab 上的文字默認顏色
selectedColor	HexColor	是	tab 上的文字選中時的顏色
backgroundColor	HexColor	是	tab 的背景色
borderStyle	String	是	tabbar上邊框的顏色，僅支持 black/white
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.setTabBarStyle({
    color: '##FFFFBD',
    selectedColor: '##FFFFBD',
    backgroundColor: '##FFFFBD',
    borderStyle: 'white'
});

setTabBarItem

解釋：動態(tài)設(shè)置 tabBar 某一項的內(nèi)容

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
index	String	是	tabBar的哪一項，從左邊算起
text	String	是	tab 上按鈕文字
iconPath	String	是	圖片絕對路徑，icon 大小限制為 40KB，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數(shù)無效，不支持網(wǎng)絡(luò)圖片
selectedIconPath	String	是	選中時的圖片的絕對路徑，icon 大小限制為 40KB，建議尺寸為 81px * 81px ，當`position`為 top 時，此參數(shù)無效
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.setTabBarItem({
    index: '0',
    text: 'tabBar按鈕',
    // 圖片路徑 
    iconPath: '/images/component_normal.png',
    // 選中圖片路徑
    selectedIconPath: '/images/component_selected.png',
});

showTabBar

解釋：顯示 tabBar

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.showTabBar({
    success: function (res) {
        console.log(res);
    },
    fail: function (err) {
        console.log('錯誤碼：' + err.errCode);
        console.log('錯誤信息：' + err.errMsg);
    }
});

hideTabBar

解釋：隱藏 tabBar

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.hideTabBar({
    success: function (res) {
        console.log(res);
    },
    fail: function (err) {
        console.log('錯誤碼：' + err.errCode);
        console.log('錯誤信息：' + err.errMsg);
    }
});

導(dǎo)航

navigateTo

解釋：保留當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用 swan.navigateBack 可以返回到原頁面。

參數(shù)：Object

注意：為了不讓用戶在使用智能小程序時造成困擾，我們規(guī)定頁面路徑只能是五層，請盡量避免多層級的交互方式。

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2’
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.navigateTo({
    url: 'example/xxx?key=value'
});

redirectTo

解釋：關(guān)閉當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2’
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.redirectTo({
    url: 'example/xxx?key=value'
});

switchTab

解釋：跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數(shù)
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

{
    "tabBar": {
        "list": [{
            "pagePath": "index",
            "text": "首頁"
        },{
            "pagePath": "list",
            "text": "列表"
        }]
    }
}

swan.switchTab({
    url: '/list',
});

navigateBack

解釋：關(guān)閉當前頁面，返回上一頁面或多級頁面。

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
delta	Number	否	返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。默認為 1

示例：

// 注意：調(diào)用 navigateTo 跳轉(zhuǎn)時，調(diào)用頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 當前是首頁
swan.navigateTo({
    url: 'list?key=value'
});

// 當前是列表頁
swan.navigateTo({
    url: 'detail?key=value'
});

// 在詳情頁內(nèi) navigateBack，將返回首頁
swan.navigateBack({
    delta: 2
});

reLaunch

解釋：關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用 & 分隔；如 ‘path?key=value&key2=value2’，如果跳轉(zhuǎn)的頁面路徑是 tabBar 頁面則不能帶參數(shù)
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例：

swan.reLaunch({
    url: 'example/xxx?key=value'
});

動畫

createAnimation

解釋：創(chuàng)建一個動畫實例 animation

參數(shù)：Object

Object 參數(shù)說明：

參數(shù)名	類型	必填	默認值	說明
duration	Integer	否	400	動畫持續(xù)時間，單位 ms
timingFunction	String	否	‘linear’	定義動畫的效果
delay	Integer	否	0	動畫延遲時間，單位 ms
transformOrigin	String	否	‘50% 50% 0’	動畫

timingFunction 有效值：

值	說明
linear	以相同速度開始至結(jié)束
ease	慢速開始，然后變快，然后慢速結(jié)束
ease-in	慢速開始的過渡效果
ease-in-out	動畫以低速開始和結(jié)束
ease-out	動畫以低速結(jié)束
step-start	動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
step-end	動畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài)


var animation = swan.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
});

animation

解釋：動畫實例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回自身，支持鏈式調(diào)用的寫法。

animation方法列表

普通樣式：

方法	參數(shù)	說明
opacity	value	透明度，參數(shù)范圍 0~1
backgroundColor	color	顏色值
width	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
height	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
top	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
left	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
bottom	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
right	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值

旋轉(zhuǎn)：

方法	參數(shù)	說明
rotate	deg	deg的范圍-180~180，從原點順時針旋轉(zhuǎn)一個 deg 角度
rotateX	deg	deg的范圍-180~180，在X軸旋轉(zhuǎn)一個 deg 角度
rotateY	deg	deg的范圍-180~180，在Y軸旋轉(zhuǎn)一個 deg 角度
rotateZ	deg	deg的范圍-180~180，在Z軸旋轉(zhuǎn)一個 deg 角度
rotate3d	(x,y,z,deg)	同 transform-function rotate3d

縮放：

方法	參數(shù)	說明
scale	sx,[sy]	一個參數(shù)時，表示在X軸、Y軸同時縮放sx倍數(shù)；兩個參數(shù)時表示在X軸縮放sx倍數(shù)，在Y軸縮放sy倍數(shù)
scaleX	sx	在X軸縮放sx倍數(shù)
scaleY	sy	在Y軸縮放sy倍數(shù)
scaleZ	sz	在Z軸縮放sy倍數(shù)
scale3d	(sx,sy,sz)	在X軸縮放sx倍數(shù)，在Y軸縮放sy倍數(shù)，在Z軸縮放sz倍數(shù)

偏移：

方法	參數(shù)	說明
translate	tx,[ty]	一個參數(shù)時，表示在X軸偏移 tx ，單位 px ；兩個參數(shù)時，表示在 X 軸偏移 tx ，在 Y 軸偏移 ty ，單位 px 。
translateX	tx	在 X 軸偏移 tx ，單位 px
translateY	ty	在 Y 軸偏移 tx ，單位 px
translateZ	tz	在 Z 軸偏移 tx ，單位 px
translate3d	(tx,ty,tz)	在 X 軸偏移 tx ，在 Y 軸偏移 ty ，在 Z 軸偏移 tz，單位 px

傾斜：

方法	參數(shù)	說明
skew	ax,[ay]	參數(shù)范圍-180~180；一個參數(shù)時， Y 軸坐標不變， X 軸坐標延順時針傾斜 ax 度；兩個參數(shù)時，分別在 X 軸傾斜 ax 度，在 Y 軸傾斜 ay 度。
skewX	ax	參數(shù)范圍-180~180；Y 軸坐標不變， X 軸坐標延順時針傾斜 ax 度
skewY	ay	參數(shù)范圍-180~180；X 軸坐標不變， Y 軸坐標延順時針傾斜 ay 度

矩陣變形：

方法	參數(shù)	說明
matrix	(a,b,c,d,tx,ty)	同transform-function matrix
matrix3d	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D轉(zhuǎn)換，同transform-function matrix

動畫隊列

調(diào)用動畫操作方法后要調(diào)用 step() 來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。

示例：

<view bind:tap="starttoanimate" animation="{{animationData}}"></view>

Page({
    data: {
        animationData: {}
    },
    starttoanimate: function () {
        var animation = swan.createAnimation();
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
    }
});

下拉刷新

onPullDownRefresh

解釋：在 Page 中定義 onPullDownRefresh 處理函數(shù)，監(jiān)聽該頁面用戶下拉刷新事件。

參數(shù)：Object

示例：

Page({
    onPullDownRefresh() {
        // do something
    }
});

需要在 config 的 window 選項中開啟 enablePullDownRefresh。當處理完數(shù)據(jù)刷新后，swan.stopPullDownRefresh 可以停止當前頁面的下拉刷新。

startPullDownRefresh

解釋：開始下拉刷新，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致

參數(shù)：Object

Object參數(shù)說明：

參數(shù)名	類型	必填	說明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

success返回參數(shù)說明：

參數(shù)名	類型	說明
errMsg	String	接口調(diào)用結(jié)果

示例：

swan.startPullDownRefresh();

stopPullDownRefresh

解釋：停止當前頁面下拉刷新。

參數(shù)：無

示例：

swan.stopPullDownRefresh();

以上內(nèi)容是否對您有幫助：

← 百度智能小程序API 繪圖

百度智能小程序API 設(shè)備 →

寫筆記

我要補充