Writing in the front

I have been engaged in two mobile terminal projects for four months. This blog is a summary of my experience in mobile terminal projects, which is convenient for follow-up search and browsing. Thank you for your advice. At the same time, I also hope that my project experience can help you, please criticize and correct the shortcomings, thank you for your support.

Project summary

1. Mobile terminal adaptation scheme (Custom-mobile REm.js)

The default blue Lake layout is 750px and uses REM layout. On a 750px wide screen, 1rem = 100px. Dynamically change the pixel value corresponding to 1rem according to the width ratio between different phone screens and blue Lake designs.

//rem.js
// Rem.js needs to be introduced in main.js
! function (window) {
  var docWidth = 750;
  var doc = window.document,
    docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var recalc = (function refreshRem() {
    var clientWidth = docEl.getBoundingClientRect().width;
    docEl.style.fontSize = 50 * (clientWidth * 2 / docWidth) + 'px';
    returnrefreshRem; }) (); docEl.setAttribute('data-dpr'.window.navigator.appVersion.match(/iphone/gi)?window.devicePixelRatio : 1);
  if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
    doc.documentElement.classList.add('ios');
    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_? (\d+)? /) [1].10) > =8)
      doc.documentElement.classList.add('hairline');
  }
  if(! doc.addEventListener)return;
  window.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false); } (window);
Copy the code

2. The idea of componentization

In the VUE project, the idea of componentization is used to design the code, and the parameter is passed by props. Define props in the sub-component:

  props: {
    type: {
      required: false.type: String.default: 'colorful'.validator: (val) = > {
        return ['single'.'colorful'].includes(val)
      }
    }
  }
Copy the code

Calling a child component from a parent component:

 <Category type="single" @select-category="selectedCategory" />
Copy the code

3. Font translation

Use vUE + VUE-I18N library for font translation.

4. Style penetration

Use & /deep/. To penetrate the class name to be modified

 <style lang="stylus" scoped>
  .artist-detail-wrap
    height 2.74 rem ! important
    & /deep/ .van-sticky--fixed
      z-index 1 ! important
 </style>
Copy the code

5. The configured style does not take effect

Stylus is sensitive to Spaces, and clicking on a space in VS Code converts the indentation to a space.

6. Data transfer between parent and child components

  • A parent component calls a child component’s method

In the parent component,

<AddToCartButton ref="toCart" :product="detail" :is_show_button="false" />
Copy the code
methods: {
    addToCart() {
      this.$refs.toCart.togglePopupStatus(true)}}Copy the code

Subcomponent addToCartButton. vue,

    methods: {
     togglePopupStatus(status, is_check_out) {
        this.is_select_specifications = false
        this.is_show_popup = status
        this.is_check_out = is_check_out
      },
    }
Copy the code
  • The child component passes events to the parent component

Child component: this.$emit(‘ name ‘, parameter to be passed) Parent component: @name

  • The child component passes data to the parent

Pass parameters using props. For details, see 2. Componentization Idea

7. For products with the same ID, click to return to the top

  • Using route GuardbeforeRouteUpdate(to, from, next) (This approach is incorrect because routes are not updated)
  • Window.reload (using this method, the page flashes and the user experience is bad)
  • Document. The documentElement. ScrollTop = 0 (user experience better, because of the fast, on to the naked eye can not see is sliding up)
  methods: {
     fetchNewProductData(id) { 
       this.$swiper.slideTo(0)
       // Jump to the same product
       // The vue-router route is not changed
       if (id === Number(this.$route.params.id)) {
         this.$emit('resetSwiperIndex')
         document.documentElement.scrollTop = 0
         return
       }
       this.$router.push({ params: { id } })
     },
   }
Copy the code

8. Synchronous and asynchronous

  • Synchronization: Code executes sequentially, such as single-threaded JS.
  • Asynchronous: Code executes out of order, as in CSS.

Read the differences between clientX, offsetX, screenX and pageX

10. Web optimization

  • Image:

(1) Use JPG as much as possible, if not necessary, use PNG format for simple and colorful pictures; (2) PNG format can be converted to PNG8; (3) Use SVG and font ICONS more. If CSS can achieve the image effect, use CSS, or use webP format files; (4) Use the picture tag, you can choose the best picture of different formats.

  • CSS:

(1) For nuxT-link components with preloading function, add the following code in nuxt.config.js to prohibit preloading globally;

The router: {prefetchLinks: false,}Copy the code

(2) Cancel the use of @import CSS (this method will affect the parallel download of CSS)

  • There is only one @import CSS, which will be downloaded first. After the CSS file is downloaded and parsed, another CSS file will be downloaded.
  • If there are multiple @import CSS, the download order of supporting files will be upset. Js files placed next to @import CSS may be downloaded first.
  • Solution: Use the preload mode of the link tag to preload CSS files, and use onload to load resources asynchronously.
<link href="https://at.alicdn.com/t/font_1181549_5y7691l57ll.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
Copy the code
  • Font:

The TTF format can be converted to woff2 format. If the woff2 file is used in the custom icon, you can preload the Woff2 file. If a data URI is used in the loading method, it can be converted to the data URL type because it cannot take advantage of the browser cache, is too large, and blocks rendering. (It can be deleted from the Woff2 file to reduce the size of the woff2 file. Pass the woff2 file address to the data URL.

  • Page optimization on PC:

Stay tuned for more updates

11. VS Code plug-ins

  • Auto Rename Tag
  • AutoFileName
  • Beautify
  • Chinese (Simplified) Language Pack for Visual Studio Code
  • Code Runner
  • Easy LESS
  • HTML CSS Support
  • language-stylus
  • Live Server
  • open in browser
  • Path Autocomplete
  • Prettier
  • Simple icons
  • Stylus
  • Vetur
  • View In Browser
  • Vue 3 Snippets
  • Vue 3 Support – All In One

Write in the last

It is extremely rewarding to record and summarize project experiences online, leaving footprints for future generations to read after death. The mobile end project experience will be summarized here for the time being. If there are new mobile end projects, we will continue to summarize the PC end project experience, JS customizer development experience, handwritten promise and Element UI Select component.