自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：徐小夕
開發(fā) 前端
今天要寫的H5朋友圈也是基于筆者開發(fā)的cms搭建的，我將仿照微信朋友圈，帶大家一起開發(fā)一個(gè)能發(fā)布動(dòng)態(tài)(包括圖片上傳)的朋友圈應(yīng)用。

[[402528]]

前言

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

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

你將收獲

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

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

朋友圈列表

查看朋友圈圖片

發(fā)布動(dòng)態(tài)

正文

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

  • 首屏加載時(shí)間
  • 適配問題
  • 頁面流暢度
  • 動(dòng)畫性能
  • 交互友好
  • 提供用戶反饋 這些不僅僅是前端工程師需要考慮的問題，也是產(chǎn)品經(jīng)理和交互設(shè)計(jì)師考慮的范疇。當(dāng)然還有很多實(shí)際的考慮點(diǎn)需要根據(jù)自身需求去優(yōu)化，以上幾點(diǎn)大致解決方案如下：
  1. 提高首屏加載時(shí)間 可以采用資源懶加載+gzip+靜態(tài)資源CDN來優(yōu)化，并且提供加載動(dòng)畫來降低用戶焦慮。
  2. 適配問題 移動(dòng)端適配問題可以通過js動(dòng)態(tài)設(shè)置視口寬度/比率或者采用css媒介查詢來處理，這塊市面上已經(jīng)有非常成熟的方案
  3. 頁面流暢度 我們可以在body上設(shè)置-webkit-overflow-scrolling:touch;來提高滾動(dòng)流暢度，并且可以在a/img標(biāo)簽上使用 -webkit-touch-callout: none來禁止長(zhǎng)按產(chǎn)生菜單欄。
  4. 動(dòng)畫性能 為了提高動(dòng)畫性能， 我們可以將需要變化的屬性采用transform或者使用absolute定位代替，transform不會(huì)導(dǎo)致頁面重繪。
  5. 提供用戶反饋 提供友好的用戶反饋我們可以通過合理設(shè)置toast，modal等來控制

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

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

筆者將采用umi作為項(xiàng)目的前端集成解決方案，其提供了非常多了功能，使用起來也非常方便，并且對(duì)于antd和antd-mobile自動(dòng)做了按需導(dǎo)入，所以熟悉react的朋友可以嘗試一下，本文的方案對(duì)于vue選手來說也是適用的，因?yàn)槿魏螆?chǎng)景下，方法和思維模式都是跨語言跨框架的。

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

  1. // umi2.0 
  2. // 新建項(xiàng)目目錄 
  3. mkdir friendcircle 
  4. // 創(chuàng)建umi項(xiàng)目 
  5. cd friendcircle 
  6. yarn create umi 
  7. // 安裝依賴 
  8. yarn 
  9. yarn add antd-moblie 

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

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

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

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

  1. <LazyLoad key={item.uid} overflow height={280} onContentVisible={onContentVisible}> 
  2.     // 需要懶加載的組件 
  3.     <ComponentA /> 
  4. </LazyLoad> 

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

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

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

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

  1. .imgItem { 
  2.     margin-right: 6px; 
  3.     margin-bottom: 10px; 
  4.     &:nth-last-child(1):first-child { 
  5.       margin-right: 0; 
  6.       width: 100%; 
  7.     } 
  8.     &:nth-last-child(2):first-child, 
  9.     &:nth-last-child(3):first-child, 
  10.     &:nth-last-child(4):first-child, 
  11.     &:first-child:nth-last-child(n+2) ~ div { 
  12.       width:calc(50% - 6px); 
  13.       height: 200px; 
  14.       overflow: hidden; 
  15.     } 
  16.     &:first-child:nth-last-child(n+5), 
  17.     &:first-child:nth-last-child(n+5) ~ div { 
  18.       width: calc(33.33333% - 6px); 
  19.       height: 150px; 
  20.       overflow: hidden; 
  21.     } 
  22. } 

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

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

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

  1. img { 
  2.   width: 100%; 
  3.   height: 100%; 
  4.   object-fit: cover; 
  5. } 

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

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

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

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

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

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

  1. <RcViewer options={{title: 0, navbar: 0, toolbar: 0}} ref={imgViewRef}> 
  2.   <div className={styles.imgBox}> 
  3.     { 
  4.       item.imgUrls.map((item, i) => { 
  5.         return <div className={styles.imgItem} key={i}> 
  6.           <img src={item} alt=""/> 
  7.         </div> 
  8.       }) 
  9.     } 
  10.   </div>    
  11. </RcViewer> 

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

當(dāng)我們點(diǎn)擊動(dòng)態(tài)中的某一張圖片時(shí)，我們可以看到它的大圖，并通過手勢(shì)進(jìn)行切換。

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

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

  1. const onSubmit = async () => { 
  2.     // ... something code 
  3.     const formData = new FormData() 
  4.     for(let i=0; i< files.length; i++) { 
  5.       formData.delete('file') 
  6.       formData.append('file', files[i].file) 
  7.       try{ 
  8.         const res = await req({ 
  9.           method: 'post', 
  10.           url: '/files/upload/tx', 
  11.           data: formData, 
  12.           headers: { 
  13.               'Content-Type': 'multipart/form-data' 
  14.           } 
  15.         }); 
  16.         // ... something co 
  17.       }catch(err) { 
  18.         Toast.fail('上傳失敗', 2); 
  19.       } 
  20.     } 

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

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

 

責(zé)任編輯：姜華 來源： 趣談前端
應(yīng)用開發(fā)前端
相關(guān)推薦

2021-11-19 09:48:33

鴻蒙HarmonyOS應(yīng)用

2013-11-06 14:25:30

微信朋友圈

2015-09-01 16:55:42

微信朋友圈圖片

2021-11-04 09:55:50

鴻蒙HarmonyOS應(yīng)用

2023-03-09 07:29:28

微信朋友圈架構(gòu)

2013-04-12 03:40:53

微信開放平臺(tái)朋友圈

2021-06-23 10:24:06

微信macOS移動(dòng)應(yīng)用

2013-12-06 16:39:56

2020-03-13 13:19:28

微信廣告隱私

2013-11-29 11:46:49

微信朋友圈朋友圈生意淘寶

2015-02-13 10:18:20

微信

2021-08-14 23:23:49

ios微信朋友圈

2022-01-27 07:40:27

iOS微信朋友圈

2019-12-24 13:00:03

微信朋友圈移動(dòng)應(yīng)用

2021-03-11 22:23:46

微信Mac版朋友圈

2021-03-31 06:05:08

微信朋友圈騰訊

2020-11-05 14:26:43

微信朋友圏7.0.18

2022-01-12 21:00:08

微信安卓騰訊

2019-05-15 15:40:18

朋友圏微信評(píng)論

2015-02-09 14:40:49

QQ瀏覽器微信
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)