Basic introduction to

Mpvue: (github address) is a front-end framework for developing applets using vue.js. Vant Appellate: Appellate version of Vant, a mobile Vue component library, that provides consistent apis based on the same visual specifications to help developers quickly build appellate apps. Fly.js: a promising, request-forwarding, powerful HTTP request library that supports all JavaScript runtime environments. This allows you to reuse as much code as possible across multiple ends.

1. Install mpvue

The entire process of creating a new project based on the MPvue-QuickStart template
$node.js $Node -v # 2. Due to reasons known to all, can consider to switch the source to the taobao source $NPM registry https://registry.npm.taobao.org/ # 3. $NPM install --global vue-cli # 4. $vue init mpvue/ mpvue-quickStart my-project # 5. $CD my-project $NPM install $NPM run devCopy the code
Here is the template configuration information (if you are not sure what it means, you can just press Enter)
$ vue init mpvue/mpvue-quickstart mpvuedemo    // mpvuedemo is the name of the project file. After running, a folder with this name will be generated under the directory

? Project name (mpvuedemo)  // Project name
? Project name mpvuedemo
? wxmp appid (touristappid) wx***********    // Project appID
? wxmp appid wx**********
? Project description (A Mpvue project)   // Project description
? Project description A Mpvue project
? Author () XXXXXX    // Project author
? Author XXXXXX
? Vue build (Use arrow keys)
? Vue build runtime
? Use Vuex? (Y/n) y  // Whether to use Vuex
? Use Vuex? Yes
? Use ESLint to lint your code? (Y/n) n  // Whether to use ESLint? Use ESLint to lint your code? No ? Small program test, please pay attention to the latest wechat developer tools "test report" function? Small program test, please pay attention to the latest wechat developer tools "test report" functionCopy the code

2. Install Vant retry component libraries

Here is the address for Vant Syndrome

① Clone warehouse

Create a local folder and run the command

git clone https://github.com/youzan/vant-weapp.git
Copy the code
② Copy the dist folder to the /static/vant/ directory of your project.

Create a vant folder in the static folder of your project and copy all the files in the dist folder to the /static/vant/ directory of your project. (Below is the contents of the dist folder)

③ Introducing components

Import the component in the main.json file in the directory of the page where you want to use the component. To use button, TAB, image and other components in the index.vue file, you only need to add the following code to the main.json file under the index folder

④ Use it on the page

Just use it directly in the.vue file

<van-button> <van-button> <van-tabs active="{{active}}" bind:change="onChange"> <van-tab title=" tabs "> </van-tab> <van-tab title=" TAB "> </van-tab title=" TAB "> </van-tab title=" TAB "> </van-tab> </van-tabs>Copy the code

3. Install fiyio

Here is fiyio’s official website address

npm install flyio
Copy the code

(2) use the CDN

<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
Copy the code

**③ Add the flyio.js file to the utils folder ** (we want to encapsulate the data request in this file)

import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()

const host = "https://rmall.ukelink.net"  // Data request URL

// Add request interceptor
fly.interceptors.request.use((request) = > {
    wx.showLoading({
        title: "Loading".mask:true
    });
    console.log('request___________________',request);
    request.headers = {
        "X-Tag": "flyio".// 'content-type': 'application/json'
        'content-type': 'application/x-www-form-urlencoded'
    };

    let authParams = {
        // Public parameters
        // "categoryType": "SaleGoodsType@sim",
        // "streamNo": "wx18542dc630fea2a4",
        // "reqSource": "MALL_H5",
        // "appid": "wx18542dc630fea2a4",
        // "timestamp": new Date().getTime(),
        // "sign": "string"
    };

    request.body && Object.keys(request.body).forEach((val) = > {
        if(request.body[val] === "") {deleterequest.body[val] }; }); request.body = { ... request.body, ... authParams }return request;
});

// Add a response interceptor
fly.interceptors.response.use(
    (response) = > {
        wx.hideLoading();
        return response.data;// If the request succeeds, the value will be returned
    },
    (err) => {
        // Request error, according to return status code to determine the cause of the error
        console.log(err);
        wx.hideLoading();
        if(err){
            return "Request failed"; }; }); fly.config.baseURL = host;export default fly;
Copy the code

④ Import Import in the main.js file

import Vue from 'vue'
import App from './App'
// Add the following two lines
import fly from './utils/flyio.js'
Vue.prototype.$fly = fly;

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()
Copy the code

⑤ Use method in the page

export default {
	onShow() {
		console.log('onShow,onShow,onShow_________') 		
		this.$fly.request({
				method:"post".// Post/GET request mode
				url:"/mms/country/queryValidZoneListForMallHome".body: {// Name :'qianbuduo', //
				}
			}).then(res= >{
				console.log(res)
			}).catch(err= >{
				console.log(err)
			})	  		
		},
}


Copy the code

That’s it, and we can happily start working on our project

Finally is a personal mpvue development encountered a little problem to remind you

When using the Notify function of Vant, you need to refer to the Notify function of Vant twice. The page will be quoted again. And add the van-notify tag to the page. Otherwise, an error will be reported (van-notify not found, please check whether the selector and context are correct).

<template> <div class="homePage"> <van-notify id="van-notify"></van-notify> </div> </template> <script> import Notify from '@/.. /static/vant/notify/notify.js' ...... </script>Copy the code