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

微信小程序宠物论坛2[通俗易懂]微信小程序宠物论坛2发帖模块界面展示填写标题、内容和选择图片之后,点击确定图片,然后点击发布即可。JS部分//import{promisify}from’../../utils/promise.util’import{$init,$digest}from’../../utils/common.util’//constwxUploadFile=promisify(wx.cloud.uploadFile)constdb=wx.cloud.databa

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

Jetbrains全系列IDE稳定放心使用

微信小程序宠物论坛2

发帖模块

界面展示
在这里插入图片描述
填写标题、内容和选择图片之后,点击确定图片,然后点击发布即可。

JS部分

// import { promisify } from '../../utils/promise.util'
import { $init, $digest } from '../../utils/common.util'
//  const wxUploadFile = promisify(wx.cloud.uploadFile)


const db = wx.cloud.database()

Page({
  data: {
    titleCount: 0,//标题字数
    contentCount: 0,//内容字数
    searchinput:'请输入标题',
    contentinput:'请输入内容',
    nickname:'',
    heads:'',
    title:'',
    content:'',
    images:[],
    image:[],
    image1:[],
    time:'',
  },
  onLoad(options) {
    $init(this)
    // 获取用户openid
    wx.cloud.callFunction({
      name: "getopenid",
      success: res => {
        this.setData({
          openid: res.result.openid
        })
        var openid = res.result.openid
        console.log(openid)
      },
      fail(res) {
        console.log("获取openid失败")
      }
    })

    const openid = this.data.openid
    console.log(openid)
    db.collection('user').where({
      _openid: openid
    }).
      get({
        success: res => {
          this.setData({
            nickname: res.data[0].nickname,
            heads: res.data[0].heads
          })
          console.log(this.data.nickname)
          console.log(this.data.heads)
        }
      })
  },

  handleTitleInput(e) {
    const value = e.detail.value
    this.data.title = value
    this.data.titleCount = value.length
    $digest(this)
  },

  handleContentInput(e) {
    const value = e.detail.value
    this.data.content = value
    this.data.contentCount = value.length
    $digest(this)
  },
   // 选择图片
  chooseImage(e) {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const images = this.data.images.concat(res.tempFilePaths)
        this.data.images = images.length <= 9 ? images : images.slice(0, 9)
        $digest(this)
      }
    })
  },

  //  预览
  handleImagePreview(e) {
    const idx = e.target.dataset.idx
    const images = this.data.images
    wx.previewImage({
      current: images[idx],//当前显示出的http链接
      urls: images,//需要预览的http链接列表
    })
  },

  submit(e){
    const images = this.data.images
    if(images=='')
    {
      wx.showModal({
        title: '提示',
        content: '请先选中图片',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
    else{
      var that = this
      //上传图片到云存储,获取图片返回地址
      for (var i = 0; i < images.length; i++) {
        var imageUrl = images[i].split("/");
        var name = imageUrl[imageUrl.length - 1];
        wx.cloud.uploadFile({
          cloudPath: name, // 上传至云端的路径
          filePath: images[i], // 小程序临时文件路径
          success(res) {
            // 返回文件 ID
            image.push(res.fileID)
            that.setData({
              image: image
            })

            wx.showToast({
              title: '确认图片成功',
              icon: 'success',
              mask: true,
              duration: 1000,
            })
          },
          fail: console.error
        })
      }
      const image = that.data.image
      this.data.image = image
    }
   console.log(this.data.image)
  },


// 保存数据到数据库
  submitForm(e) {
    // 图片返回地址
    const image = this.data.image
    console.log(image)
    // 标题
    const title = this.data.title
    // 内容
    const content = this.data.content
    // 昵称
    const nickname = this.data.nickname
    // console.log(nickname)
    // 头像
    const heads = this.data.heads
    // 获取当前时间
    var util = require('../../utils/util.js');
    const time = util.formatTime(new Date());
    this.setData({
      time: time
    });

    if(image==''){
      wx.showModal({
        title: '提示',
        content: '请先确认图片',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
    else{
      if (image == '' || title == '' || content == '') {
        wx.showModal({
          title: '提示',
          content: '请确保标题,内容,图片完整',
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
      else {
        // 上传到数据库中
        db.collection('post').add({
          data: {
            nickname: nickname,
            heads: heads,
            time: time,
            title: title,
            content: content,
            images: image,
            review:'1',
          },
          success: function (res) {
            wx.showToast({
              title: '发布成功,请等待管理员的审核',
              icon: 'success',
              mask: true,
              duration: 1000,
            })
          },
        })
      }
    }

   this.setData({
     titleCount: 0,
     contentCount: 0,
     nickname: '',
     heads: '',
     title: '',
     content: '',
     images: [],
     image: [],
     image1: [],
     time: '',
     searchinput: '请输入标题',
     contentinput: '请输入内容',
   })
  }
})

WXML部分

<view class="question-form">

  <view class="question-input-area">

    <!-- 问题标题  -->
    <view class="question-title-wrap">
      <input class="question-title" placeholder="{
  
  {searchinput}}" maxlength="15" placeholder-style="color:#b3b3b3;font-size:18px;" bindinput="handleTitleInput"></input>
      <view class="title-input-counter">{
  
  {titleCount}}/15</view>
    </view>

    <!-- 问题正文  -->
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <view class="weui-cell__bd">
          <textarea class="weui-textarea"placeholder="{
  
  {contentinput}}" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px;" style="height: 12rem" bindinput="handleContentInput" />
          <view class="weui-textarea-counter">{
  
  {contentCount}}/500</view>
        </view>
      </view>
    </view>

  </view>

  <view class="question-images-area">

    <!-- 添加图片按钮  -->
    <view class="question-images-tool">
      <button type="default" size="mini" bindtap="chooseImage" wx:if="{
  
  {images.length < 9}}">添加图片</button>
  
    </view>

    <!-- 图片缩略图  -->
    <view class="question-images">
      <block wx:for="{
  
  {images}}" wx:key="*this">
        <view class="q-image-wrap">
          <image class="q-image" src="{
  
  {item}}" mode="aspectFill" data-idx="{
  
  {index}}" bindtap="handleImagePreview"></image>
       
        </view>
      </block>
    </view>

  </view>

  <!-- 提交表单按钮  -->
<button class="weui-btn" type="primary" bindtap="submit">确定图片</button>
  <button class="weui-btn" type="primary" bindtap="submitForm">发布</button>

</view>

WXSS部分

page {
  background: #f6f7f8;
}

.question-form {
  margin: 25rpx;
}

.question-input-area {
  background-color: #fff;
  border: 1rpx solid #f2f2f2;
  border-radius: 4rpx;
}

.question-title-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  margin: 10rpx 30rpx;
  padding: 20rpx 0;
}

.question-title {
  flex: 1;
}


.weui-cell::before, .weui-cells::before, .weui-cell::after, .weui-cells::after {
  border: none;
}

.question-images-area {
  padding: 40rpx 0;
}

.question-images-tool {
  display: flex;
  align-items: center;
}

.question-images {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}

.q-image-wrap {
  width: 31%;
  margin-right: 10rpx;
}

.q-image {
  flex: 1;
  height: 200rpx;
  width: 100%;
}

.q-image-remover {
  text-align: center;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)
blank

相关推荐

  • 新手到黑客的最全入门路径图(附全部学习资料下载)!

    新手到黑客的最全入门路径图(附全部学习资料下载)!点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事01入门介绍说到黑客,大家可能觉得很神秘,其实狭义上的黑客就是去寻找网站、系统、软件等漏洞,刚入门的黑客大部分从事渗透工作,而渗透大部分属于web安全方向,就是利用漏洞来取得一些数据或达到控制,让对方程序崩溃等效果。02一些常用的名词解释挖洞的话,就相当于在程序中查找漏洞,举一个不大恰当但容易理解的比喻,就像韩非子说所的那个

  • navicat永久激活码最新[最新免费获取]

    (navicat永久激活码最新)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlS32PGH0SQB-eyJsaWNlbnNlSW…

  • 研华acdp手机版_generation z

    研华acdp手机版_generation z上帝手中有 N 种世界元素,每种元素可以限制另外 1 种元素,把第 i 种世界元素能够限制的那种世界元素记为 A[i]。现在,上帝要把它们中的一部分投放到一个新的空间中去建造世界。为了世界的和平与安宁,上帝希望所有被投放的世界元素都有至少一个没有被投放的世界元素限制它。上帝希望知道,在此前提下,他最多可以投放多少种世界元素?输入格式第一行是一个整数 N,表示世界元素的数目。第二行有 N 个整数 A[1],A[2],…,A[N]。A[i] 表示第 i 个世界元素能够限制的世界元素的编号。输出格式

  • Session.Abandon与Session.Clear之间的区别

    Session.Abandon与Session.Clear之间的区别Session.Clear()就是把Session对象中的所有项目都删除了,Session对象里面什么都没有。但是Session对象还保留。Session.Abandon()就是把当前Session

  • 灰度测试与AB测试_测试种类有哪些

    灰度测试与AB测试_测试种类有哪些这个“常见”,是说当我们经历多了之后,会发现这个概念其实很常见,在当前你所处的这个人群中,发现大家都挂在嘴上。在最开始的测试学习中,其实很少提到这些概念,在职业生涯的前期,也很少需要考虑这些概念。分级测试一般用在系统测试阶段。分级测试,就是说对测试进行分级,区分什么重要、什么不重要,做区别对待。之所以需要区别对待,我总结有两个原因。一个是因为资源上的限制,时间、人力,让我们没有条件来做无差别覆盖。二是本身的限制,在测试阶段,提测质量往往是不尽人意的,只能是层层深入去做测试。.

  • 收藏!一篇教会你写90%的shell脚本

    收藏!一篇教会你写90%的shell脚本还不会写shell脚本?这篇文章教会你写90%的shell脚本!

发表回复

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

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