微信小程序按鈕點擊跳轉(zhuǎn)頁面詳解
更新時間：2019年05月06日 08:35:24 作者：Klingonsss
這篇文章主要介紹了微信小程序按鈕點擊跳轉(zhuǎn)頁面，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
微信小程序中，按鈕也是<button></button>標簽，它通過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)建一個對應的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 回答 覃鈺程 評論“ 怎么寫兩個按鈕分別對應兩個頁面呀”
一樣的道理呀
<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)頁面詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧，下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題，需要的朋友參考下吧2016-02-02
js 下拉菜單實現(xiàn)代碼，原理比較簡單，需要的朋友可以參考下，具體的美化要靠自己。2010-05-05
本文的重點在于討論bind()方法的實現(xiàn)，在開始討論bind()的實現(xiàn)之前，我們先來看看bind()方法的使用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了js消除圖片小游戲代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單的表格增刪，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了微信小程序時間戳轉(zhuǎn)日期，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
判斷是否全是中文的腳本2008-09-09
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫的大多是非常的學術(shù)和專業(yè)。對于初學者來說別說理解閉包了，就連文字敘述都很難看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實面目。2009-05-05
微信小程序頁面?zhèn)鞫鄠€參數(shù)跳轉(zhuǎn)頁面的實現(xiàn)方法
這篇文章主要介紹了微信小程序頁面?zhèn)鞫鄠€參數(shù)跳轉(zhuǎn)頁面的實現(xiàn)方法,本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05