微信小程序 js 如何点击进入新的界面

新建一个微信小程序0607，完成后，大致架构如图：



2/10

在appjson中，调整一下test的位置，放在第一位；

便于运行后，直接显示testwxml文件，如图：



查看剩余1张图

3/10

在testwxml中输入以下代码，添加一个按钮，运行后如图所示：

功能：点击按钮后，跳转到日志界面。

<button type="primary">跳转到日志界面</button>



4/10

给上面的按钮添加点击事件，因为跳转到日志界面，在本程序中，日志界面属于tabBar页面（在appjson中注册过的tabBar页面），所以使用wxswitchTab 进行跳转；代码如下：



查看剩余1张图

5/10

在appjson中注册一个界面new，如图：



6/10

在testwxml中添加按钮，点击按钮后跳转到newwxml界面，如图：



查看剩余1张图

7/10

在testjs中添加跳转代码，如图：

点击按钮后，即可跳转到新页面newwxml



查看剩余1张图

8/10

在newwxml中添加按钮，功能：返回上一页

具体代码如图：



9/10

添加对应的j，跳转代码，如图:



10/10

运行后，点击即可在test界面和new界面之间相互跳转，

wxnavigateTo 和 wxredirectTo 是不允许跳转到 tabbar 页面的，

所以如果需要跳转到含有tabbar的页面，只能用 wxswitchTab 跳转。

            wxswitchTab({

                  url: '/home/home'

            })

appjson 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

appjson 配置：

在 tab 页面的 pagejson 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 appjson 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

首先，必须检讨自己，出现这种问题的确是自己阅读文档不仔细。

在学习页面之间传递参数时，同时设置了 tabBar 和点击跳转导航 wxnavigateTo ,并且两个设置跳转的页面路径一致，发现 wxnavigateTo 跳转是不生效的，至于想要传递的参数那就更别想传递到跳转的页面。

出现这个问题，我一开始以为是微信小程序自带的问题，但是想想，怎么可能呢，是猪吗，这么明显的问题，留给开发者？于是翻阅文档，研读 tabBar 和API中的导航一部分，发现文档早已注明的很清楚，只是自己没有看清楚，检讨自己并认真学习一下。

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

1 wxnavigateTo 和 wxredirectTo 不允许跳转到 tabBar 页面，只能用 wxswitchTab 跳转到 tabBar 页面

2 wxnavigateTo 和 wxredirectTo 允许跳转时路径带参数， wxswitchTab 跳转时路径不可带参数

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。即wx:for指令用于循环数组数据，生成组件。

循环出来的每一项通过item返回，每一项对应的索引，通过index返回。

wx:key=""，设置每一项唯一的标识。循环列表时，添加wx:key的好处是，将来列表发生变化时重新渲染列表的损耗为更低。

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

条件渲染可以使用 wx:if 或 hidden 。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好；如果在运行时条件不大可能改变，则 wx:if 较好。

wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）

也可以用 wx:elif 和 wx:else 来添加一个 else 块。

hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）

在appjson文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

color： tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor： tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor： tab的背景色，仅支持十六进制颜色。

borderStyle： tabbar上边框的颜色， 仅支持 black / white。

position： tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。

custom： 自定义tabBar。

list是一个数组，它定义了tab的列表。只能配置最少2个、最多5个tab。

pagePath： 页面路径，必须在 pages 中先定义。

text： tab 上按钮文字。

iconPath： 路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络。

selectedIconPath： 选中时的路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络。

跳转到普通页，可以直接通过返回按钮返回。

navigateTo()方法，用于跳转普通页面。可以直接通过返回按钮返回。

页面js文件中添加方法：

redirectTo()方法，关闭当前页面再跳转到指定页，不能通过返回按钮返回页面。该方法不能用于跳转tabBar页面。

页面js文件中添加方法：

跳转到tabBar页面，通过tabBar按钮返回。

如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。

switchTab()方法，用于跳转tabBar页面。

页面js文件中添加方法：

微信小程序路由跳转，共有三种形式，页面中使用navigator组件做页面链接形式路由跳转，js中可以使用wxnavigateTo--保留当前页面，跳转到应用内的某个页面，wxredirectTo--关闭当前页面，跳转到应用内的某个页面 wxnavigateBack()--关闭当前页面，回退前一页面。

1打开自定义菜单之后，你可以在这里设置菜单，选择一个菜单。不要选择有子菜单的母菜单

2选择好了一个菜单之后，你会看到右边除了菜单名称设置，还有菜单内容设置，选择跳转小程序。

3选择了跳转小程序后点击选择小程序，在公众号已经绑定的小程序里选择一个。

4选择了小程序后你可以看到小程序路径，填入备用网址，然后就可以保存发布了。（路径可以自己在小程序开发者工具获取，或者通过公众号文章获取）

1、打开浏览器，输入微信公众号的账户和密码登录，进入微信公众号的主页面，点击自定义菜单。

2、进入自定义菜单后，点击手机模拟屏中的“添加菜单”，最多可添加三大菜单。

3、先编辑菜单名称，再选择跳转小程序，再点击前往绑定。

4、点击关联小程序后用管理员手机微信扫码登录。

5、输入需绑定的小程序ID即可完成。

以上就是关于微信小程序 js 如何点击进入新的界面全部的内容，包括:微信小程序 js 如何点击进入新的界面、微信小程序含tabBar页面跳转失效问题、小程序 tabbar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！