微信小程序~云开发 Demo 实现发表页面

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/84453989

实现的结果如下:

u甜甜圈发布页面.png

分析如何实现

  • 导航栏的实现很简单就不说了,可参考我之前的文章
  • 重点是中间的 ② 是内容区域
  • 区域三是功能操作区

内容区域的实现

  • 第一个是文本区域
  • 第二个是水平的图片展示区域
    这里的内容区域使用的是小程序的 textarea 组件,具体的使用方式可参考 官方文档

图片显示的区域使用的是scroll-view组件,设置为水平方向滑动 <scroll-view class="image-group" scroll-x="true">,图片的选择是使用了wx.chooseImage API,chooseImage 官方文档

在图片的右上角有关闭按钮,这里使用的是icon组件,具体可参考 icon组件

主要的实现代码如下:

<view class="content">
  <form bindsubmit="formSubmit">
    <view class="text-content">
      <view class='text-area'>
        <textarea name="input-content" type="text" placeholder="说点什么吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
      </view>

    </view>
    <scroll-view class="image-group" scroll-x="true">
      <block wx:for='{{images}}' wx:for-index='idx'>
      <view>
        <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
        <icon type='clear' bindtap='removeImg'  data-index="{{idx}}" ></icon>
      </view>
      </block>
      
    </scroll-view>
    <view class='btn-func'>
      <button class="btn-img" bindtap='chooseImage'>选择图片</button>
      <button class="btn" formType='submit'  open-type="getUserInfo">发布圈圈</button>
      <!-- <image hidden=''></image> -->
    </view>
  </form>

</view>

布局样式如下:

.content {
  height: 100%;
  width: 100%;
}

textarea {
  width: 700rpx;
  padding: 25rpx 0;
}

.text-content {
  background-color: #f3efef;
  padding: 0 25rpx;
}

.image-group {
  display: flex;
  white-space: nowrap;
  margin-top: 30px;
}

.image-group view{
  display: inline-block;
  flex-direction: row;
  width: 375rpx;
  height: 375rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  background-color: #cfcccc;
}

.image-group view image{
  width: 100%;
  height: 100%;
  align-items: center;
}

.image-group view icon{
  display: inline-block;
  vertical-align: top;
  position: absolute
}
.btn-func {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  align-items: center;
}

.btn-img {
  width: 220px;
  height: 45px;
  line-height: 45px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(113, 98, 250);
  color: #fff;
  border-radius: 50px;
}

.btn {
  width: 220px;
  height: 45px;
  line-height: 45px;
  background-color: #d50310;
  color: #fff;
  border-radius: 50px;
  margin-bottom: 20px;
}

页面布局之后就该从 js中去处理数据了,在js中主要实现的功能有

  • 文本内容的获取
  • 图片的选择
  • 图片的阅览
  • 图片的删除
  • 将结果发布到云数据库中

基本上都是 API 的调用,也没啥难度的,下面直接贴出源代码:
textarea 文本内容的获取

 /**
   * 获取填写的内容
   */
  getTextAreaContent: function(event) {
    this.data.content = event.detail.value;
  },

图片的选择

 /**
   * 选择图片
   */
  chooseImage: function(event) {
    var that = this;
    wx.chooseImage({
      count: 6,
      success: function(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths

        for (var i in tempFilePaths) {
          that.data.images = that.data.images.concat(tempFilePaths[i])
        }
        // 设置图片
        that.setData({
          images: that.data.images,
        })
      },
    })
  },

图片的预览

 // 预览图片
  previewImg: function(e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;

    wx.previewImage({
      //当前显示图片
      current: this.data.images[index],
      //所有图片
      urls: this.data.images
    })
  },

图片的删除

/**
   * 删除图片
   */
  removeImg: function(event) {
    var position = event.currentTarget.dataset.index;
    this.data.images.splice(position, 1);
    // 渲染图片
    this.setData({
      images: this.data.images,
    })
  },

发布内容到数据库中

数据发布到数据中,需要先开启云开发,然后在数据库中创建集合也就是表之后就是调用数据库的增删改查API即可

 /**
   * 添加到发布集合中
   */
  saveToHistoryServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    db.collection('history').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
      },
      fail: console.error
    })
  },

文章介绍到这里就结束了,有问题可以联系我一起讨论~

这是我上线的一个小程序,走了很多弯路,现在也在整理笔记,过几天会发布。欢迎老铁扫码先体验一波(目前扫码出现可能是查快递页面,这是个人开发者绕过上线提交的页面,12月份会改为查开奖页面,敬请期待)

image

展开阅读全文

没有更多推荐了,返回首页