微信小程序按鈕點擊跳轉(zhuǎn)頁面詳解
更新時間：2019年05月06日 08:35:24 作者：Klingonsss
這篇文章主要介紹了微信小程序按鈕點擊跳轉(zhuǎn)頁面，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
微信小程序中，按鈕也是<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:fail url "pages/index/talkPage" is not in app.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 () {
}
})
往里面填充就好了，還是很容易搗鼓的。
2019-3-29 回答 覃鈺程 評論“ 怎么寫兩個按鈕分別對應(yīng)兩個頁面呀”
一樣的道理呀
<button bindTap = 'gotoPage1'/>; <button bindTap = 'gotoPage2'/>;
然后js里面:
gotoPage1: function(){ wx.navigateTo({ url: '/pages/index/talkPage1', }) }
gotoPage2: function(){ wx.navigateTo({ url: '/pages/index/talkPage2', }) }
這是很容易看懂的寫法，也可以都綁到一個gotoPage函數(shù)上面，通過參數(shù)不同控制跳轉(zhuǎn)，大概這樣：
<button id="1" bindTap = 'gotoPage'/>; <button id="2" bindTap = 'gotoPage'/>
js里面：
gotoPage: function(event){
const number = event.target.id;//1或者2得到點擊了按鈕1或者按鈕2
const url = "/pages/index/talkPage" + number;//得到頁面url
wx.navigateTo({
url: url,
}) }
以上所述是小編給大家介紹的微信小程序按鈕點擊跳轉(zhuǎn)頁面詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)下拉選項框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
bootstrap實現(xiàn)點擊刪除按鈕彈出確認框的實例代碼
本文通過實例代碼給大家介紹了bootstrap實現(xiàn)點擊刪除按鈕彈出確認框的方法，需要的朋友參考下吧2018-08-08
js下通過prototype擴展實現(xiàn)indexOf的代碼
這里使用js prototype擴展實現(xiàn)的indexOf的實現(xiàn)代碼，跟js自帶的方法，差不多。2010-12-12
這篇文章主要為大家詳細介紹了javascript實現(xiàn)滾輪輪播圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JS簡單編號生成器實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站
淘寶網(wǎng)大家在熟悉不過了，那么淘寶網(wǎng)首頁模板是怎么做的呢？今天小編抽時間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于利用jsonp解決js讀取本地json跨域的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了基于javascript實現(xiàn)隨機顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
詳解TypeScript如何正確使用Declare關(guān)鍵字
如果您編寫 TypeScript 代碼的時間足夠長，您就已經(jīng)看到過declare關(guān)鍵字，但它有什么作用，為什么要使用它呢，下面小編就來和大家簡單講講2023-08-08
要捕獲JavaScript代碼中的異常一般會采用 try catch，不過try catch的使用是否是對代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細介紹了在JS中用try catch對代碼運行的性能影響，有需要的朋友們可以參考借鑒。2016-12-12