首先安装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里面的模版,我们在其功能上作修改即可。
这里没有直接往数据库里面添加数据,在后面的一些项目中会首先往数据库注册一条用户的信息,再进行补全。
这样的登录其实有点不爽,因为每次进入都会进入这个页面,会有那种一闪而过的那种状态,会让用户体验降低。
其实有一种方法可以解决,就是伪加载,思路是首先进入是一个空白的页面,在空白的页面进行判断再进行跳转,虽然实现功能是一样的,可是这样会让体验好很多。(后续的项目会使用到,这里就先留下这种效果。)