盗墓笔记小说下载,欢乐颂第一季免费阅读,琅琊榜海宴小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

前端:開發(fā)一款有點意思的仿微信朋友圈應(yīng)用

[[402528]]

前言

今天要寫的H5朋友圈也是基于筆者開發(fā)的cms搭建的，我將仿照微信朋友圈，帶大家一起開發(fā)一個能發(fā)布動態(tài)(包括圖片上傳)的朋友圈應(yīng)用。有關(guān)服務(wù)端部分筆者在本文中不會細講，如果感興趣的朋友可以參考我的文章:

成都創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、重慶網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)站定制、全網(wǎng)整合營銷推廣、微信小程序、微信公眾號開發(fā)、成都網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為混凝土攪拌機企業(yè)提供源源不斷的流量和訂單咨詢。

基于Koa + React + TS從零開發(fā)全棧文檔編輯器(進階實戰(zhàn))。

你將收獲

使用umi快速創(chuàng)建一個H5移動端應(yīng)用
基于react-lazy-load實現(xiàn)圖片/內(nèi)容懶加載
使用css3基于圖片數(shù)量動態(tài)改變布局
利用FP創(chuàng)建一個朋友圈form
使用rc-viewer查看/旋轉(zhuǎn)/縮放朋友圈圖片
基于axios + formdata實現(xiàn)文件上傳功能
ZXCMS介紹

應(yīng)用效果預(yù)覽

朋友圈列表

查看朋友圈圖片

發(fā)布動態(tài)

正文

在開始文章之前，筆者想先粗略總結(jié)一下開發(fā)H5移動端應(yīng)用需要考慮的點。對于任何移動端應(yīng)用來說，我們都要考慮如下問題：

首屏加載時間
適配問題
頁面流暢度
動畫性能
交互友好
提供用戶反饋這些不僅僅是前端工程師需要考慮的問題，也是產(chǎn)品經(jīng)理和交互設(shè)計師考慮的范疇。當然還有很多實際的考慮點需要根據(jù)自身需求去優(yōu)化，以上幾點大致解決方案如下：

提高首屏加載時間可以采用資源懶加載+gzip+靜態(tài)資源CDN來優(yōu)化，并且提供加載動畫來降低用戶焦慮。
適配問題移動端適配問題可以通過js動態(tài)設(shè)置視口寬度/比率或者采用css媒介查詢來處理，這塊市面上已經(jīng)有非常成熟的方案
頁面流暢度我們可以在body上設(shè)置-webkit-overflow-scrolling:touch;來提高滾動流暢度，并且可以在a/img標簽上使用 -webkit-touch-callout: none來禁止長按產(chǎn)生菜單欄。
動畫性能為了提高動畫性能，我們可以將需要變化的屬性采用transform或者使用absolute定位代替，transform不會導致頁面重繪。
提供用戶反饋提供友好的用戶反饋我們可以通過合理設(shè)置toast，modal等來控制

以上介紹的只是移動端優(yōu)化的鳳毛麟角，有關(guān)前端頁面性能優(yōu)化的方案還有很多，筆者在之前的文章中也詳細介紹過，下面我們進入正文。

1. 使用umi快速創(chuàng)建一個應(yīng)用

筆者將采用umi作為項目的前端集成解決方案，其提供了非常多了功能，使用起來也非常方便，并且對于antd和antd-mobile自動做了按需導入，所以熟悉react的朋友可以嘗試一下，本文的方案對于vue選手來說也是適用的，因為任何場景下，方法和思維模式都是跨語言跨框架的。

目前umi已經(jīng)升級到3.0，本文所使用的是2.0，不過差異不是很大，大家可以放心使用3.0. 具體使用步驟如下

 
 
 
 
  
  
  
  // umi2.0 
  
  
  
  // 新建項目目錄 
  
  
  
  mkdir friendcircle 
  
  
  
  // 創(chuàng)建umi項目 
  
  
  
  cd friendcircle 
  
  
  
  yarn create umi 
  
  
  
  // 安裝依賴 
  
  
  
  yarn 
  
  
  
  yarn add antd-moblie

這樣一個umi項目就創(chuàng)建好了。

2. 基于react-lazy-load實現(xiàn)圖片/內(nèi)容懶加載

在項目創(chuàng)建好之后，我們先分析我們需要用到那些技術(shù)點：

筆者在設(shè)計時研究了很多懶加載實現(xiàn)方式，目前采用react-lazy-load來實現(xiàn)，好處是支持加載事件通知，比如我們需要做埋點或者廣告上報等功能時非常方便。當然大家也可以自己通過observer API去實現(xiàn)，具體實現(xiàn)方案筆者在幾個非常有意思的javascript知識點總結(jié)文章中有所介紹。具體使用方式：

 
 
 
 
  
  
  
   
  
  
  
      // 需要懶加載的組件

react-lazy-load使用方式非常簡單，大家不懂的可以在官網(wǎng)學習了解。

3. 使用css3基于圖片數(shù)量動態(tài)改變布局

目前在朋友圈列表頁有個核心的需求就是我們需要在用戶傳入不同數(shù)量的圖片時，要有不同的布局，就像微信朋友圈一樣，主要作用就是為了讓用戶盡可能多的看到圖片，提高用戶體驗，如下圖所示例子：

我們用js實現(xiàn)起來很方便，但是對性能及其不友好，而且對于用戶發(fā)布的每一條動態(tài)的圖片都需要用js重新計算一遍，作為一個有追求的程序員是不可能讓這種情況發(fā)生的，所以我們用css3來實現(xiàn)，其實有關(guān)這種實現(xiàn)方式筆者在之前的css3高級技巧的文章中有詳細介紹，我們這里用到了子節(jié)點選擇器，具體實現(xiàn)如下：

 
 
 
 
  
  
  
  .imgItem { 
  
  
  
      margin-right: 6px; 
  
  
  
      margin-bottom: 10px; 
  
  
  
      &:nth-last-child(1):first-child { 
  
  
  
        margin-right: 0; 
  
  
  
        width: 100%; 
  
  
  
      } 
  
  
  
      &:nth-last-child(2):first-child, 
  
  
  
      &:nth-last-child(3):first-child, 
  
  
  
      &:nth-last-child(4):first-child, 
  
  
  
      &:first-child:nth-last-child(n+2) ~ div { 
  
  
  
        width:calc(50% - 6px); 
  
  
  
        height: 200px; 
  
  
  
        overflow: hidden; 
  
  
  
      } 
  
  
  
      &:first-child:nth-last-child(n+5), 
  
  
  
      &:first-child:nth-last-child(n+5) ~ div { 
  
  
  
        width: calc(33.33333% - 6px); 
  
  
  
        height: 150px; 
  
  
  
        overflow: hidden; 
  
  
  
      } 
  
  
  
  }

以上代碼中我們對于一張圖片，2-4張圖片，5張以上的圖片分別設(shè)置了不同的尺寸，這樣就可以實現(xiàn)我們的需求了，還有一個要注意的是，當用戶上傳不同尺寸的圖片時，有可能出現(xiàn)高低不一致的情況，這個時候為了顯示一致，我們可以使用img樣式中的object-fit屬性，有點類似于background-size，我們可以把img便簽看作一個容器，里面的內(nèi)容如何填充這個容器，完全用object-fit來設(shè)置，具體屬性如下：

fill 被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應(yīng)內(nèi)容框
contain 被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”
cover 被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應(yīng)內(nèi)容框
scale-down 內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些
none 被替換的內(nèi)容將保持其原有的尺寸

所以為了讓圖片保持一致，我們這么設(shè)置img標簽的樣式：

 
 
 
 
  
  
  
  img { 
  
  
  
    width: 100%; 
  
  
  
    height: 100%; 
  
  
  
    object-fit: cover; 
  
  
  
  }

4. 利用FP創(chuàng)建一個朋友圈form

FP是筆者開源的一個表單配置平臺，主要用來定制和分析各種表單模型，界面如下：

通過該平臺可以定制各種表單模版并分析表單數(shù)據(jù)。這里朋友圈功能我們只需要配置一個簡單的朋友圈發(fā)布功能即可，如下：

由于筆者電腦數(shù)據(jù)丟失導致代碼部分損失，感興趣可以了解一下。

5. 使用rc-viewer查看/旋轉(zhuǎn)/縮放朋友圈圖片

對于朋友圈另一個重要的功能就是能查看每一條動態(tài)的圖片，類似于微信朋友圈的圖片查看器，這里筆者采用第三方開源庫rc-viewer來實現(xiàn)，具體代碼如下：

  
 
 
 
   
  
  
   
   
  
  
     
   
  
  
      { 
   
  
  
        item.imgUrls.map((item, i) => { 
   
  
  
          return

})

}

由上代碼可知我們只需要在RcViewer組件里寫我們需要的查看的圖片結(jié)構(gòu)就行了，其提供了很多配置選項可是使用，這里筆者在option中配置了title，navbar，toolbar均為0，意思是不顯示這些功能，因為移動端只需要有基本的查看，縮放，切換圖片功能即可，盡可能輕量化。效果如下：

當我們點擊動態(tài)中的某一張圖片時，我們可以看到它的大圖，并通過手勢進行切換。

6. 基于axios + formdata實現(xiàn)文件上傳功能

實現(xiàn)文件上傳，除了采用antd的upload組件，我們也可以結(jié)合http請求庫和formdata來實現(xiàn)，為了支持多圖上傳并保證時機，我們采用async await函數(shù)，具體代碼如下：

 
 
 
 
  
  
  
  const onSubmit = async () => { 
  
  
  
      // ... something code 
  
  
  
      const formData = new FormData() 
  
  
  
      for(let i=0; i< files.length; i++) { 
  
  
  
        formData.delete('file') 
  
  
  
        formData.append('file', files[i].file) 
  
  
  
        try{ 
  
  
  
          const res = await req({ 
  
  
  
            method: 'post', 
  
  
  
            url: '/files/upload/tx', 
  
  
  
            data: formData, 
  
  
  
            headers: { 
  
  
  
                'Content-Type': 'multipart/form-data' 
  
  
  
            } 
  
  
  
          }); 
  
  
  
          // ... something co 
  
  
  
        }catch(err) { 
  
  
  
          Toast.fail('上傳失敗', 2); 
  
  
  
        } 
  
  
  
      }

其中req是筆者基于axios封裝的http請求庫，支持簡單的請求/響應(yīng)攔截，感興趣的朋友可以參考筆者源碼。

本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。

網(wǎng)站標題：前端:開發(fā)一款有點意思的仿微信朋友圈應(yīng)用
瀏覽地址：http://fisionsoft.com.cn/article/dhdjhsp.html