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