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


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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
详解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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php实现的简单检验登陆类
2015/06/18 PHP
帝国cms常用标签汇总
2015/07/06 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
入党自我评价优缺点
2014/01/25 职场文书
高中班级口号
2014/06/09 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
详解Python类和对象内容
2021/06/22 Python
JavaScript中reduce()的用法
2022/05/11 Javascript
MYSQL如何查看操作日志详解
2022/05/30 MySQL