Interact with native apps

Use the userAgent to determine whether it is inside the APP and whether it is Android or IOS

import Vue from 'vue'
Vue.use({
    install(vue, options){
        const userAgent = window.navigator.userAgent;
        // Here appInfo is a string that needs to be confirmed to Android/IOS developers
        vue.prototype.$isApp = /appInfo/.test(userAgent);
        vue.prototype.$isAndroid = userAgent.indexOf('Andriod') > -1 || userAgent.indexOf('Adr') > -1;
        
        // Handle h5 page interaction with native
        vue.prototype.dylan_invokeToMobile = function(method, params){
            if(vue.prototype.$isAndroid){
                window.android[method](JSON.stringify(params));
            }else{
                window.webkit.messageHandlers[method].postMessage(params)
            }
        }
    }
})
Copy the code


Rem adaptation on mobile terminal

Rem adaptation on mobile terminal

  • Plugin 1 (REM adaptation) : Lib-flexible
  • Plugin 2 (REM to PX) : PostCSS-px2REM

Modify the vue.config.js file

const path = require('path');
const resolve = dir= > path.join(__dirname, dir);

module.exports = {
  publicPath: process.env.VUE_APP_BASEURL,
  chainWebpack: config= > {
    config.resolve.alias
      .set('@request', resolve('src/common/request'));
  },
  // Whether thread-loader is used for Babel or TypeScript. This option is automatically enabled when the system CPU has more than one kernel and only applies to production builds.
  // parallel: require('os').cpus().length > 1,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('postcss-px2rem') ({remUnit: 75 // The width of the design drawing /10, I have 750 width, so 750/10=75}}}})],productionSourceMap: false
  // productionGzip: true,
};
Copy the code

Modify the main.js file

import 'lib-flexible/flexible.js';
Copy the code