wx-getUserInfo废弃之后-弹窗获取信息

Author Avatar
dujun 6月 06, 2018
本文总阅读量次
  • 在其它设备中阅读本文章

先吐槽下微信,这么基础的API晚上11点说废就废,程序猿何苦为难程序猿.(不过最近好像又恢复了…)

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

  • loading模态框

    目前小程序是不支持自定义的loading图,只有success、loading、none,所以写个公共组件,可以传入自定义的图片及文字。
    其中的关键方法为: 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图网站 https://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'
  })
}
}

    效果图:

    详细代码可见 https://github.com/jiandandkl/toast-demo

expand_less