微信小程序云开发之新闻博客社区项目debug后的项目代码

2023-10-14 10:51:33 浏览数 (2)


本次主要修改方案

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)
      }
    })
  },

0 人点赞