消除小程序 button 基本样式和实现扩展功能

小程序授权获取用户信息,之前通过 wx.getUserInfo 获取用户信息。通过 API 同意授权获取获取用户信息,API 可以用在JS页面小程序生命周期中,强制获取用户信息。现在腾讯官方修改为:用户主动触发 button来获取用户信息。

button 中 open-type 的属性值为微信开放能力,详情查询小程序官方文档

通过button 按钮获取用户信息,时,显示下面图片信息:

未登录: 已登陆:

需要在未登录状态外,包含一个 button 组件,通过 open-type="getUserInfo"  获取用户信息。能说按钮与未登录的图片长的不一样。。。

消除 button 的基本样式CSS:

button {
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

消除button 的背景图片主要用 background: transparent,将背景颜色改为透明色。

注意:使用 background: none,button的背景颜色依然存在!!!!

除了基本的登录功能需要用户主动通过点击 button来触发用户授权登陆行为之外,还有【打开客服会话 (contact) 】、【触发用户转发 (share) 】、【获取用户手机号 (getPhoneNumber) 】、【意见反馈 (feedback) 】等功能。

使用案例

<button open-type="contact" class='button'></button>

猜你喜欢

转载自blog.csdn.net/qq_36437172/article/details/83026768