[miniApp] WeChat user login code

in client/app.js, we put user login logic inside here, so that other module can reuse those code by call:

const app = getApp()

app.login()

app.js:

//app.js
var qcloud = require('./vendor/wafer2-client-sdk/index')
var config = require('./config')

let userInfo

const UNPROMPTED = 0
const UNAUTHORIZED = 1
const AUTHORIZED = 2

App({
  onLaunch: function () {
        qcloud.setLoginUrl(config.service.loginUrl)
  },
  
  data: {
    locationAuthType: UNPROMPTED
  },

  login({ success, error }) {
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo'] === false) {

          this.data.locationAuthType = UNAUTHORIZED
          // 已拒绝授权
          wx.showModal({
            title: '提示',
            content: '请授权我们获取您的用户信息',
            showCancel: false
          })
          error && error()
        } else {
          this.data.locationAuthType = AUTHORIZED
          this.doQcloudLogin({ success, error })
        }
      }
    })
  },

  doQcloudLogin({ success, error }) {
    // 调用 qcloud 登陆接口
    qcloud.login({
      success: result => {
        if (result) {
          let userInfo = result
          success && success({
            userInfo
          })
        } else {
          // 如果不是首次登录，不会返回用户信息，请求用户信息接口获取
          this.getUserInfo({ success, error })
        }
      },
      fail: () => {
        error && error()
      }
    })
  },

  getUserInfo({ success, error }) {
    if (userInfo) return userInfo

    qcloud.request({
      url: config.service.requestUrl,
      login: true,
      success: result => {
        let data = result.data

        if (!data.code) {
          let userInfo = data.data

          success && success({
            userInfo
          })
        } else {
          error && error()
        }
      },
      fail: () => {
        error && error()
      }
    })
  },

  checkSession({ success, error }) {
    if (userInfo) {
      return success && success({
        userInfo
      })
    }

    wx.checkSession({
      success: () => {
        this.getUserInfo({
          success: res => {
            userInfo = res.userInfo

            success && success({
              userInfo
            })
          },
          fail: () => {
            error && error()
          }
        })
      },
      fail: () => {
        error && error()
      }
    })
  }
})

config.js:

/**
 * 小程序配置文件
 */

// 此处主机域名修改成腾讯云解决方案分配的域名
var host = 'https://xxxxxx.qcloud.la';

var config = {

    // 下面的地址配合云端 Demo 工作
    service: {
        host,

        // 登录地址，用于建立会话
        loginUrl: `${host}/weapp/login`,

        // 测试的请求地址，用于测试会话
        requestUrl: `${host}/weapp/user`,

        // 测试的信道服务地址
        tunnelUrl: `${host}/weapp/tunnel`,

        // 上传图片接口
        uploadUrl: `${host}/weapp/upload`,

        // 拉取商品列表
        productList: `${host}/weapp/product`,

        // 拉取商品详情
        productDetail: `${host}/weapp/product/`
    }
};

module.exports = config;

How to use in user page:

<!--pages/user/user.wxml-->
<image class="bg" src="/images/bg.png"></image>
<view wx:if="{{!userInfo}}">
  <view class="unlogin-card">
    <view class="unlogin-head"></view>
    <view class="unlogin-info">
      <view class="unlogin-text">未登录</view>
      <view class="unlogin-tips">点击微信登录后可方便购物</view>
    </view>
  </view>
  <button wx:if="{{locationAuthType==0}}" class="unlogin-btn" open-type='getUserInfo' bindgetuserinfo='onTapLogin'>微信登录</button>
  <button wx:if="{{locationAuthType==1}}" class="unlogin-btn" open-type='openSetting' bindopensetting="onTapLogin">授权登录</button>
</view>
<view class="user-card" wx:else>
  <view class="user-info">
    <image class="user-head" src="{{userInfo.avatarUrl}}"></image>
    <view class="user-name">{{userInfo.nickName}}</view>
  </view>
  <view class="user-split"></view>
  <view class="user-options">
    <view class="option" bindtap="onTapAddress">
      <view class="option-title">收货地址</view>
      <image class="option-arrow" src="/images/grey-arrow.png"></image>
    </view>
    <view class="option" bindtap="onTapKf">
      <view class="option-title">联系客服</view>
      <image class="option-arrow" src="/images/grey-arrow.png"></image>
    </view>
  </view>
</view>

/* pages/user/user.wxss */
.user-card {
  margin: 50rpx 27rpx 0;
  background: #FFFFFF;
  box-shadow: 0 2rpx 13rpx 5rpx rgba(0, 0, 0, 0.02);
  border-radius: 13rpx;
}

.user-info {
  display: flex;
  align-items: center;
  height: 200rpx;
}

.user-head {
  flex-shrink: 0;
  margin-left: 53rpx;
  height: 100rpx;
  width: 100rpx;
  background: #F5E069;
  border-radius: 50%;
}

.user-name {
  flex: 1;
  margin: 0 31rpx;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-split {
  height: 8rpx;
  background: #F9F9F9;
}

.user-options .option {
  display: flex;
  align-items: center;
  margin-left: 46rpx;
  margin-right: 27rpx;
  height: 128rpx;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}

.user-options .option:last-child {
  border-bottom: none;
}

.user-options .option-title {
  flex: 1;
  font-size: 30rpx;
  color: rgba(29, 29, 38, 0.8);
}

.user-options .option-arrow {
  width: 11rpx;
  height: 18rpx;
}

// pages/user/user.js
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: null,
    locationAuthType: app.data.locationAuthType
  },

  onTapAddress() {
    wx.showToast({
      icon: 'none',
      title: '此功能暂未开放'
    })
  },

  onTapKf() {
    wx.showToast({
      icon: 'none',
      title: '此功能暂未开放'
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  onTapLogin: function () {
    app.login({
      success: ({ userInfo }) => {
        this.setData({
          userInfo,
          locationAuthType: app.data.locationAuthType
        })
      },
      error: () => {
        this.setData({
          locationAuthType: app.data.locationAuthType
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 同步授权状态
    this.setData({
      locationAuthType: app.data.locationAuthType
    })
    app.checkSession({
      success: ({ userInfo }) => {
        this.setData({
          userInfo
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})