Wechat applet customizes the button style of obtaining mobile phone number

The WeChat applet provides a way to obtain a mobile phone number, which requires a button whose open-type is getPhoneNumber. However, the basic button component sometimes does not meet our needs.

There are two ways to realize the custom button style in the figure:

• Handwrite a button through the view, and set the opacity of the button to 0 (that is, transparent) and use absolute positioning to overlay the view

<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>

• Use font icons in buttons, such as Ali's 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>

Note: Custom button styles need to use inline styles