微信小程序：button按钮实现、bindtap绑定触发事件、button中放入图片和文字

以下是关于在微信小程序中button按钮实现的相关代码。

（1）wxml文件：

<button class='btn1' bindtap="goToPage1">test</button>

class是用于wxss文件中的样式名称，bindtap是用于js文件中的点击该按钮跳转的实现函数。

（2）wxss文件：

.btn1 {
  width:80%;
  margin-top:130rpx;
  background-color: rgb(106, 0, 95);
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

函数名来源于wxml文件中class等号后的名称，width是按钮宽度，margin-top是距离上面的长度，background-color是按钮背景色，color是按钮的文字颜色，border-radius是按钮的圆角弧度，display、flex-direction、align-items、justify-content用于使按钮水平居中。

（3）js文件：

goToPage1: function () {
    wx.navigateTo({
      url: '/pages/page1/page1',
    })
  },

函数名来源于wxml文件中bindtap等号后的名称，该按钮实现了点击后跳转到page1页面的功能。跳转页面函数是wx.navigateTo，后面的url写页面路径，按项目文件夹路径写即可。

实现效果图：

 

若想在按钮中添加图片，只需要：

（1）在项目文件夹中添加图片。可建好专门存放图片的目录后，右键文件夹点击“在硬盘中打开”，存入图片文件。

（2）wxml文件中添加图片的信息。

<button class='btn1' bindtap="goToPage1">
  <image class='btnImg1' src='../../pages/images/1.png'></image>
  <view>test</view>
</button>

（3）wxss文件中设置图片样式。

.btnImg1 {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}

实现效果图：