微信小程序 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界面之间相互跳转，

一：url带参数传递

与前端语言一样，小程序页面间的传递可以通过在路由url后接参数，路由的同时会将参数一并传递到新的页面。

indexwxml:

效果图：

二：将值存入全局变量

我们同样可以将需要的值存入全局变量中，在需要的地方直接引用就好了。

需要用到全局变量时记得要先获取应用实例： const app = getApp()

三， 用event传值

JS文件

你可以使用下面的JS代码来实现在控制台打印数字，每行15个数字，共2行：

```

// 定义要打印的数字

var nums = "012345678901234";

// 按照每行15个数字进行分割，并打印出来

consolelog(numsslice(0, 15));

consolelog(numsslice(15, 30));

```

解释一下代码：首先，我们定义了一个变量`nums`存储要打印的数字，这里我定义了一个长度为30的字符串，包含了0-9的数字。然后，我们使用`slice()`方法将这个字符串按照每行15个数字进行分割，并使用`consolelog()`方法在控制台上打印出来，第一行打印前15个数字，第二行打印后15个数字。

如果你想在小程序中打印数字，可以将`consolelog()`方法替换为`wxshowToast()`或者`wxshowModal()`方法，将数字显示在d窗中。

小程序开发可以使用以下框架：

1 微信官方框架：使用微信官方提供的框架进行开发，可以快速上手，但功能相对较少。

2 uni-app框架：uni-app是一个基于Vuejs的开发框架，可以同时开发多个平台的小程序，如微信、支付宝、百度等。

3 Taro框架：Taro是一个多端开发框架，支持小程序、H5、React Native等多个平台，可以实现一次编写，多端运行。

4 mpvue框架：mpvue是一个基于Vuejs的小程序开发框架，可以使用Vuejs的语法进行开发，同时支持小程序原生API。

如果没有编程代码经验，可以寻求第三方小程序平台进行鼠标拖拽式搭建小程序。

以上就是关于微信小程序 js 如何点击进入新的界面全部的内容，包括:微信小程序 js 如何点击进入新的界面、微信小程序实现wxml视图向js传递参数的方法（点击view带参数进入js）、微信小程序如何打印数字两行每行15个数字js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！