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

来源: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
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...