基于云开发的微信小程序-miNi相册（开发环境介绍与登录）

首先安装Node.js

注册一个小程序拿到一个appidhttps://mp.weixin.qq.com/cgi-bin/wx

有兴趣弄代码管理的可以https://git.weixin.qq.com/

云开发函数文档必备：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

新建一个以云开发为模版的小程序。（新建之后应该是有一个模版页面的，我这里就不从零操作了，直接在我的项目上讲解）

 进来之后的详解

看一下云开发里面，可以看到运营分析，数据库/存储/云函数。

以我们这个项目来说还是十分够用的。

 

这次只用到了两个表，一个表记录点赞记录，一个表记录发布人的信息。 下面是我数据库存储记录的格式，供大家参考。

这里是存储的介绍。前面为什么要存FileID呢，因为我们使用<image>的时候填入FileID就可以了。在2.3.0的版本起<image>开始支持云文件ID。

 

 

环境介绍到这里，首先是介绍授权的问题。

大家都知道，使用小程序的时候要先授权后使用，下面介绍我们授权的方法函数。

我们每次进入首先会进入这个页面，判断是否授权过，第一次进入的时候不进行跳转，需要点击授权。

第二次进来的时候已授权，就跳入主页。

 

Login.wxml

<view class='con'>
<image src="/images/card1.jpg" class='timage'></image>
</view>

<view class='con'>
<text class='mtext'>使用微信账号登陆北岭山老年人小程序</text>
</view>

<view class='con'>
<button open-type="getUserInfo" class='ubutton' bindgetuserinfo="onGetOpenid">授 权</button>

</view>

Login.js 

const app = getApp()
Page({

  data: {
    avatarUrl: '',
    userInfo: {},
  },

  onLoad: function () {
    if (!wx.cloud) {
      return
    }
    // 判断是否授权
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.cloud.callFunction({
            name: 'login',
            data: {},
            success: res => {
              console.log('[云函数] [login] user openid: ', res.result.openid)
              app.globalData.openid = res.result.openid
              wx.navigateTo({
                url: '../Home_page/Home_page',
              })
            },
            fail: err => {
              console.error('[云函数] [login] 调用失败', err)
              wx.redirectTo({
                url: '../deployFunctions/deployFunctions',
              })
            }
          })
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
              wx.setStorage({
                key: "key",
                data: this.data.userInfo
              })
              wx.redirectTo({
                url: '../Home_page/Home_page',
              })
            }
          })
        }
      }
    })

  },

  onGetOpenid: function (e) {

    wx.getUserInfo({

      success: res => {
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          userInfo: res.userInfo
        })
        wx.setStorage({
          key: "key",
          data: this.data.userInfo
        })
      }
    })

    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {

        console.log('[云函数] [login] user openid: ', res.result.openid)

        app.globalData.openid = res.result.openid
        wx.redirectTo({
          url: '../Home_page/Home_page',
        })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
      }
    })
  }
})

Login.wxss

page{
  background-color: #F9F9F9;
}
.con{
  display:flex;                   
  justify-content: center;
}

.timage{
  border-radius: 20rpx;
  width: 650rpx;
  height: 400rpx;
  margin-top: 20rpx;
  margin-bottom: 50rpx;
}

.mtext{
  width: 650rpx;
  height: 35rpx;
  font-size: 36rpx;
  margin-top: 200rpx;
  margin-bottom: 0rpx;
  text-align: center;
}




.ubutton {
  width: 30%;
position:relative;
display:block;
margin-left:10rpx;
margin-right:10rpx;
margin-top: 60rpx;
margin-bottom: 0rpx;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:12px;
text-align:center;
text-decoration:none;
line-height:2.55555556;
border-radius:30px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#ffffff;
background-color:rgb(23, 156, 245);

}

 

 一般云函数会有一个Login里面的模版，我们在其功能上作修改即可。

这里没有直接往数据库里面添加数据，在后面的一些项目中会首先往数据库注册一条用户的信息，再进行补全。

这样的登录其实有点不爽，因为每次进入都会进入这个页面，会有那种一闪而过的那种状态，会让用户体验降低。

其实有一种方法可以解决，就是伪加载，思路是首先进入是一个空白的页面，在空白的页面进行判断再进行跳转，虽然实现功能是一样的，可是这样会让体验好很多。（后续的项目会使用到，这里就先留下这种效果。）