Front end: develop an interesting imitation wechat circle of friends application

2021-06-18 05:55:49

end develop interesting imitation wechat

Preface

I originally wanted to open source what I wrote CMS Applied , But because of the author's mac The computer crashed , All data cannot be recovered , Causing part of the code to be lost , But fortunately cms The package file of has been uploaded to the server , Interested friends can visit the link at the end of the article .

What to write today H5 Circle of friends It is also based on the author's development cms Built , I will follow suit WeChat friend circle , Take you to develop a release dynamic （ Including picture upload ） The circle of friends of . About the server part, the author will not elaborate in this article , It will be later in cms2.0 In detail .

You will reap

Use umi Quickly create one H5 Mobile applications
be based on react-lazy-load Realize the picture / Content lazy load
Use css3 Dynamically change the layout based on the number of pictures
utilize FP Create a circle of friends form
Use rc-viewer see / rotate / Zoom in and out of your circle of friends
be based on axios + formdata Realize file upload function
ZXCMS Introduce

Preview of application effect

Circle of friends list Check out the circle of friends pictures Release news

Text

Before starting the article , I would like to make a rough summary of the development H5 Mobile applications need to consider the point . For any mobile application , We all have to consider the following questions ：

First screen loading time
Adaptation problem
Page fluency
Animation performance
Interactive friendly
Provide user feedback These are not just issues for front-end engineers to consider , It's also a category for product managers and interaction designers to consider . Of course, there are many practical considerations that need to be optimized according to their own needs , The solutions to the above points are as follows ：

Increase the loading time of the first screen May adopt Resource lazy loading +gzip+ Static resources CDN To optimize , And provide loading animation to reduce user anxiety .
Adaptation problem Mobile adaptation problem can be solved through js Dynamically set the width of the viewport / ratio Or use css Media search To deal with it , There are already very mature schemes on the market
Page fluency We can do it in body Set up -webkit-overflow-scrolling:touch; To improve the flow of rolling , And you can a/img Use on label -webkit-touch-callout: none To prevent long press to generate menu bar .
Animation performance In order to improve animation performance , We can use the properties that need to be changed transform Or use absolute Positioning instead of ,transform Does not cause the page to redraw .
Provide user feedback We can provide friendly user feedback through reasonable settings toast,modal Wait to control

The above is only a few mobile optimization , There are many other solutions for front-end page performance optimization , The author has also introduced in detail in the previous article , Let's go to the main body .

1. Use umi Create an app quickly

I will adopt umi As a front-end integration solution for the project , It provides a lot of functions , It's also very convenient to use , And for the antd and antd-mobile Auto import on demand , So I'm familiar with react A friend of mine can try , The scheme of this paper is for vue It's also applicable to players , Because in any situation , Methods and thinking patterns are cross language and cross framework .

at present umi Has been upgraded to 3.0, What this article uses is 2.0, But the difference is not big , You can use it at ease 3.0. The specific steps are as follows

// umi2.0
//  New project directory 
mkdir friendcircle
//  establish umi project 
cd friendcircle
yarn create umi
//  Installation dependency 
yarn
yarn add antd-moblie

Such a umi The project is created .

2. be based on react-lazy-load Realize the picture / Content lazy load

After the project is created , Let's first analyze the technical points we need to use ： The author has studied a lot of lazy loading methods in the design , Currently adopted react-lazy-load To achieve , The benefit is that it supports loading event notification , For example, we need to do buried point or advertising reporting and other functions are very convenient . Of course, you can also pass observer API To achieve , The specific implementation plan is in A few very interesting javascript Summary of knowledge points It is introduced in the article . Specific usage ：

<LazyLoad key={item.uid} overflow height={280} onContentVisible={onContentVisible}>
    //  Components that need lazy loading 
    <ComponentA />
</LazyLoad>

react-lazy-load It's very simple to use , What you don't understand can be learned on the official website .

3. Use css3 Dynamically change the layout based on the number of pictures

At present, there is a core requirement in the list page of the circle of friends that we need to pass in different numbers of pictures when users pass in , Have a different layout , Just like wechat circle of friends , The main purpose is to let users see as many pictures as possible , Improve user experience , As shown in the figure below ： We use it js It's very convenient to realize , But it's not very performance friendly , And for every dynamic picture released by users, you need to use js Recalculate it again , As a aspiring programmer, it's impossible for this to happen , So we use css3 To achieve , In fact, about this way of realization, the author before css3 Advanced techniques are detailed in the article , We used Child node selector , The specific implementation is as follows ：

.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;
}
}

In the above code, we have a picture ,2-4 A picture ,5 The above pictures are set in different sizes , In this way, we can meet our needs , One more thing to note , When users upload images of different sizes , There is a possibility of inconsistency between high and low , At this time, in order to show consistency , We can use img In style object-fit attribute , It's kind of like background-size, We can img The note serves as a container , How to fill the container with contents , Use it completely object-fit To set up , The specific properties are as follows ：

fill The replaced content just fills the content box of the element . The entire object will fill the box completely . If the aspect ratio of the object does not match the content box , Then the object will be stretched to fit the content box
contain The replaced content will be scaled , To maintain the aspect ratio of an element as it fills its content box . The whole object fills the box while keeping its aspect ratio , So if the aspect ratio doesn't match the aspect ratio of the frame , The object will be added “ Black edge ”
cover The replaced content fills the entire content box of the element while maintaining its aspect ratio . If the aspect ratio of the object does not match the content box , The object will be clipped to fit the content box
scale-down The size of the content and none or contain One of them is the same , It depends on who gets the smaller object size between them
none The replaced content will keep its original size

So in order to keep the picture consistent , We set it up like this img Style of label ：

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

4. utilize FP Create a circle of friends form

FP Is an open-source form configuration platform , It is mainly used to customize and analyze various form models , The interface is as follows ： Through this platform, you can customize various form templates and analyze form data . Here, we only need to configure a simple friend circle publishing function , as follows ： Due to the author's computer data loss, resulting in part of the code loss , If you are interested, you can learn something about .

5. Use rc-viewer see / rotate / Zoom in and out of your circle of friends

Another important function for the circle of friends is to be able to view every dynamic picture , Similar to the image viewer of wechat circle of friends , Here the author uses the third-party open source library rc-viewer To achieve , The specific code is as follows ：

<RcViewer options={{title: 0, navbar: 0, toolbar: 0}} ref={imgViewRef}>
  <div className={styles.imgBox}>
    {
      item.imgUrls.map((item, i) => {
        return <div className={styles.imgItem} key={i}>
          <img src={item} alt=""/>
        </div>
      })
    }
  </div>   
</RcViewer>

From the above code, we only need to be in RcViewer Component to write we need to view the picture structure on the line , It provides many configuration options to use , Here I am option Configuration of the title,navbar,toolbar Are all 0, It means not showing these features , Because the mobile end only needs to have the basic view , The zoom , Switch the picture function , Lightweight as much as possible . The effect is as follows ： When we click on a picture in action , We can see the big picture of it , And switch through gestures .

6. be based on axios + formdata Realize file upload function

File upload , In addition to using antd Of upload Components , We can also combine http Request library and formdata To achieve , In order to support multi image upload and ensure the timing , We use async await function , The specific code is as follows ：

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(' Upload failed ', 2);
      }
    }

among req It is based on axios Packaged http Request Library , Support simple requests / The response to intercept , Interested friends can refer to the source code of the author .

7. ZXCMS Introduce

ZXCMS It is a commercial version developed by the author CMS, You can quickly build your own community , Blog, etc , And integrated form customization platform , Configuration center , Data distribution center and other functions , Later it will expand H5 Visual building platform and PC End station building platform , Become a more powerful open source system . The design framework is as follows ：

The specific interface is as follows ：

A community platform configured by the author ： Article details page ： Community support comments , Search articles and other functions . The following describes the background management system ： A brief introduction , Later, the author will give a special article to introduce the specific implementation and source code design .

8. Source code address

Due to the author's computer data loss , Only part of the source code can be found , So you can refer to the following address ：

Open source is not easy , Welcome to support ～

Last

If you want to learn more H5 game , webpack,node,gulp,css3,javascript,nodeJS,canvas Data visualization Wait for front-end knowledge and actual combat , Welcome to the public 《 Interesting front end 》 Join our technology group to learn and discuss , Explore the frontline... Together .

More recommendations

版权声明

本文为[Xu Xiaoxi]所创，转载请带上原文链接，感谢

https://qdmana.com/2021/05/20210531210707048g.html

文章推荐