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

微信小程序 宠物论坛1[通俗易懂]微信小程序宠物论坛(1)一个简单的论坛包括以下几个方面:登录模块发帖模块首页模块帖子详情模块搜索模块个人主页模块下面将从这6个方面介绍如何用微信小程序开发一个简单的论坛。1、登录模块先看界面图打开小程序首先看到这个界面,之后我们点击头像便完成授权登录。JS部分//index.js//获取应用实例constapp=getApp()constdb=wx.cloud.database()Page({data:{motto:’欢迎来到宠物论坛

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185008.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号