小程序:编写按钮

来自CloudWiki
跳转至: 导航搜索

原生button

<button>开启小程序之旅</button>

编写自有button

原生button不好用,因此我们编写自有button

<!--pages/yes/yes.wxml-->
<view class="container">
    <image class="avatar" src="/images/2.png"></image>
    <text class="motto">Hello ,大家好 !</text>
    <view class="journey-container">
      <text class="journey">开启小程序之旅</text>
    </view>
</view>

设置按钮样式

.journey-container{
  border:1px solid #405f80;
  width:200rpx;
  height:80rpx;
  border-radius: 5px; 
  text-align:center;
}
.journey{
  font-size:22rpx;
  color:#405f80;
  line-height:80rpx;
}