WeChat アプレットは、open-type が getPhoneNumber であるボタンを必要とする携帯電話番号を取得する方法を提供しますが、基本的なボタン コンポーネントは、私たちのニーズを満たさない場合があります。
図のカスタム ボタン スタイルを実現するには、次の 2 つの方法があります。
- ビューを介してボタンを手書きし、ボタンの不透明度を 0 (つまり透明) に設定し、絶対配置を使用してビューをオーバーレイします。
<view class="fake-button">
<view class="iconfont icon-weixin" style="margin-right: 10rpx"></view>
使用微信一键登录
<button style="width: 80vw; height: 90rpx; border-radius: 45rpx; opacity:0; position: absolute; top:0; left:0" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
</view>
- Ali の iconfont など、ボタンにフォント アイコンを使用する
<button class="real-button" style="width: 80vw; height: 90rpx; background-color: rgb(76, 191, 0); border-radius: 45rpx; color: white; font-weight: normal" type="default">
<view class="iconfont icon-weixin" style="display: inline-block"></view>
使用微信一键登录
</button>
注: カスタム ボタン スタイルではインライン スタイルを使用する必要があります