Project introduction

Currently issue is only for a module information module of the article to share in the App and App downloads, follow-up will also have more features, extensible, scalable to project combines the practice of before I set up the project project address, if this simple program can bring you help, please give little brother ⭐ Star is good (cartridge) manually.

function

  • Get data based on shared article ids
  • The APP can be opened or downloaded from the web page
  • Special treatment of wechat platform
    • Scheme is shielded on wechat platform, and the function of opening APP on the article page needs to be opened in the browser with a floating window prompt
    • In wechat, IOS can remind you of the APP Store, while Android needs to remind you of the floating window

Technical Instructions

Vue,VueRouter and Vuex are three pieces

Axios

Vex2 and Axios development note: Because Axios uses Promise, use ES6-Promise with older browsers

Vuex-router-sync

Vuex-router-sync data function: The data from the router is injected into the Store for easy call. In this project I used this plug-in to get the article ID on the URL

Vue-meta

Vue-meta Data function: Change some tag values on the page Head. In this project, I used the plugin to change the Title on the article page to make the Title less dull in the browser.

Mobi.css

Mobi. CSS file features: small and elegant mobile CSS layout library in this project, I do not want to use too large UI framework and do not want to write too many styles, so I chose it.

Vue-infinite-loading

Vue-infinite-loading data: To relieve the embarrassment of blank page when loading data, you can customize loading animation.

The key to realize

Get the article ID at the URL

After consulting with the APP students, we defined the address of the shared article in the way of http://xxxx/article/:id, and the page requested the corresponding data by obtaining the ID on the URL. I am using Vuex – the router – sync directly from the Store ID rootState. The route. The params. ID

/ SRC/files/modules/action
/** Get the article information */
export const getArticle = ({ rootState, commit }) = > {
  return new Promise((resolve, reject) = > {
    axios({
      method: 'get'.url: 'share/news_details'.params: {
        news_id: rootState.route.params.id
      }
    })
    .then((response) = > {
      commit(types.ARTICLE, response.data.data)
      resolve(response)
    })
    .catch((error) = > {
      reject(error)
    })
  })
}Copy the code

Retrieves environmental differences in Store

In the operation of each page, we need to identify whether the current system is IOS or Android. It is too troublesome to identify the string in UA through the re every time, so I put it in Store to facilitate the use of all components

/ SRC/files/modules/store
const state = {
  system: (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) ? 'IOS' : 'Android'),
  article: {},
  isWeixin: (/MicroMessenger/ig).test(navigator.userAgent)
}Copy the code

Handle exceptions properly

We may encounter failure when loading data, so we need to have a good processing of the page. Here, I mainly use vue-infinite loading to achieve the effect on the page.

_onInfinite () {
  this.getArticle().then((a)= > {
    // Loading disappears after completion
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
  })
  .catch((a)= > {
    // Display the page after the exception in the slot="no-results" section below
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')})}Copy the code
<infinite-loading :on-infinite="_onInfinite" ref="infiniteLoading" spinner="bubbles">
  <span slot="no-results">I feel like I'm in a strange place</span>
  <span slot="no-more"></span>
</infinite-loading>Copy the code

Keep-alive components are reused

This is a page performance enhancing tag that caches used inactive components rather than destroying them. On less capable phones, where template rendering takes time, we can use this tag to cache used components (pages) and refresh the data inside when the component is active. The activated lifecycle is used for activation

activated

  activated () {
    this.clearArticle() // Clear the data in the Store before activating because $InfiniteLoading initiates requests based on page height
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')}Copy the code

Specification of component code

Always build your app as a module, with each sub-module doing one thing. Vue. Js is designed to help developers develop interface modules better. A module is an independent part of an application.

We need to organize our *.vue files in such a way that the components are easy to understand.

  • Export a clear, organized component that makes your code easy to read and understand. It also facilitates standardization.
  • Sorting properties alphabetically, data, computed, watches, and Methods make properties easy to find.
  • Organize the components so that they are easy to read. (name; extends; props, data and computed; components; watch and methods; Lifecycle methods, etc.) ;
  • Use the name attribute. Use Vue DevTools to make testing easier
  • Reasonable CSS structure, such as BEM or RSCSS – details? ;
  • Use a single file.vue file format for component code

In conjunction with ESLint, code will be written in a more formal and readable way. I use the Standard style and enable Standard verification in VScode. You can also refer to the vue.js component coding specification in this article

The last

It seems that this project is simple, but in fact, many plug-ins are used to realize it, which requires a strong hand (there are many third-party holes, so to choose a good plug-in, you have to go to Github first to check the author’s code quality). It needs to maintain certain flexibility to facilitate future expansion and avoid excessive design. If you want to speed up your development, check out Vue Awesome, most of which are high quality plugins, and many of the wheels are manufactured.