Blog Content

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

小程序   2017-03-15 17:41:53

---

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

微信小程序中，按钮也是标签，它通过bindtap属性绑定点击事件.

1. 修改index.wxml：

  OK 

2.在index.js里面注册这个回调函数：

goEventList:function(param){
    wx.navigateTo({
      url: '/pages/index/eventList',
    })
  },

回调函数里面通过

wx.navigateTo({

url: '/pages/index/eventList',

})跳转到eventList界面。

3. html界面要在app.json里面注册：

 "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/index/eventList"
  ],

不注册的话会报错：navigateTo:fail url is not in app.json

4. 注册完毕之后编译，开发工具会自动为你创建一个对应的js和wxss文件，而且js里面会自动搭好基本函数：

往里面填充就好了，还是很容易捣鼓的。

5.两个按钮分别对应两个页面

这是很容易看懂的写法，也可以都绑到一个gotoPage函数上面，通过参数不同控制跳转，大概这样：

; 

js里面：

 

gotoPage: function(event){ 
    const number = event.target.id;//1或者2得到点击了按钮1或者按钮2 
    const url = "/pages/index/eventList" + number;//得到页面url 
    wx.navigateTo({
        url: url, 
    }) 
}

---

上一篇：微信小程序页面跳转的5种方式及区别
下一篇：alpine Linux-apk软件包管理器使用