微信小程序按钮点击跳转页面详解


Posted in Javascript onMay 06, 2019

微信小程序中,按钮也是<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 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
彻底揭秘keep-alive原理(小结)
May 05 #Javascript
angular4+百分比进度显示插件用法示例
May 05 #Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 #Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 #Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP 数组实例说明
2008/08/18 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
Symfony控制层深入详解
2016/03/17 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
React中的refs的使用教程
2018/02/13 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中实现switch功能实例解析
2018/01/11 Python
Python解决八皇后问题示例
2018/04/22 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python-openCV开运算实例
2020/07/05 Python
python判断是空的实例分享
2020/07/06 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
行政经理的岗位职责
2013/11/23 职场文书
食堂标语大全
2014/06/11 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年学生会工作总结
2014/11/07 职场文书
《角的度量》教学反思
2016/02/18 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python