首页 > 分享 > 微信小程序宠物论坛1[通俗易懂]

微信小程序宠物论坛1[通俗易懂]

萌宠菠菠乐园
2024-08-23 05:31

微信小程序宠物论坛1

一个简单的论坛包括以下几个方面：

登录模块发帖模块首页模块帖子详情模块搜索模块个人主页模块

下面将从这6个方面介绍如何用微信小程序开发一个简单的论坛。

登录模块

先看界面图

在这里插入图片描述

打开小程序首先看到这个界面，之后我们点击头像便完成授权登录。

JS部分

//index.js //获取应用实例 const app = getApp() const db = wx.cloud.database() Page({ data: { motto: '欢迎来到宠物论坛', userInfo: {}, nickname:"", heads:"", hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, heads:res.userInfo.avatarUrl, nickname:res.userInfo.nickName, hasUserInfo: true }) // console.log(this.data.heads) // console.log(this.data.nickname) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, heads: res.userInfo.avatarUrl, hasUserInfo: true }) } }) } // 获取用户openid wx.cloud.callFunction({ name: "getopenid", success: res => { console.log(res.result.openid) // this.setData({ // openid: res.result.openid // }) console.log(res.result.openid) this.setData({ openid1: res.result.openid }) console.log("openid1的值为："+this.data.openid1) }, fail(res) { console.log("获取openid失败") } }) // 获取用户的openid，然后对比数据库，如果是老用户直接跳转 const db = wx.cloud.database(); db.collection('user'). where({ _openid: this.data.openid1 }) .get({ success: function (res) { console.log("查询成功") console.log(res.data) if(res.data!=''){ wx.reLaunch({ url: '../mine/mine?id=openid1' }) } console.log("openid2的值为："+res.data[0]._openid) this.setData({ openid2:res.data[0]._openid }) } }) // if (this.data.openid1 == this.data.openid2) ( // wx.reLaunch({ // url: '../mine/mine?id=openid1' // }) // ) }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, heads: e.userInfo.avatarUrl, hasUserInfo: true }) }, //如果是新用户点击头像处理函数 bindViewTap: function () { const heads=this.data.heads const nickname=this.data.nickname db.collection('user').add({ data: { nickname:nickname, heads:heads }, success: function (res) { this.setData({ openid:res._openid }) } }) const openid=this.data.openid wx.reLaunch({ url: '../mine/mine?id=openid' }) }, })

WXML部分

<view class="container"> <view class="userinfo"> <button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{ {userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{ {userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{ {motto}}</text> </view> </view>

WXSS部分

/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/185008.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月7日，如有侵权请联系 cloudcommunity@tencent.com 删除