小白的微信小程序开发日志——首页登陆授权与主页轮播图设计

声明：这是一个萌新小白初学微信小程序开发的日志，其中必定有许多错误，望各位大佬看到勿喷，也欢迎各位的大佬的指导。

微信小程序名：校园智能助手
小程序主要功能：失物招领平台，校车查询

首页设计与获取用户信息

先来看看首页整体效果



首页设计主要谈一下背景图片的问题
在设计的时候发现如果使用url地址的网络图片，会出现图片大小问题，只能显示图片的一个局部。问了一下大佬发现要在wxss文件的page中进行设置才行。

page{
width: 100vw;
height: 40vw;
margin-top:0.5vw ;
background: url('***********************************************8');
background-size:100% 100%;
moz-background-size:100% 100%;
}

而使用本地图片做背景就常规很多，在wxml里用image组件，在到wxss里设置就好

<image src="../../images/bg2.png" mode="aspectFill" class="bgImg"></image>

.bgImg {
  z-index: -1;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
}

再讲一下首页获取用户信息
使用小程序的button组件的open-type=“getUserInfo” 和bindgetuserinfo属性获取用户信息，之后再将获取的用户信息缓存。

<button class='ok' wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">进入</button>

 data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
    let username = wx.getStorageSync('username'),
      avatar = wx.getStorageSync('avatar');
    if (username) {
      this.setData({
        username: username,
        defaultUrl: avatar
      })
    }
  },
  bindGetUserInfo(e) {
    // 获取到用户信息 console.log(e)
    let d = e.detail.userInfo
    this.setData({
      userTx: d.avatarUrl,
      username: d.nickName
    })
    wx.setStorageSync('username', d.nickName)
    wx.setStorageSync('avatar', d.avatarUrl)

    const db = wx.cloud.database()
    const _ = db.command
    var userId = wx.getStorageSync('userId')
    if (!userId) {
      userId = this.getUserId()
    }

    db.collection('users').where({
      _openid: d.openid
    }).get({
      success: res => {
        console.log('查询用户:', res)
        if (res.data && res.data.length > 0) {
          console.log('已存在')
          wx.setStorageSync('openId', res.data[0]._openid)
        } else {

          setTimeout(() => {
            db.collection('users').add({
              data: {
                userId: userId,
                iv: d.iv
              },
              success: function () {
                wx.showToast({
                  title: '用户登录成功',
                })
                console.log('用户id新增成功')
                db.collection('users').where({
                  userId: userId
                }).get({
                  success: res => {
                    wx.setStorageSync('openId', res.data[0]._openid)
                  },
                  fail: err => {
                    console.log('用户_openid设置失败')
                  }
                })
              },
              fail: function (e) {
                console.log('用户id新增失败')
              }
            })
          }, 100)
        }
      },
      fail: err => {

      }
    })

    wx.redirectTo
   ({
      url: '../sy/sy',
    })
  },
  getUserId: function () {
    var w = "***************************************",
      firstW = w[parseInt(Math.random() * (w.length))];

    var userId = firstW + (Date.now()) + (Math.random() * 100000).toFixed(0)
    console.log(userId)
    wx.setStorageSync("userId", userId)

    return userId;
  },

这样就实现了获取用户信息。

再谈主页的设计的轮播图与三种跳转方式

轮播图比较简单，不多说，直接看代码。

<swiper class='lunbo' indicator-dots='true' autoplay='true' interval='4000'>
<swiper-item><image src='/images/2.jpg'></image> </swiper-item>
<swiper-item><image src='/images/3.jpg'></image> </swiper-item>
<swiper-item><image src='/images/4.jpg'></image> </swiper-item>
</swiper>

.lunbo{
  width: 100%;
}
.lunbo image{
  width: 100%;
}
.swiper-item{
  width: 100rpx;
  height: 600rpx;
}
.swiper-item image{
   width: 100rpx;
  height: 500rpx;
}

下面主要说一下三种跳转方式 wx.switchTab ; wx.navigateTo; wx.redirectTo
wx.switchTab主要实现从无底部导航栏向有底部导航栏的跳转，在这种情况下如果使用其他两种跳转方式，将会没有任何反应。

wx.navigateTo是保留当前页面并跳转到下一页面，也就是说在顶部导航栏会产生返回键。

wx.redirectTo则与wx.navigateTo相反，它是关闭当前也页面并跳转到下一页面，也就是说不会有返回上一页面的返回键

ok，以上便是本小白在首页与主页开发过程中觉得值得一提的几点。下次更新再讲失物招领平台的详细过程。另外今天是五一，祝大家五一快乐呀！！！！！！！！！！！！！