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

淼学派对

已于 2023-01-10 00:18:07 修改

阅读量558

点赞数 5

文章标签：微信小程序小程序

于 2023-01-10 00:17:54 首次发布

本文链接：https://blog.csdn.net/lbcyllqj/article/details/128622878

版权

大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：lqj_本人的博客_CSDN博客-微信小程序,html特效,vue2基础领域博主

本次文章主要时为我最近在哔哩哔哩上的新发布的视频做一个映射！

哔哩哔哩欢迎关注：小淼前端

哔哩哔哩详情讲解视频：

微信小程序云开发之新闻社区项目_哔哩哔哩_bilibili

讲一下主要的实现的思路以及实现方法！

之前我也有讲过这个新闻发布系统的基础的完成，但是后来微信官方团队改变了接口的使用，有的接口收回了，所以我们用原生写的小程序系统不得不在通过官方给的接口调整方案来debug我们的项目。

以下是，我之前给大家分享的版本：

基于腾讯云开发微信小程序（新闻发布及共享平台）上_lqj_本人的博客-CSDN博客_用云开发写新闻案例

基于腾讯云开发微信小程序（新闻发布及共享平台）中_lqj_本人的博客-CSDN博客

基于腾讯云开发微信小程序（新闻发布及共享平台）下_lqj_本人的博客-CSDN博客_服务器端发布小程序新闻内容

本次主要修改方案

1.需要把以前的获取用户信息的api接口替换掉

2.增加用户管理系统

本次主要修改方案

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