微信小程序按鈕點擊跳轉(zhuǎn)頁面詳解

第微信小程序按鈕點擊跳轉(zhuǎn)頁面詳解微信小程序中，按鈕也是button/button標(biāo)簽，它通過bindtap屬性綁定點擊事件：

然后在js里面注冊這個回調(diào)函數(shù)：

回調(diào)函數(shù)里面通過

wx.navigateTo({

url:'/pages/index/talkPage',

})

跳轉(zhuǎn)到talkPage界面。

注意，html界面要在app.json里面注冊：

不注冊的話會報錯：navigateTo:failurl"pages/index/talkPage"isnotinapp.json

注冊完畢之后編譯，開發(fā)工具會自動為你創(chuàng)建一個對應(yīng)的js和wxss文件，而且js里面會自動搭好基本函數(shù)：

//pages/index/talkPage.js

Page({

*頁面的初始數(shù)據(jù)

data:{

*生命周期函數(shù)--監(jiān)聽頁面加載

onLoad:function(options){

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

onReady:function(){

*生命周期函數(shù)--監(jiān)聽頁面顯示

onShow:function(){

*生命周期函數(shù)--監(jiān)聽頁面隱藏

onHide:function(){

*生命周期函數(shù)--監(jiān)聽頁面卸載

onUnload:function(){

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

onPullDownRefresh:function(){

*頁面上拉觸底事件的處理函數(shù)

onReachBottom:function(){

*用戶點擊右上角分享

onShareAppMessage:function(){

往里面填充就好了，還是很容易搗鼓的。

2025-3-29回答覃鈺程評論“怎么寫兩個按鈕分別對應(yīng)兩個頁面呀”

一樣的道理呀

buttonbindTap='gotoPage1'/

buttonbindTap='gotoPage2'/

然后js里面:

gotoPage1:function(){wx.navigateTo({url:'/pages/index/talkPage1',})}

gotoPage2:function(){wx.navigateTo({url:'/pages/index/talkPage2',})}

這是很容易看懂的寫法，也可以都綁到一個gotoPage函數(shù)上面，通過參數(shù)不同控制跳轉(zhuǎn)，大概這樣：

buttonid="1"bindTap='gotoPage'/

buttonid="2"bindTap='gotoPage'/

js里面：

gotoPage:function(event){

constnumber=event.target.id;//1或者2得到點擊了按鈕1或者按鈕2

consturl="/pages/index/talkPage"+number;//得到頁面url

wx.navigateTo({

url:url,

以上所述是小編給大家