1 pixel on mobile? Px to REM? 300 ms delay? Do activity single page lead to Apple android wechat signature problem? It doesn’t exist.

I used to do mobile phone H5, like to make vUE single page application, so in the development of wechat related applications, often because of the single page application in Apple and Android browser for each page of the URL mechanism is not the same, often lead to page face to face signature failure. There is also a constant jump from other applications with parameters to a page of a single page application to load the entire single page application, and you have to deal with tedious things like routing and permissions, so why not make it a multi-page application?

Github.com/xusenlin/vu…

This is to do a lot of H5 activities organized out of a project, even when directly cloned out of the installation like UI library into development, share with you. It is then recommended to install Vant. Of course, there are many beautiful UI libraries, as follows (part)

  1. vant npm i vant -S
  2. ydui npm install vue-ydui --save
  3. vux npm install vux --save
  4. mint-ui npm i mint-ui -S

Vue Multiple Pages

Project setup

npm install
Copy the code

Compiles and hot-reloads for development

npm run dev
Copy the code

Compiles and minifies for production

npm run build
Copy the code

A multi-page vUE mobile template based on vuE-CLI3 scaffolding

Added mobile terminal related tools such as 1PX question, 300s click delay, PX auto transfer rem tool, and wechat signature and request encapsulation, etc

Directory Structure

| | - dist / / package directory - SRC / / source directory | | - API/interface/API directory | | -- user. Js / / user logs in, picture upload, modify the password and other related user API | | - assets / / static resources, Your CSS, images, fonts, etc. | | - components / / global components | | - config / / application configuration file | | - app. Js / / application configuration, name, API request url, | | - page. The js / / configuration, each page title, | | - utils/function/tool. The same as config and API, it is recommended to categorize clearly. . | | - app js / / commonly used function | | - request. Js / / request package | | -- weixin. Js / / WeChat JSSDK encapsulation, Please install use weixin - js - SDK | | -- setHtmlFontSize. Js / / set the font size, root element with rem do screen adaptation | | - pages / / page view. Inside the folder is recommended to use big hump, because it's good - - | | | - index / / front page | -- common. Js/public/js, Can lead to public CSS, vue UI library etc. | - gitignore / / ignore file | -- page. Config. Js / / the use of the node to read pages folder folder configuration to the vue cli3 | -- vue. Config. Js / / Vue cli configuration | -- README. Md / / instructionsCopy the code

instructions

  • Use normalize.css to reset the style.
  • Added the AXIOS request library and did a simple interception.
  • Added FastClick to address 300ms click delay on mobile.
  • To add your own UI library, install the common.js reference.
  • Add postCSS-px2REM to automatically convert PX to REM for mobile terminals. Currently, in order to be compatible with most UI libraries, the width of the design is set to 375, which can be modified by itself.
  • To add a page, create a directory in the Pages folder and place index.js and index. vue in it (you are advised to copy the template folder and change the name for development). When compiled, the name of the directory is the name of the page. And why? Check out page.config.js.