微信小程序按鈕點擊跳轉頁面詳解
更新時間：2019年05月06日 08:35:24 作者：
這篇文章主要介紹了微信小程序按鈕點擊跳轉頁面，文中通過示例代碼介紹的非常詳細微信小程序跳轉子頁面，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
微信小程序中，按鈕也是標簽，它通過屬性綁定點擊事件：
然后在js里面注冊這個回調函數：
回調函數里面通過
wx.navigateTo({
url: '/pages/index/talkPage',
})
跳轉到界面。
注意，html界面要在app.json里面注冊：
不注冊的話會報錯：:fail url "pages/index/" is not in app.json
注冊完畢之后編譯，開發工具會自動為你創建一個對應的js和wxss文件，而且js里面會自動搭好基本函數：
// pages/index/talkPage.js
Page({
?
/**
* 頁面的初始數據
*/
data: {
},
?
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
?
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
?
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
?
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
?
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
?
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
?
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
?
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
往里面填充就好了，還是很容易搗鼓的。
2019-3-29 回答 覃鈺程 評論“ 怎么寫兩個按鈕分別對應兩個頁面呀”
一樣的道理呀
; ;
然后js里面:
gotoPage1: function(){ wx.navigateTo({ url: '/pages/index/talkPage1', }) }
gotoPage2: function(){ wx.navigateTo({ url: '/pages/index/talkPage2', }) }
這是很容易看懂的寫法，也可以都綁到一個函數上面，通過參數不同控制跳轉微信小程序跳轉子頁面，大概這樣：
;
js里面：
gotoPage: function(event){
const number = event.target.id;//1或者2得到點擊了按鈕1或者按鈕2
const url = "/pages/index/talkPage" + number;//得到頁面url
wx.navigateTo({
url: url,
}) }
以上所述是小編給大家介紹的微信小程序按鈕點擊跳轉頁面詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！