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

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

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

首页设计与获取用户信息

先来看看首页整体效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
首页设计主要谈一下背景图片的问题
在设计的时候发现如果使用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,以上便是本小白在首页与主页开发过程中觉得值得一提的几点。下次更新再讲失物招领平台的详细过程。另外今天是五一,祝大家五一快乐呀!!!!!!!!!!!!!

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值