Micro channel small program construction based on MPVue

[TOC]

1. Create projects

Refer to the MPvue five-minute tutorial

#Global installation vUE - CLI
$ npm install --global vue-cli

#Create a new project based on the MPvue-QuickStart template
$ vue init mpvue/mpvue-quickstart my-project

#Install dependencies
$ cd my-project
$ npm install
#Start the build
$ npm run dev
Copy the code

At this point, you see a new ==dist== folder (the new template is probably dist/wx), which is the generated applet code. At this point, you just need to start the wechat developer tool, create a small program project, and debug.

The project preview is as follows:

2. mpvue-entry

github

Centralized page configuration, automatically generates entry files for each page, optimizes directory structure, and supports hot update of new pages

There are two ways to use it:

Method 1: Directly use the MPvue-Entry template

vue init F-loat/mpvue-quickstart my-project
Copy the code

Method 2: Manually install MPvuE-Entry and modify the relevant Webpack packaging code

#Install mpvue - entry
npm i mpvue-entry -D
Copy the code

const MpvueEntry = require('mpvue-entry')

module.exports = {
  entry: MpvueEntry.getEntry({
    pages: 'src/pages.js'.dist: 'dist/wx/'   / / attention!!!!!!!!!! The configuration here should be consistent with build.assetsroot in congig/index.js}),... plugins: [new MpvueEntry(),
    ...
  ]
}

Copy the code

// Remove the following configuration from the project generated by the official template
module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: '**/*.json'.to: ' '}, {context: 'src/'}),... ] }Copy the code

// pages.js
module.exports = [
  {
    path: 'pages/news/list'.// The page path, which is also the path of the vue file relative to SRC, is mandatory
    config: { // Page configuration, i.e. contents of page.json, optional
      navigationBarTitleText: 'Article List'.enablePullDownRefresh: true}}]Copy the code

3. mpvue-router-patch

github

Use vue-router compatible route writing in MPVUE

#The installation
npm i mpvue-router-patch -S
Copy the code

// main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)
Copy the code

// New 'SRC /router' folder SRC ├─router ├─routes.js // ├─components.js // Page corresponding component ├─index.js // Whole vue-router configuration......Copy the code

// webpack.base.conf.js
// Modify the configuration of mpvue-Entry
module.exports = {
  entry: MpvueEntry.getEntry({
    pages: 'src/router/routes.js'.// Share the route configuration with vue-router
    dist: 'dist/wx/'}),... }Copy the code

Mpvue-router-patch = mpvue-router-patch = mpvue-router-patch = mpvue-router-patch

4. Status management

vuex

vuex-persistedstate

#Vuex has been selected when the mpvue template is used to create projects
npm install vuex --save

#Install Vuex-PersistedState to make the VUEX state persistent
npm install vuex-persistedstate --save
Copy the code

SRC /store ├─store ├─index.js SRC /store ├─mudule.const.js SRC /store ├─store ├─index.js This allows you to use ├─ other module files that need to be split...... in both template and scriptCopy the code

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // state data persistence
import appConst from './module.const'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: [    // State that needs to be persisted
        'token'].storage: window.sessionStorage  // Persistent storage})].state: {
    token: ' '.counter: 0
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    appConst
  }
})

Copy the code

// src/store/module.const.js
Vuex module: constant management
export default {
  state: {
    ORDER_STATUS_PAID: 'paid'}}Copy the code

// src/main.js
import store from './store/index'

const app = newVue({ store, ... App })Copy the code

5. Vant Weapp

Vant Appellate is a version of Vant, the appellate mobile component library, that provides a consistent API to help developers quickly build appellate apps based on the same visual specifications.

Vant Weapp

Small program NPM support

Applets custom components

Step 1 Install Vant pervasive components

#Install vant weapp

cd your/path/to/dist
npm init 
npm i vant-weapp -S --production
Copy the code

== Note: Try to use NPM, not CNPM, to install Vant retry. Because CNPM installed in node_modules directory to generate _vant – [email protected] @ vant – weapp directory, so go to during the construction of the second step NPM, A corresponding [email protected] @vtant-pervasive directory is generated in the miniprogram_npm directory. The following component declarations are required:

"usingComponents": {
    "van-button": "/ miniprogram_npm / _vant - [email protected] @ vant - weapp/button/index"
  }
Copy the code

No doubt, this will be a big problem if you need to upgrade components later.

Step 2 wechat developer tools to build NPM

Click on the developer Tools menu bar: Tools –> Build NPM

Check the “Use NPM module” option: Settings – Project Settings

At this point, the miniprogram_npm directory is generated in the node_modules parent directory, which is where we reference the third-party component

Step 3. Use Vant retry P components

"/ / app.json "usingComponents": {"van-button": "/miniprogram_npm/ app-appellate /button/ appellate "}Copy the code

// Use <div class= in vue"demo-container">
    <div class="demo-title"> button </div> <div class="demo-row">
        <label><van-button type="default"> Default button </van-button></label> <label><van-buttontype="primary"</van-button></label> </div> <div class="demo-row">
        <label><van-button type="warning"> Warning button </van-button></label> <label><van-buttontype="danger"> Danger button </van-button></label> </div> </divCopy the code

== Note: == The ignored file needs to be modified and set dist/wx/package.json file as not ignored

#.gitignoredist/wx/* ! dist/wx/package.jsonCopy the code

6. flyio

Fly.js is a promising, lightweight and powerful Javascript HTTP web library. Currently, fly.js supports Node.js, wechat applets, Weex, React Native, Quick App and browser.

fly

// install NPM install flyio -sCopy the code

// As our program needs to access different business interfaces, the basic address, request format and return format of these business interfaces are different // Therefore, different business interface modules are created. If the interface is single and standard, Here multiple interface modules are not required SRC ├─ API ├─index.js // fly object creation and unified configuration ├─ brank. js // Different business interface modules ├─order.js ├─ other business interface modules......Copy the code

// src/api/index.js
Flyio /dist/ NPM /wx; H5 needs to use Flyio /dist/ NPM /fly
import Fly from 'flyio/dist/npm/wx';

/** * Create a request instance with the default configuration * to make requests to different interface providers, in the corresponding business interface file specific configuration */
export default function () {
  return new Fly();
}

Copy the code

// src/api/branch.js
import createHttp from './index';

let api = createHttp();
api.config.baseURL = 'https://your/api/base/path/';  // Note: applets support only HTTPS and WSS protocols
api.interceptors.response.use(
  (response) = > {
    return response.data;
  },
  (err) => {
    return Promise.resolve(err); })const getBranchList = function () {
  return api.get('/branch.json');
}

export {
  getBranchList
}

Copy the code

// Business code xx.vue
import {getBranchList} from '@/api/branch';

/ /...
getBranchList().then(data= > {
    this.branches = data || [];
    this.branchesLoading = false;
}).catch(err= > {
    console.error(err);
    this.branchesLoading = false;
})
Copy the code

7. css

CSS preprocessor

Wechat applet supports most CSS, but has limited support for CSS selectors. Vant appellate has been introduced in this project to significantly reduce CSS workload, so CSS preprocessors are not used for the time being. Supplement it later when it is necessary to introduce it.

The fonts icon

This project uses Ant Design’s official icon library from Alibaba Vector Icon Library (Iconfont). The introduction process is as follows:

Step 1. Select an icon and download it to the local PC

Step 2. Copy iconfont. CSS and iconfont. TTF from downloaded code to SRC /style/icon

Step 3. Modify the iconfont. CSS file to define only TTF for the SRC part of the font

/*iconfont.css*/

@font-face {font-family: "iconfont";
  src: url('iconfont.ttf? t=1543540389274') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

.iconfont {
  font-family:"iconfont" ! important;
  font-size:25px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-minus-circle-fill:before { content: "\e844"; }

.icon-plus-circle-fill:before { content: "\e845"; }
Copy the code

Step 4. Use

<icon class="iconfont icon-minus-circle-fill" style="font-size: 40px; color: #ccc"></icon>
Copy the code

== Remarks == : The downloaded font files need to be transferred to Base64, I do not know why, there is no conversion, there is no problem in the developer tools, if there is a problem in the future to supplement.

Other 8.

Wx modular

Modularize wX objects to leave holes for future H5

Package code adjustment

There are two main adjustments

• Debug code and production code are packaged into separate folders

The original package codes NPM Run Dev and NPM Run Build were both compiled into the dist folder, which was not easy to distinguish. After adjustment, the debugging code was compiled into the dist folder, and the production environment code was packaged into the dist folder

• NPM package support

Copy dist/miniprogram_npm code to appeap during NPM run build to support third-party package dependence.

9. Overall directory structure

After the above work, the overall directory structure is as follows:

Mall ├ ─ the build / / builder ├ ─ congfig / / environment configuration ├ ─ dist / / small program code (debug code) ├ ─ wx ├ ─... ├─ MPvue compiled after the small program code ├─...... │ ├─ Miniprogram_npm │ ├─package.json │ ├─ SRC │ ├─ API │ ├─components │ config │ ├─params.js │ pages │ // Page ├─ Router // Route ├─store // Vuex ├─style // Global Style ├─ Icon ├─ Iconfont-.ttF ├─common.css ├─utils ├─ Index.js ├─app.js ├─ app.vue ├─ download.json ├─ app.vue ├─app.js ├─ app.vue ├─app.js ├─ download.json ├ ─...Copy the code