【小程式】實現發動態功能

来源:https://www.cnblogs.com/lishilin-glut/archive/2022/08/04/16550127.html
-Advertisement-
Play Games

最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。 一、設計所需要的表 1、文章表 文章表很簡單,就類似朋友圈,一個文字內容,一個圖片數組 2、評論表 3、點贊表 二、發佈動態 1、文本區 游標有點問題,回車換行時游標和文字被埋在下麵了 解決,給textarea設置一個 ...


最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。

一、設計所需要的表

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)
    })
  },
}

本文來自博客園,作者:小李不背鍋,轉載請註明原文鏈接:https://www.cnblogs.com/lishilin-glut/p/16550127.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 好久沒寫文章了,有些同學問我公眾號是不是廢了?其實並沒有。其實想寫的東西很多很多,主要是最近公司比較忙,以及一些其他個人原因沒有時間來更新文章。這幾天抽空寫了一點點東西,證明公眾號還活著。 長久以來的認知,對於托管代碼 .NET / JAVA ,都是需要在伺服器上安裝 SDK 或者運行時的。比如 . ...
  • JetbrAIns Rider 2022 中文版是一個強大的跨平臺.Net開發IDE,可以與.NET Framework和.NET Core一起使用,也可以與Mono項目一起使用。因此,您可以使用rider 2022來創建類和庫,Web應用程式,獨立實用程式等。rider mac版是基於Intell ...
  • Linux系統基礎(二) 1、重定向 重定向 //將輸出的內容重定向到某個文件 //系統設定: 預設輸入設備 //標準輸入,STDIN,0 (鍵盤) 預設輸出設備 //標準輸出(顯示器) 標準正確輸出 //STDOUT,1 標準錯誤輸出 //STDERR,2 //I/O重定向: >:覆蓋輸出重定向 ...
  • SElinux: 是Linux的一個強制訪問控制的安全模塊 SElinux的相關概念: 對象:文件、目錄、進程、埠等 主體:進程稱為主體 SElinux將所有的文件都賦予一個type類型的標簽,所有的進程也賦予一個domain類型的標簽。domain標簽能夠執行的操作由安全策略里定義 #ubunt ...
  • 修改日期時間的工具 date hwclock timedatectl date工具的使用 作用:顯示和設置系統時間 選項: -d <字元串> 顯示字元串所指的日期與時間,比如:"-1 day" 表示當前日期的前一天,必須要加雙引號 -s <字元串> 設置當前的時間和日期 #年月日使用(-)分隔,時分 ...
  • 搭建lamp架構 1.LAMP架構介紹 所謂lamp,其實就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一組動態網站或者伺服器的開源軟體,除Linux外其它各部件本身都是各自獨立的程式,但是因為經常被放在一起使用,擁有了越來越高的相容度,共同組成了一個強 ...
  • 社區於上個月發佈了 RadonDB MySQL Kubernetes v2.2.0,集群數據備份恢復的存儲類型除了 S3,新增 NFS 存儲。本文將為您演示如何進行 NFS 備份及恢復操作。 環境準備 Kubernetes 集群 RadonDB MySQL 集群 過程略,詳細請回顧《快速實現 MyS ...
  • 1. 數據操作類語句: SELECT:從資料庫表中檢索數據行和列 INSERT:把新的數據表記錄添加到資料庫中 DELETE:從資料庫中刪除數據記錄,針對數據進行操作 UPDATE:修改現有資料庫中的數據 2. 數據定義類語句: CREATE:創建新的資料庫或者表等結構 DROP:從資料庫中刪除表或 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...