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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

微信小程序宠物论坛1

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

1. 登录模块
2. 发帖模块
3. 首页模块
4. 帖子详情模块
5. 搜索模块
6. 个人主页模块

下面将从这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;
}