微信小程序实现发动态功能的示例代码

目录
  • 一、设计所需要的表
    • 1、文章表
    • 2、评论表
    • 3、点赞表
  • 二、发布动态
    • 1、文本区
    • 2、最终发表动态效果
    • 3、发布动态代码

最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现。

一、设计所需要的表

1、文章表

文章表很简单,就类似朋友圈,一个文字内容,一个图片数组

2、评论表

3、点赞表

二、发布动态

1、文本区

光标有点问题,回车换行时光标和文字被埋在下面了

解决,给textarea设置一个最大高度,max-length,把scroll-view改为view ,因为textarea本身自带滚动

2、最终发表动态效果

3、发布动态代码

1、publisherArticle.wxml

<view class="main">
  <!--文字区-->
  <view class="text" >
    <textarea fixed="true" auto-height placeholder="这一刻的想法..." bindinput="setText" style="margin: 10rpx;width: 96%;max-height: 90%;"/>
  </view>
  <!--图片区-->
  <view class="img">
    <block wx:for="{{selectImgs}}" wx:key="index">
      <image src="{{item}}" style="height: 220rpx;width: 220rpx;margin: 10rpx;"></image>
    </block>
    <image wx:if="{{selectImgs.length != 9}}" src="/image/addImg.png" bindtap="selectImg" style="height: 80rpx;width: 80rpx;padding: 70rpx;background-color: rgb(241, 236, 236);margin-top: 10rpx;"></image>
  </view>
  <view class="publish" bindtap="publish">发表</view>
</view>

2、publisherArticle.wxss

.main{
  position: fixed;
  top: 10rpx;
  bottom: 10rpx;
  left: 0rpx;
  right: 0rpx;
  z-index: 0;
}
.text{
  position: fixed;
  top: 20rpx;
  left: 10rpx;
  right: 10rpx;
  height: 23%;
  background-color: white;
  border-radius: 10rpx;
  z-index: 1;
}
.img{
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  top: 23%;
  left: 10rpx;
  right: 10rpx;
  bottom: 15%;
  background-color: white;
  border-radius: 10rpx;
  z-index: 1;
}
.publish{
  position: fixed;
  z-index: 1;
  top: 88%;
  width: 11%;
  left: 40%;
  background-color: rgb(8, 88, 32);
  color: white;
  font-size: 40rpx;
  border-radius: 30px;
  padding: 10rpx 30rpx;
  box-shadow: 2px 2px 10px rgb(16, 46, 33);
}

3、publishArticle.js

Page({
  data: {
    selectImgs: null,
    text: '',
    uploadImgs: []
  },
  selectImg(){
    wx.chooseImage({
      count: 8,
      success: (res) => {
        this.setData({
          selectImgs: res.tempFilePaths
        })
      }
    })
  },
  setText(e){
    let text = e.detail.value
    console.log(text)
    this.setData({
      text: text
    })
  },
  //发表动态
  publish(){
    this.uploadImages().then((resolve, reject) => {
      wx.showLoading({
        title: '发布中'
      })
      setTimeout(() => {}, 500)
      let imagesUrl = this.data.uploadImgs //云存储的图片列表
      let text = this.data.text
      wx.cloud.database().collection('article').add({
        data: {
          content: text,
          imagesUrl: imagesUrl
        },
        success: (res) => {
          wx.hideLoading({
            success: (res) => {
              wx.showToast({
                title: '发表成功',
              })
              wx.navigateBack({
                delta: 1,
              })
            },
          })
        }
      })
    })
  },
  //上传图片到云存储
  uploadImages() {
    let _this = this
    return new Promise(function (resolve, reject) {
      function upload(index) {
        var picnum = index+1
        wx.showLoading({
          title: '上传第' + picnum + '张图片'
        })
        wx.cloud.uploadFile({
          cloudPath: 'articleImgs/' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000) + '.jpg', //给图片命名
          filePath: _this.data.selectImgs[index], //本地图片路径
          success: (res) => {
            _this.data.uploadImgs[index] = res.fileID
            wx.hideLoading({
              success: (res) => {},
            })
            //判断是否全部上传
            if (_this.data.selectImgs.length - 1 <= index) {
              console.log('已全部上传')
              resolve('success')
              return
            } else {
              console.log(index)
              upload(index + 1)
            }
          },
          fail: (err) => {
            reject('error')
            wx.showToast({
              title: '上传失败,请重新上传',
              type: 'none'
            })
          }
        })
      }
      upload(0)
    })
  },
}

到此这篇关于微信小程序实现发动态功能的文章就介绍到这了,更多相关小程序发动态内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序仿朋友圈发布动态功能

    仿照微信朋友圈做了一个界面如下,先看效果: 1.点开界面 2.选择图片 3.点击上传 4.动态显示 第一个页面的wxml: <view class='page'> <textarea class='text' bindinput="input" placeholder="分享动态" auto-height/> <view class="image_content"> <view class='image'

  • 详解dll动态库的开发与调用及文件的读写小程序

    详解dll动态库的开发与调用及文件的读写小程序 首先我们先来学习一下动态库的调用,先找到动态库的.dll和.lib文件并将其导入到同源文件相同级别的文件夹下面,然后在添加进其头文件,并右击项目处,然后点击链接,链接我们的lib文件(一定要是全名称包括扩展名),然后我们就可以调用动态库的函数了. Dll是我们具体的函数, lib使我们的函数描述文件. #include <stdio.h> #include <stdlib.h> /* 该代码是对文件读写操作的使用 */ #pragma

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • 微信小程序实现发微博功能

    跳转页面发状态消息,是一个很常见的功能,功能截图如下: 具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现 首先,这个功能涉及两个页面,分别为top和list 先看list页面,即图片1和图片4,该页面的布局如下 <!--pages/weibo/list/list.wxml--> <view>这是第一条微博</view> <view wx:for = "{{weibos}}"> {{item}} </vi

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序之搜索分页功能的实现代码

    直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g

  • 微信小程序实现发红包功能

    本文实例为大家分享了微信小程序实现发红包的具体代码,供大家参考,具体内容如下 目前此功能尚在内测,无法申请.此博文仅示例. 流程效果图: 图片1触发wx.sendBizRedPacket({})吊起图片2,点击开,出现图片3,关闭以后出现图片4. wx.sendBizRedPacket({})说明及示例: wx.sendBizRedPacket({ timeStamp: e.timeStamp, nonceStr: e.nonceStr, package: e.package, signType

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • 微信小程序websocket聊天室的实现示例代码

    背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30

  • 微信小程序实现人脸识别登陆的示例代码

    前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口.本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获! 步骤 步骤 涉及接口(百度云) 拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册) 拍摄照片并上传,云服务器在线比对 人脸

  • django与小程序实现登录验证功能的示例代码

    之前用小程序做项目,因为后台使用的java开发,一切顺利,但切换成django做RESTful API接口时,在登陆注册时一直出现问题,网上搜索,借助一个网友的回答,找到了一种可行的解决方案,现记录如下. 具体流程 用户点击小程序页面上的登录授权认证 通过微信自带的认证获取code 调取登录接口,将code传入后台 后台拿到code调用微信接口获取openid等用户信息 后台将openid作为用户名,若存在则去校验用户信息,否则以此用户名创建新用户,密码随机生成 将校验结果或者创建信息返回给微信

  • 微信小程序之页面拦截器的示例代码

    场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

随机推荐

其他