preface

Today I originally wanted to open source my own CMS application, but due to the May Day during the author’s MAC computer suddenly crashed, all the data can not be recovered, resulting in the loss of some code, but fortunately the CMS package file has been uploaded to the server, interested friends can visit the link at the end of the article.

Today to write the H5 circle of friends is also based on the development of CMS, I will imitate the wechat circle of friends, with you to develop a dynamic release (including picture upload) circle of friends application. I won’t go into detail about the server in this article, but will do so later in cms2.0.

You will reap

  • Quickly create an H5 mobile application using UMI
  • Image/content lazy loading based on React-lazy-load
  • Use CSS3 to dynamically change the layout based on the number of images
  • Create a Circle of Friends form using FP
  • Use rC-Viewer to view/rotate/scale circle images
  • Based on AXIos + FormData file upload function
  • ZXCMS introduction

Application Effect Preview

Friends List

The body of the

Before starting this article, I would like to briefly summarize the points that need to be considered when developing H5 mobile applications. For any mobile application, there are questions to consider:

  • First screen loading time
  • Adaptation problem
  • Page fluency
  • Animation performance
  • Interactive friendly
  • Providing user feedback These are not just issues for front-end engineers, but also for product managers and interaction designers. Of course, there are many practical considerations need to be optimized according to their own needs. The general solution of the above points is as follows:

  1. Improving the first screen loading time can be optimized by using resource lazy loading + Gzip + static resource CDN, and providing loading animation to reduce user anxiety.

  2. Adaptation problem The adaptation problem of mobile terminal can be handled by dynamic setting of viewport width/ratio through JS or using CSS media query, which has been very mature solutions on the market

  3. Scrolling for -webkit-overflow-scrolling on body :touch; To improve scrolling smoothness, and you can use -webkit-touch-callout: None on the A /img TAB to disallow long pressing to generate a menu bar.

  4. Animation performance To improve animation performance, we can replace the attributes that need to be changed with transform or absolute positioning. Transform does not cause page redrawing.

  5. Providing user feedback Providing friendly user feedback we can control it by setting toast, modal, etc

The above is just a small part of mobile optimization, there are many front-end page performance optimization schemes, the author has described in detail in the previous article, let’s enter the main text.

1. UseumiCreate an application quickly

The author adopts UMI as the front-end integration solution of the project, which provides a lot of functions and is very convenient to use. In addition, antD and ANTD-Mobile are automatically imported on demand, so those familiar with React can have a try. The scheme in this paper is also applicable to VUE players, because in any scenario, Methods and thinking patterns are cross-language and cross-frame.

At present, UMI has been upgraded to 3.0. In this paper, 2.0 is used, but the difference is not very big. You can rest assured to use 3.0. The detailed procedure is as follows

/ / umi2.0
// Create a new project directory
mkdir friendcircle
// Create the UMI project
cd friendcircle
yarn create umi
// Install dependencies
yarn
yarn add antd-moblie
Copy the code

So an UMI project is created.

2. Based onreact-lazy-loadImplement lazy image/content loading

After the project is created, we first analyze which technical points we need to use:

observer API
A few very interesting summaries of javascript knowledge points 

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

React-lazy-load is very simple to use. If you don’t understand it, you can learn about it on the official website.

Use 3.css3Dynamically change the layout based on the number of images

At present, there is a core requirement in the circle of Friends list page that we need to have different layouts when users pass in different numbers of pictures, just like wechat Circle of Friends. The main function is to let users see as many pictures as possible and improve user experience, as shown in the following example:

Child node selector 

.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; }}Copy the code

In the above code, we set different sizes for one picture, 2-4 pictures and more than 5 pictures respectively, so as to meet our requirements. Another thing to note is that when users upload pictures of different sizes, there may be inconsistency in height. In this case, in order to display consistent, We can use the object-fit attribute in the img style, which is similar to background-size. We can think of the img note as a container, and the contents of the container are completely set as object-fit, as follows:

  • Fill replaces the content exactly to fill the element’s content box. The entire object will completely fill this box. If the aspect ratio of an object does not match the content box, the object is stretched to fit the content box
  • Contain the replaced content will be scaled to maintain its aspect ratio while filling the element’s content box. The entire object fills the box while retaining its aspect ratio, so if the aspect ratio does not match the aspect ratio of the box, the object is added with a “black edge.”
  • The content replaced by cover fills the entire content box of the element while maintaining its aspect ratio. If the aspect ratio of an object does not match the content box, the object is clipped to fit the content box
  • The size of the scale-down content is the same as either None or Contain, depending on which of the two gets the smaller object size
  • Whatever is replaced with None retains its original size

So to keep the image consistent, let’s style the img tag like this:

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

4. Create a Friends Form using FP

FP is an open source form configuration platform, mainly used to customize and analyze a variety of form models, the interface is as follows:

5. Userc-viewerView/rotate/zoom the circle of Friends image

Another important function for the circle of friends is to view each dynamic picture, similar to the wechat circle of friends picture viewer, 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>
Copy the code

The RcViewer component provides a number of configuration options to use. The title, Navbar, and Toolbar are all set to 0. This means that these functions are not displayed, because the mobile terminal only needs basic viewing. Zoom, toggle pictures function, as light as possible. The effect is as follows:

Based on 6.axios + formdataImplement file upload function

To implement file upload, in addition to antD upload component, we can also combine HTTP request library and formData to implement, in order to support multi-image upload and guarantee 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); }}Copy the code

Req is the author based on THE AXIOS encapsulated HTTP request library, support simple request/response interception, interested friends can refer to the author source code.

7. ZXCMS is introduced

ZXCMS is a commercial CMS developed by the author, which can quickly build its own community, blog, etc., and integrates form customization platform, configuration center, data distribution center and other functions. Later, IT will expand H5 visual building platform and PC terminal site building platform, and become a more powerful open source system. The design structure is as follows:

The specific interface is as follows:

A community platform configured by the author:

8. Source address

Because the author computer data lost, can only find part of the source code, so you can refer to the following address:

  • Form customization platform source code
  • H5 circle of friends source
  • CMS online preview address

Open source is not easy, welcome to support ~

The last

If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join our technical group in the public number “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.

More recommended

  • Build a common form management configuration platform based on React (vUE)
  • Programmers must have several common sorting algorithm and search algorithm summary
  • A few very interesting summaries of javascript knowledge points
  • Front-end advanced from zero to one to achieve unidirectional & bidirectional linked list
  • Preliminary study of micro front-end architecture and my front-end technology inventory
  • Develop your own graph bed application using nodeJs
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
  • CMS full stack project Vue and React (part 2)
  • Write a mock data server using nodeJS in 5 minutes
  • Develop a component library based on VUE from zero to one
  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • Hand-write 8 common custom hooks in 10 minutes
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot