小程序更优雅的getUserInfo

492 阅读1分钟

官方是推荐使用button点击获取用户信息,但有时候页面多这么一个按钮很突兀啊、或者tabbar切换的时候想要先获取用户信息再展示页面就很尴尬了。 目前碰到的情况就是第二种,既然必须要点击button来获取,就采用模态框点击登录的方法了。 但小程序的模态框实在鸡肋(尤其很难理解字符限制七个字),所以自定义模态框。

  • loading模态框

目前小程序是不支持自定义的loading图,只有successloadingnone,所以写个公共组件,可以传入自定义的图片及文字。 其中的关键方法为: getCurrentPages()[getCurrentPages().length - 1],获取当前页实例。拿到当前页实例后便可以将自定义内容传到data中。

showToast.js:

function showToast(obj) {
  // 获取当前page实例
  const that = getCurrentPages()[getCurrentPages().length - 1];
  that.setData({
    showToast: obj
  })
}

showToast.wxml:

<view class="middle" wx:if="{{showToast.icon}}">
  <image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
  <text wx:if="{{showToast.content}}" class="toast-content">{{showToast.content}}</text>
</view>

loading.js:

const feedbackApi = require('../../components/showToast/showToast')
feedbackApi.showToast({
  content: '正在获取数据',
  icon: '../../images/loading.svg',
  duration: 3000
})

效果图:

推荐个loading图网站 loading.io

  • 登录模态框

有自定义模态框在实现登录就比较简单了,在wxml绑定两个按钮就可以了

<text wx:if="{{showToast.title}}" class="toast-title">{{showToast.title}}</text>
<view wx:if="{{showToast.btnCancel && showToast.btnUserInfo}}">
  <text class='toast-text'>请先登录~</text>
  <button class='toast-btn' catchtap='click_cancel'>{{showToast.btnCancel}}</button>
  <button class='toast-btn toast-btn2' open-type="getUserInfo" bindgetuserinfo="click_user_info">{{showToast.btnUserInfo}}</button>
</view>

my.js:

feedbackApi.showToast({
  title: '尚未登录',
  btnCancel: '知道了',
  btnUserInfo: '登录',
  bg: '#fff',
  duration: 10000
}),
// 点击取消
click_cancel(e) {
  feedbackApi.hideToast()
  wx.switchTab({
    url: '../index/index'
  });
},
// 点击登录
click_user_info(e) {
  const data = e.detail
  if (data.userInfo) {
    this.setData({
      userInfo: data.userInfo
    })
    wx.setStorageSync('userInfo', data.userInfo)
    feedbackApi.hideToast()
  } else {
    wx.switchTab({
      url: '../index/index'
    })
  }
}

效果图:

详细代码可见 github.com/jiandandkl/…