微信小程序基础:点击跳转页面的几种方法

2024-10-13 10:01:19

1、新建一个微信小程序0607,完成后,大致架构如图:

微信小程序基础:点击跳转页面的几种方法

2、在app.json中,调整一下test的位置,放在第一位;便于运行后,直接显示te衡痕贤伎st.wxml文件,如图:

微信小程序基础:点击跳转页面的几种方法微信小程序基础:点击跳转页面的几种方法

3、在test.wxml中输入以下代码,添加一个按钮,运行后如图所示:功能:点击按钮后,跳转到日志界面。<button type="primary">跳转到日志界面</button>

微信小程序基础:点击跳转页面的几种方法

4、给上面的按钮添加点击事件,因为跳转到日志界面,在本程碌食撞搁序中,日志界面属于tabBar页面(在app.json中注册过的tabBar页面),所以使用wx.switchTab 进行跳转;代码如下:

微信小程序基础:点击跳转页面的几种方法微信小程序基础:点击跳转页面的几种方法

5、在app.json中注册一个界面new,如图:

微信小程序基础:点击跳转页面的几种方法

6、在test.wxml中添加按钮,点击按钮后跳转到new.wxml界面,如图:

微信小程序基础:点击跳转页面的几种方法微信小程序基础:点击跳转页面的几种方法

7、在test.js中添加跳转代码,如图:点击按钮后,即可跳转到新页面new.wxml.

微信小程序基础:点击跳转页面的几种方法微信小程序基础:点击跳转页面的几种方法

8、在new.wxml中添加按钮,功能:返回上一页具体代码如图:

微信小程序基础:点击跳转页面的几种方法

9、添加对应的j,跳转代码,如图:

微信小程序基础:点击跳转页面的几种方法

10、运行后,点击即可在test界面和new界面之间相互跳转,如图:

微信小程序基础:点击跳转页面的几种方法
猜你喜欢