微信小程序云开发之新闻博客社区项目debug后的项目代码
微信小程序云开发之新闻博客社区项目debug后的项目代码
本次主要修改方案
1.需要把以前的获取用户信息的api接口替换掉
现在我们使用button按钮与关联的交互事件来获取我们的用户信息：
云函数：
// 云函数入口文件
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：
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:
<button wx:if="{{path == '/images/touxiang(moren).png'}}" bindtap="denglu" type="primary"style="width:100%;margin-top:200rpx">授权登录</button>如果有就返回到我们的前台，并将其显示出来。如果没有，我们这个钩子函数将查找不到我们的用户数据，所以就不执行下方的方法。并且我们用一个wx:if的方法来实现一个button按钮的显示或隐藏的效果。如果，我们的的钩子函数没有执行成功，也就是说是一个新用户还没有登录过本小程序，所以我们的用户头像还是一个默认的用户头像。这是我们的判断条件就开始执行，我们这是就把button按钮像是出来，并实现跳转。
跳转后的页面wxml：
<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：
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：
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}}
<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：
onLoad(options) {
console.log(options.guanli_id)
this.guanli()
},然后我们在根据传递过来的参数做一个数据库的删除操作即可：
js：
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)
}
})
},