Record the potholes that individuals step into when developing applets using MPvue from 0

This document is only a record of personal development encountered pits, is not very professional, I hope to bring some help to readers, reduce the time cost of finding information when encountering the same problem

1. File directory

/ / file directory build ├. -- -- -- -- -- -- -- build js ├ - check - version. Js · · · · · · └ -- -- -- -- - webpack. Prod. Config. Js config ├ -- -- -- -- - dev. Env. Js ├ -- -- -- -- -- index. Js └ -- -- -- -- - prod. Env. Js dist/in/after packaging code folder |... | SRC ├ -- -- -- -- -- commponents / / component | └ -- -- -- -- - card. Vue ├ -- -- -- -- -- Pages | └ -- -- -- -- -- the index page / / folder | ├ -- -- -- -- -- index. The vue. / / the main WXML & index. The vue. WXML & main. WXSS | ├ -- -- -- -- - main. Json / / Main. Json | └ -- -- -- -- - main. Js. / / the main js ├ -- -- -- -- - app. Json / / routing configuration ├ -- -- -- -- - app. Vue / / app WXSS & app. WXML ├ -- -- -- -- - main. Js / / App. Js ├ -- -- -- -- -- the static / / static resources | ├ | -- -- -- -- -- images └ - tabs... └ -- -- -- -- -- project. Config. Json / / small application configuration fileCopy the code

2. The bugA solution has been found

<template>
    <div class="login">
        <div class="input-group flex">
            <div class="input-row flex-item">
                <input 
                    type="number" 
                    maxlength="11" 
                    class="block" 
                    placeholder="Login Account" 
                    v-model="account.value"
                    @blur="hideClear('account')"
                    @focus="handleShowClear('account')"
                    @input="handleShowClear('account')"
                >
                <div 
                    class="clear" 
                    v-show="account.is_clear"
                    @tap="clearInput('account')"
                >
                    <img src="/static/icons/[email protected]">
                </div>
            </div>
        </div>
        <div class="input-group flex">
            <div class="input-row flex-item">
                <input 
                    type="text" 
                    class="block" 
                    placeholder="Verification code" 
                    v-model="password.value"
                    @blur="hideClear('password')"
                    @focus="handleShowClear('password')"
                    @input="handleShowClear('password')"
                >
                <div 
                    class="clear" 
                    v-show="password.is_clear"
                    @tap="clearInput('password')"
                >
                    <img src="/static/icons/[email protected]">
                </div>
            </div>
            <div class="input-row get-vertifly" @click="timeCountDown"</span> </div> </div> <button class="login-btn"</button> </div> </template> <script>export default {
    data() {// If the object level in data is too deep, there will be a bug that the data cannot be updatedreturn// Form: {// account: {// value:' ',
            //         is_clear: false
            //     },
            //     password: {
            //         value: ' ',
            //         is_clear: false
            //     },
            // },
            account: {
                value: ' ',
                is_clear: false
            },
            password: {
                value: ' ',
                is_clear: false
            },
            timer: null,
            timeCount: 60,
            text: defaultText,
            isAjax: false}}, methods: {clear icon hideClear(type) {
            this[type].is_clear = false}, // Display clear icon handleShowClear(type) {
            let $that = this[type]
            let is_clear;
            if ($that.value) {
                is_clear = true
            } else {
                is_clear = false} // This judgment reduces the number of data modifications and reduces the performance consumptionif ($that.is_clear ! == is_clear) { this[typeIs_clear = is_clear} // this.form[typeIs_clear = is_clear // Here is the printed result after executing the code commented above // weird behavior, // console.log(this.form.account) // {__ob__} => {value:' ', is_clear: false }
            // console.log(JSON.stringify(this.form.account))   // "{ 'value': '', 'is_clear': true }"}, // Clear the corresponding input box clearInput(type) {
            this[type].value = ' '; },}} </script> <style> /** * background-image can't be used in CSS. */.login {margin-top:.7rem; padding: 0 .56rem; } .input-group { border-bottom: 1px solid#d8d8d8;
    line-height: .56rem;
    margin-bottom: .28rem;
}
.input-group .input-row {
    position: relative;
    padding: .3rem 0;
}
.input-row .clear {
    position: absolute;
    top: 0;
    right: 6rpx;
    bottom: 0;
    margin: auto 0;
    width: .36rem;
    height: .36rem;
    font-size: 0;
    line-height: 0;
    z-index: 3;
}
.clear img {
    display: block;
    width: 100%;
    height: 100%;
}
.input-row input {
    font-size: .4rem;
}
.get-vertifly{
    font-size: .28rem;
    color: # 888;
    width: 2rem;
    text-align: center;
}
.login-btn {
    margin: .6rem .2rem 0;
    line-height: .88rem;
    height: .88rem;
    background: linear-gradient(90deg,#f22320 0%,#ff5b79 100%);
    box-shadow: 0 5px 8px 0 #ee0809;
    border-radius: .56rem;
    font-size: .34rem;
    color: #fff;
    font-weight: 500;
}
</style>
Copy the code

3. How do I import an external CSS file

// Create a new app. CSS file in SCR folder // Open the.vue file to import CSS, such as app. vue <script> // Try several import methods,'@/src/app.css'I have not tried the import method of'./app.css'

export default {
    data() {
        return {
            // code
        }
    }
}
</script>
Copy the code

4. Use within the projectfly 或 axios

  1. useflyio

    Install modules firstnpm install flyio or yarn add flyio

    Start configuration: 
    / / open... \ build \ webpack base. Conf. Js filealias: {
  'vue': 'mpvue'.The '@': resolve('src') // This configuration is added only to facilitate the introduction of flyio modules, and the wx at the end indicates the introduction of applets related modules'wxFly': 'flyio/dist/npm/wx'
}
Copy the code
    // create the fly.js file import wxFly from in the SRC directory'wxFly'// Here is wxFlyalias// const Fly = require(const Fly = require("flyio/dist/npm/wx"); Const fly = new wxFly() // instantiate flyio const url ='http://xxx.xxx.com/xxx/xx'/ / add interceptors fly. Interceptors. Request. Use ((config, promise) = > {/ / for all requests to add custom header / / codereturnconfig; }) // Add responder interceptor, responder interceptor will be inthen/ catch processing performed before fly. Interceptors. Response. Use ((response) = > {if(Response.status === 200) {// Only the data field of the request result is returnedreturn response.data
        } else{}}, (err) => {// network error will go here}) fly.config.baseURL = urlexport default fly
Copy the code
    SRC /main.js import Vue from'vue'
import App from './App'

import './app.css'// You can import the global CSS import fly from'./fly.js'// Import the previously configured fly file vue.config.productionTip =false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

Vue.prototype.$http= fly // preferably in app.$mountAfter the code, mount Fly to the Vue prototypeCopy the code
  2. useaxios

    Same old rule. Install modulesnpm install axios or yarn add axios

    Configuration mode andflyioSimilar, just look it upapiFollow the documentation to customize the configuration 
    // The only difference is... \ build \ webpack base. Conf. Js filealias: {/ /...'axios': 'axios/dist/axios'
}
Copy the code

5. Use global variables in appletsglobalData

Use ‘this.$root.$mp.app’. Global variables implemented in this way can’t get cached data after executing the applets route method to jump to ‘page’. Global variables that are freely available throughout the project are implemented as follows.

Vuex is recommended for large projects that require global variables, but only for small projects

//./ SRC /main.js file app$mount() // Must be placed in the app.$mountConst app = new Vue(app) const app = new Vue(app) Prototype. GlobalData = getApp(). GlobalData // Mount globalData to Vue prototype // mount globalData to Vue prototype // this.globalData. XXX = XXXCopy the code

6. Small programspageParameter transfer between

// Applet related methods are all in the global variable mpvuelet url = '.. /setting/main? id=xxx'NavigateTo ({url}) // Console. log(this) in setting.vue.$root.$mp.query) // => { id: 'xxx' }
Copy the code

Write in the last

These are all the relevant dependencies in MPvue that I am currently using. All the relevant configurations in this article only apply to the following dependency configuration version, and other versions have not been tried yet. Readers can test them by themselves

  "dependencies": {
    "flyio": "^ 0.6.14"."mpvue": "^ 2.0.0." "
  },
  "devDependencies": {
    "babel-core": "^ 6.22.1"."babel-loader": "^ 7.1.1." "."babel-plugin-transform-runtime": "^ 6.22.0"."babel-preset-env": "^ 1.3.2." "."babel-preset-stage-2": "^ 6.22.0"."babel-register": "^ 6.22.0"."chalk": "^ 2.4.0." "."connect-history-api-fallback": "^ 1.3.0"."copy-webpack-plugin": "^ 4.5.1." "."css-loader": "^ 0.28.11"."cssnano": "^ 3.10.0"."eventsource-polyfill": "^ 0.9.6"."express": "^ 4.16.3"."extract-text-webpack-plugin": "^ 3.0.2." "."file-loader": "^ 1.1.11"."friendly-errors-webpack-plugin": "^ 1.7.0"."glob": "^ 7.1.2." "."html-webpack-plugin": "^ 3.2.0"."http-proxy-middleware": "^ 0.18.0." "."mkdirp": "^ 0.5.1"."mpvue-loader": "^ 2.0.0." "."mpvue-template-compiler": "^ 2.0.0." "."mpvue-webpack-target": "^ 1.0.3"."optimize-css-assets-webpack-plugin": "^ 3.2.0"."ora": "^ 2.0.0." "."portfinder": "^ 1.0.13"."postcss-loader": "^ 2.1.4." "."postcss-mpvue-wxss": "^ 1.0.0"."prettier": "~ 1.12.1." "."px2rpx-loader": "^ 0.1.10"."relative": "^ 3.0.2." "."rimraf": ^ "server"."semver": "^ 5.3.0." "."shelljs": "^ 0.8.1"."uglifyjs-webpack-plugin": "^ 1.2.5." "."url-loader": "^" 1.0.1."vue-style-loader": "^ 4.1.0." "."webpack": "^ 3.11.0"."webpack-bundle-analyzer": "^ 2.2.1." "."webpack-dev-middleware-hard-disk": "^ 1.12.0"."webpack-merge": "^ 4.1.0." "."webpack-mpvue-asset-plugin": "^ 2.0.0." "."webpack-mpvue-vendor-plugin": "^ 2.0.0." "
  },
Copy the code

To be continued…