大家好，我是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 = thiswx.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.avatarUrlthis.setData({avatarUrl,})},input(e){console.log(e)let name = e.detail.valuethis.setData({name})},denglu(){let that = thiswx.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 = thislet wenzhangwx.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.datathat.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 = thiswx.cloud.database().collection('ch12').doc(that.options.guanli_id).remove({success(res){console.log(res)wx.showToast({title: '删除成功！',})setTimeout(()=>{wx.navigateBack({delta:1})},800)}})},

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

微信小程序云开发实现一个社区 Demo（补充）
之前写了一篇文章介绍如何使用云开发来实现一个社区 Demo: 微信小程序~云开发的实现的一个社区 Demo(完结~) 得到很多小伙伴的认可但也出现了一些问题. 主要问题有: 发布的图片不显示,跨端发布 ...
微信小程序云开发查询数据库结果为空
微信小程序云开发查询数据库结果为空问题描述: 先上代码: getNotice : function(){var that = thisconst db = wx.cloud.database()db ...
关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
记录我的第一篇博客，【新手向】微信小程序云开发
[新手向]微信小程序云开发前言为什么要写博客微信小程序开发小程序云开发概述准备知识储备组件库开源框架环境搭建最后前言偶然看到自己以前写的代码 em-这一坨什么鬼,哈哈哈所以我 ...
微信小程序云开发博客系统源代码，让写博客像发朋友圈一样简单，含使用部署教程
博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxapp-blog这款小程序. 完整代码下载地址:微信小 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发初步上手
微信小程序云开发初步上手 1.概述 2019年11月6-7日,我报名参加了腾讯开发者大会举办的"2019年小程序.云开发极限编程"活动,英文名为"CloudBase Ha ...
微信小程序云开发完整案例
微信小程序云开发完整案例本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...

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

本次主要修改方案

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

2.增加用户管理系统

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

最新文章

热门文章