微信小程序宠物论坛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)


相关推荐

  • wireshark流量分析实战

    wireshark流量分析实战wiresharkWireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换。下面是在网上找的数据包资源,来自2018的铁人三项流量分析题目,一共有二十题,共有六个数据包,本人习惯一题一题来,不过可能是个很不好的习惯1.黑客的IP是多少…

  • git设置ssh key(git ssh配置)

    gitclone支持https和git(即ssh)两种方式下载源码:当使用git方式下载时,如果没有配置过sshkey,则会有如下错误提示:下面就介绍一下如何配置git的sshkey,以便我们可以用git方式下载源码。首先用如下命令(如未特别说明,所有命令均默认在GitBash工具下执行)检查一下用户名和邮箱是否配置(github支持我们用用户名或邮箱登录):git

  • h5页面 请在微信客户端打开链接_完美解决 请在微信客户端打开链接

    h5页面 请在微信客户端打开链接_完美解决 请在微信客户端打开链接原标题:完美解决请在微信客户端打开链接背景描述相信有模拟微信页面请求的测试都有看到过这个页面,简单点说就是爬虫爬微信页面,进行回放的时候会出现这个页面。大概在1年前,专门安排了一个人去解决这个技术问题,遗憾的是当时没有找到解决方案,接下来所有微信端的接口测试和性能测试都无法进行,今天和大家分享下我们的解决方案,希望大家可以绕过微信的坑。业务场景我这里以JMeter来举例,我们可以通过在JMet…

  • Project interpreter not specified(eclipse+pydev)

    Project interpreter not specified(eclipse+pydev)

    2021年11月24日
  • python转置矩阵函数_对python 矩阵转置transpose的实例讲解

    python转置矩阵函数_对python 矩阵转置transpose的实例讲解在读图片时,会用到这么的一段代码:image_vector_len=np.prod(image_size)#总元素大小,3*55*47img=Image.open(path)arr_img=np.asarray(img,dtype=’float64′)arr_img=arr_img.transpose(2,0,1).reshape((image_vector_len,))#4…

  • 【软件工程】——详细设计说明书「建议收藏」

    【软件工程】——详细设计说明书「建议收藏」1引言1.1编写目的该文档在概要设计的基础上,进一步的细化系统结构,展示了软件结构的图标,物理设计、数据结构设计、及算法设计、详细的介绍了系统各个模块是如何实现的,包括涉及到的算法,逻辑流程等。预期的读者:程序员1.2背景a. 待开发软件系统的名称:机房收费系统b. 项目的任务提出者:米新江教授c. 项目的开发者:齐智d. 项目的用户:廊坊师范学院全体在职员工及学生e. 运行该软…

发表回复

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

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