微信小程序开发里的 JS 怎么用

在微信小程序开发中，JavaScript（简称 JS）扮演着至关重要的角色，它是小程序实现交互逻辑和动态效果的核心语言，下面就让我们深入探讨一下微信小程序开发里的 JS 该怎么用😃。

基本结构与引入

在微信小程序项目中，JS 文件通常放置在 pages/[页面目录]/ 下，对于一个名为 index 的页面，其对应的 JS 文件就是 pages/index/index.js。

每个页面的 JS 文件都有一个 Page 函数来注册页面,基本结构如下：

Page({
  data: {
    // 页面的初始数据
  },
  onLoad: function(options) {
    // 页面加载时执行的函数，options 为页面跳转所带来的参数
  },
  onShow: function() {
    // 页面显示时执行的函数
  },
  // 还有其他生命周期函数，如 onReady、onHide、onUnload 等
});

数据绑定与更新

1. 数据绑定 在 WXML 文件中，可以通过双大括号 来绑定 JS 中的数据。

   <view>{{message}}</view>

   在对应的 JS 文件中：

   Page({
   data: {
    message: 'Hello, World!'
   }
   });

   这样，页面就会显示出 Hello, World!。

2. 数据更新 当数据发生变化时，需要调用 setData 方法来更新视图。

   Page({
   data: {
    count: 0
   },
   addCount: function() {
    this.setData({
      count: this.data.count + 1
    });
   }
   });

   然后在 WXML 中可以通过按钮触发这个函数：

   <button bindtap="addCount">增加计数</button>
   <view>{{count}}</view>

事件处理

微信小程序中的事件处理非常方便，可以在 WXML 标签中通过 bind 或 catch 来绑定事件。

<button bindtap="handleTap">点击我</button>

在 JS 文件中定义对应的处理函数：

Page({
  handleTap: function() {
    console.log('按钮被点击了');
  }
});

bind 绑定的事件会冒泡，catch 绑定的事件不会冒泡。

与 WXML 和 WXSS 交互

1. 获取 WXML 节点信息 有时候需要获取 WXML 中的节点信息，比如节点的位置、尺寸等，可以使用 wx.createSelectorQuery 来实现。

   wx.createSelectorQuery().select('#myView').boundingClientRect(function(rect) {
   console.log(rect);
   }).exec();

   这里 #myView 是 WXML 中节点的 id。

2. 动态设置样式 可以通过 setData 来动态设置 WXSS 样式。

   Page({
   data: {
    isRed: false
   },
   changeColor: function() {
    this.setData({
      isRed: true
    });
   }
   });

   在 WXSS 中：

   .view {
   color: {{isRed? 'red' : 'black'}};
   }

微信小程序开发中的 JS 是实现丰富交互和动态效果的关键，熟练掌握其使用方法，就能开发出功能强大、体验良好的小程序啦🎉。