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

创建一个按钮，点击这个按钮，改变视图层上面的数据

示例：

新建一个微信小程序的Hello World项目，找到indexwxml文件

indexwxml:

使用一个<button>元素，使用bindtap事件作为点击事件

indexjs：

在Page({})内，定义一Page个函数changeMotto，函数内部中使用关键字this，this代表对象，

调用setData()函数，里面传入一个Object对象作为参数，把motto的这个字符串变量，重新赋值为“你好 世界”

        在写一个小程序界面的时候，发现这个页面的按钮点击失效，打印log打印不出来，而其他页面的点击事件仍旧可以触发。找了半天发现按钮被textarea组件遮挡了，导致点击不到。

解决办法：给textarea添加样式，修改它的高度。

注意：可通过下面这个窗口查看各部分大小及其位置，遇到组件失灵时可以先看一下有没有被覆盖。

可以通过在image标签上添加bindtap事件，监听小程序点击事件，并在对应的js文件中定义函数，触发相应的 *** 作。如下：

<image bindtap='imageClick' src="xxx" />

// js文件

Page({

imageClick: function () {

// do something

}

})

view标签 加 bindtap事件，用data-name传值，如果view中只有文字，点击整个view区域都可以接收到data-name的值，如果view里面加一个lable标签，那么点击lable包裹的区域，data-name取不到值。

解决方法：把取值方式 由etargetdatasetcarrierName 修改为ecurrentTargetdatasetcarrierName即可！

这个需求可以通过动态类名来实现

首先 我们先把写好选中时和未选中时的wxss样式（choose为选中，nochoose为未选中）

然后在html中写下几个按钮并加上类名的判断条件

最后在js文件里通过点击事件chnageColor来接收不同按钮点击时传过来的index

实现效果如下图所示

这样即可实现按钮的点击变色，有不足之处还请大家指正

以上就是关于微信小程序 js 如何点击进入新的界面全部的内容，包括:微信小程序 js 如何点击进入新的界面、微信小程序怎么让数据动态显示或者绑定点击事件、微信小程序 | 按钮点击（bindtap）失效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！