微信小程序-按钮实例

以下是一个简单的微信小程序示例,可以显示一个按钮和点击按钮后的提示信息:

// app.js
App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    userInfo: null
  }
})
<!-- index.wxml -->
<view class="container">
  <button bindtap="showMessage">点击我</button>
</view>
/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
}
// index.js
Page({
  showMessage: function () {
    wx.showToast({
      title: '你点击了按钮',
      icon: 'none',
      duration: 2000
    })
  }
})

这个小程序只有一个页面,页面上有一个按钮。当用户点击按钮时,程序会调用showMessage函数,并弹出一个提示框显示“你点击了按钮”。提示框的样式可以自行调整。