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

 时间: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界面之间相互跳转,如图:

微信小程序基础:点击跳转页面的几种方法
  • 正确安全培训做法
  • 怎么改变亿图图示线条的样式?
  • 开源绘图软件draw.io如何创建空白框图
  • vs2010添加引用(com、.net、其他项目引用)
  • 个人所得税怎么计算出来的
  • 热门搜索
    尿液偏红色怎么回事 祚怎么读 蛏子怎么读 糖醋茄子的家常做法 豆腐脑的做法大全 长豆角的做法大全 花卷的做法大全 包子做法大全 无花果怎么吃 红烧羊肉做法