微信小程序的開(kāi)發(fā)要考慮到很多方面的問(wèn)題,微信小程序消息提示音你知道要怎么設(shè)置嗎?其實(shí)這和開(kāi)發(fā)一個(gè)微信小程序一樣,也需要代碼。
做Android的時(shí)候?qū)oast是很熟悉的.微信小程序開(kāi)發(fā)中toast也是重要的消息提示方式.
提示框:
wx.showToast(OBJECT)
顯示消息提示框
OBJECT參數(shù)說(shuō)明:

小程序代碼:
?
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
wx.hideToast()
隱藏消息提示框
?
wx.showToast({
title: '加載中',
icon: 'loading',
duration: 10000
})
setTimeout(function(){
wx.hideToast()
},2000)
wx.showModal(OBJECT)
顯示模態(tài)彈窗
OBJECT參數(shù)說(shuō)明:

示例代碼:
?
wx.showModal({
title: '提示',
content: '這是一個(gè)模態(tài)彈窗',
success: function(res) {
if (res.confirm) {
console.log('用戶(hù)點(diǎn)擊確定')
}
}
})
wx.showActionSheet(OBJECT)
顯示操作菜單
OBJECT參數(shù)說(shuō)明:

success返回參數(shù)說(shuō)明:

示例代碼:
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
})
設(shè)置不同的小程序?qū)Ш綏l
wx.setNavigationBarTitle(OBJECT)
動(dòng)態(tài)設(shè)置頁(yè)面的標(biāo)題。
OBJECT參數(shù)說(shuō)明:

示例代碼:
setNavigationBarTitle({
title: '當(dāng)前頁(yè)面'
})
wx.showNavigationBarLoading()
在當(dāng)前頁(yè)面顯示導(dǎo)航條加載動(dòng)畫(huà)。
wx.hideNavigationBarLoading()
隱藏導(dǎo)航條加載動(dòng)畫(huà)。
頁(yè)面跳轉(zhuǎn):
wx.navigateTo(OBJECT)
保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,使用wx.navigateBack可以返回到原頁(yè)面。
OBJECT參數(shù)說(shuō)明:

示例代碼:
wx.navigateTo({
url: 'test?id=1'
})
?
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
注意:為了不讓用戶(hù)在使用小程序時(shí)造成困擾,我們規(guī)定頁(yè)面路徑只能是五層,請(qǐng)盡量避免多層級(jí)的交互方式。
wx.redirectTo(OBJECT)
關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
OBJECT參數(shù)說(shuō)明:

示例代碼:
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateBack(OBJECT)
關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages()) 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。
OBJECT參數(shù)說(shuō)明:

動(dòng)畫(huà):
wx.createAnimation(OBJECT)
創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫(huà)。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性。
注意: export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫(huà)操作
OBJECT參數(shù)說(shuō)明:

var animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation
動(dòng)畫(huà)實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫(huà),調(diào)用結(jié)束后會(huì)返回自身,支持鏈?zhǔn)秸{(diào)用的寫(xiě)法。
樣式:

旋轉(zhuǎn):

縮放:

偏移:

傾斜:

矩陣變形:

動(dòng)畫(huà)隊(duì)列
調(diào)用動(dòng)畫(huà)操作方法后要調(diào)用 step() 來(lái)表示一組動(dòng)畫(huà)完成,可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法,一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始,一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫(huà)的配置。
示例:
Page({
data: {
animationData: {}
},
onShow: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2,2).rotate(45).step()
this.setData({
animationData:animation.export()
})
setTimeout(function() {
animation.translate(30).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 1000)
},
rotateAndScale: function () {
// 旋轉(zhuǎn)同時(shí)放大
this.animation.rotate(45).scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateThenScale: function () {
// 先旋轉(zhuǎn)后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateAndScaleThenTranslate: function () {
// 先旋轉(zhuǎn)同時(shí)放大,然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
})
wx.hideKeyboard()
收起鍵盤(pán)。
wx.stopPullDownRefresh()
停止當(dāng)前頁(yè)面下拉刷新。詳見(jiàn) 頁(yè)面相關(guān)小程序事件處理函數(shù)。
