本次主要修改方案
1.需要把以前的获取用户信息的api接口替换掉
现在我们使用button按钮与关联的交互事件来获取我们的用户信息:
云函数:
代码语言:javascript复制// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
我们使用云函数来获取到我们不同的用户登录时的openid,然后我们在return出去。
wode页面JavaScript:
代码语言:javascript复制 onLoad(options) {
let that = this
wx.cloud.callFunction({
name:'getOpenid',
data:{},
}).then(res=>{
console.log(res)
wx.cloud.database().collection('ch_users').where({
_openid:res.result.openid
}).get({
success(res){
console.log(res.data[0])
that.setData({
name:res.data[0].nickname,
path:res.data[0].touxiangUrl
})
}
})
})
},
需要在onLoad这个钩子函数中,我们访问我们创建的getopenid这个云函数。然后我们获取到我们想要的用户的openid,根据openid我们来查找我们创建的数据库中是否有我们这一条openid下的用户信息。我们拿到用户数据数组中的第0条数据,这就是说如果用户登录过一遍后就会有遗留的数据库数据,之后该用户每次打开本次小程序就会实现一个自动登录的效果。我们用这种方法来代替了将我们的用户信息存入缓存中的效果。
wode.wxml:
代码语言:javascript复制<button wx:if="{{path == '/images/touxiang(moren).png'}}" bindtap="denglu" type="primary"style="width:100%;margin-top:200rpx">授权登录</button>
如果有就返回到我们的前台,并将其显示出来。如果没有,我们这个钩子函数将查找不到我们的用户数据,所以就不执行下方的方法。并且我们用一个wx:if的方法来实现一个button按钮的显示或隐藏的效果。如果,我们的的钩子函数没有执行成功,也就是说是一个新用户还没有登录过本小程序,所以我们的用户头像还是一个默认的用户头像。这是我们的判断条件就开始执行,我们这是就把button按钮像是出来,并实现跳转。
跳转后的页面wxml:
代码语言:javascript复制<button class="button" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" bindinput="input" class="weui-input" placeholder="请输入昵称"/>
<button bindtap="denglu" type="primary" class="shangchuan" style="width: 100%;">登录</button>
跳转后的页面js:
代码语言:javascript复制const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
console.log(e)
let avatarUrl = e.detail.avatarUrl
this.setData({
avatarUrl,
})
},
input(e){
console.log(e)
let name = e.detail.value
this.setData({
name
})
},
denglu(){
let that = this
wx.cloud.database().collection('ch_users').add({
data:{
nickname:that.data.name,
touxiangUrl:that.data.avatarUrl
},
success(res){
console.log(res)
wx.showToast({
title: '登录成功!',
})
setTimeout(()=>{
wx.navigateBack({
delta:1
})
},800)
}
})
}
})
以上就是我们使用微信官方给我们的获取用户的新的方案!
2.增加用户管理系统
当我们点击并进入我们的用户管理的一级页面时,我们先给用户显示该用户登录的账号在小程序上创作的作品!
重要js:
代码语言:javascript复制 chakan(){
let that = this
let wenzhang
wx.cloud.callFunction({
name:'getOpenid',
data:{
}
}).then(res=>{
console.log(res)//res就将openid返回出来
//根据返回出来的openid做一些相应操作
wx.cloud.database().collection('ch12').where({
_openid:res.result.openid
}).get({
success(res){
console.log(res)
wenzhang = res.data
that.setData({
wenzhang
})
}
})
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.chakan()
},
我们以上js实现逻辑还是通过查询我们的用户openid来获取到我们的登录用户发布到我们数据库中的数据。
我们还需要在跳转的过程中有一个参数的传递:guanli_id={{item._id}}
代码语言:javascript复制 <navigator url="../guanli/guanli?guanli_id={{item._id}}" class="tiaozhuan">
<view>{{item.title}}</view>
<view class="xia">
<view>{{item.name}}</view>
<view style="font-size: 20rpx;margin-top: 10rpx;margin-left: 380rpx;">{{item.cTime}}</view>
</view>
</navigator>
我们在跳转之后的页面(管理页面的二级页面)用钩子来获取到我们的传过来的参数值:
js:
代码语言:javascript复制 onLoad(options) {
console.log(options.guanli_id)
this.guanli()
},
然后我们在根据传递过来的参数做一个数据库的删除操作即可:
js:
代码语言:javascript复制 shanchu(){
let that = this
wx.cloud.database().collection('ch12').doc(that.options.guanli_id).remove({
success(res){
console.log(res)
wx.showToast({
title: '删除成功!',
})
setTimeout(()=>{
wx.navigateBack({
delta:1
})
},800)
}
})
},