微信小程序按钮点击跳转页面详解
更新时间：2019年05月06日 08:35:24 作者：Klingonsss
这篇文章主要介绍了微信小程序按钮点击跳转页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序中，按钮也是<button></button>标签，它通过bindtap属性绑定点击事件：
然后在js里面注册这个回调函数：
回调函数里面通过
wx.navigateTo({
url: '/pages/index/talkPage',
})
跳转到talkPage界面。
注意，html界面要在app.json里面注册：
不注册的话会报错：navigateTo:fail url "pages/index/talkPage" 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 回答 覃钰程 评论“ 怎么写两个按钮分别对应两个页面呀”
一样的道理呀
<button bindTap = 'gotoPage1'/>; <button bindTap = 'gotoPage2'/>;
然后js里面:
gotoPage1: function(){ wx.navigateTo({ url: '/pages/index/talkPage1', }) }
gotoPage2: function(){ wx.navigateTo({ url: '/pages/index/talkPage2', }) }
这是很容易看懂的写法，也可以都绑到一个gotoPage函数上面，通过参数不同控制跳转，大概这样：
<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,
}) }
以上所述是小编给大家介绍的微信小程序按钮点击跳转页面详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JavaScript监听文本框回车事件并过滤文本框空格的方法
这篇文章主要介绍了JavaScript监听文本框回车事件并过滤文本框空格的方法,涉及javascript操作文本框获取、清空及删除空格的技巧,需要的朋友可以参考下2015-04-04
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧，下面通过本文给大家介绍JS中Eval解析JSON字符串的一个小问题，需要的朋友参考下吧2016-02-02
js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。2010-05-05
本文的重点在于讨论bind()方法的实现，在开始讨论bind()的实现之前，我们先来看看bind()方法的使用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了js消除图片小游戏代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要为大家详细介绍了JS实现简单的表格增删，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了微信小程序时间戳转日期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
判断是否全是中文的脚本2008-09-09
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。2009-05-05
这篇文章主要介绍了微信小程序页面传多个参数跳转页面的实现方法,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
最新评论