微信小程序自定义获取手机号按钮样式_getphonenumber 如何修改样式

微信小程序提供了获取手机号的方式，需要通过 open-type 为 getPhoneNumber 的按钮，然而基础的 button 组件有时候并不能满足我们的需求

想要实现图中的自定义的按钮样式，有两种思路：

• 通过 view 手写一个按钮，并将 button 的 opacity 设置为 0 （即透明）使用绝对定位覆盖在 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>
1
2
3
4
5

• 在 button 中使用字体图标，如阿里的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>
1
2
3
4

注：自定义 button 按钮的样式需要使用内联样式