微信小程序页面跳转方式有哪些？

时间：2023-07-01 14:05 阅读数：74 人阅读分类：知识百科

　　很多人刚接触微信小程序，对里面的语法和属*还不怎么了解，今天小编给大家整理的小程序页面跳转的两种方式：一种是在写在js中进行跳转，另一种是写在wxml页面中进行跳转。

首先先介绍下这两个页面的详细情况：

　　 微信小程序页面跳转方式一：在WXML页面进行跳转(HTML)

　　1.1 小程序的WXML没有HTML的宽容度那么高，单标签必需是 /> 结尾的。不然会报错。

　　1.2 官方推荐使用的基础标签是块标签，给了作为文本标签，但是使用其他标签比如div也是可以使用的，并且都是inline标签。并且wxml的parser会把标签上的不在白名单上的属*都去掉，class, id, data 这些应该都在白名单内，但是href什么的是不会有的，所以如果你用传统的html的标签构建页面理论上也是可行的，不过这些都是inline标签，需要自行设定display。

　　1.3 scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滚动位置的。但是用户自己滚动了之后小程序页源码并不会去改变 scroll-top, scroll-left 的赋值(并不是双向同步的)。如果这时使用setData去修改的话，scroll-top, scroll-left 的赋值和上一次的值相同，小程序是不会运用这个修改的，所以表现就是设置没有生效。这时只能先设置一个其他值，再设置回去(这里还可以体现setData方法是同步的)。scroll-view 获取scroll位置，只能通过bindscroll的回调函数获取，所以需要取scroll位置的请自行预存好。scroll-view 还是有webview的 scroll 的臭毛病，在居顶位置如果第一个动作是向下滚动的，会导致之后手怎么滑都滚不动，设置scroll-top 不为0，设个1就好了。

　　1.4 input 目前只支持文字居左，其他都是不行的(模拟器可以)。如果你做表单，建议把input等表单元素都放在form中，from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的 change 事情来获取，甚是麻烦。

　　1.5 只有 checkbox-group 有 change 事件，单个的checkbox是没有的，如果你只有一个heckbox，觉得外面套一个checkbox-group麻烦又不美观的话，可以用 switch type="checkbox" 代替。

　　1.6 map 组建目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。

　　1.7 map, canvas 像是在webview上面盖一个native组件的感觉。它们是没法被overflow 以及上面盖元素的，你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas 无法放在scroll-view中滚动会定位在初始位置，如果你给canvas设置背景颜色的话，你会发现背景色块跟着滚了，图没滚。

　　微信小程序页面跳转方式二：在JS中进行跳转

　　2.1 JS 的运行环境和view的运行环境是隔离的。JS只能通过事件获取时机和setData方法修改数据来改变view。

　　2.2 JS 目前有个很大的问题是无法获取到页面px级的宽度高度, 所有事件回调的单位都是px级的而不是rpx的，但是又不知道当前rpx，px的转换关系。比如过你用canvas画图。你都不知道边界在哪里，这个很蛋疼。

　　2.3 上面有说过 setData方法如果上一个值和下一个值相同时，是不会触发view修改的

　　2.4 使用 navigate 跳转的时候可以使用queryString的方式跟在相对地址上，onLoad事件会在入参中传入(会转化成object)，但是 navigate back的时候没有一个官方给出的数据通讯机制。可以使用getApp() 获取到全局对象，给上面加点东西，自行实现。navigate 最多5个什么的就不说了。

　　2.5 canvas getActions被调用之后，actions是会被清空的。即连续调用两次getActions，第二次是空数组。

　　2.6 小程序开发者工具是nw写的，我就看了看裙底的源码，开发者工具中WXML确实是有parser再拼装的过程的。但是并不能说明小工具是native的，从css的支持力度到webview的一些bug相似度来看，我还是觉得像webview，但是组件比如map，canvas什么的用的是原生view，然后盖在webview上的感觉。但是不管怎么说 auto-focus 能自动呼出键盘就已经是个很大的好评了。

　　1，在wxml页面中：

跳转到新页面
在当前页打开
切换到首页Tab

　　2，在js页面中：

　　【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabBar页面”，非tabBar中注册占用的页面即为“应用内的页面” 。如下图：home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

以上就是微信小程序页面跳转的两种方式的全部内容了，感谢大家的阅读，希望对大家学习上有所帮助。请关注微小乔更多精彩内容等着你。