Small program development framework: MPVUE (1) The first small program development framework: MPVUE (2) project code analysis small program development framework: MPVUE (3) Complete a positive and clean MPVUE start-up project
Any language/framework learning can not be separated from the actual practice of the project, this article will start by the actual operation of a project to learn all aspects of wechat small program and VUE technology;
1: First of all, let’s introduce a component in the home page of the small program, and introduce how the parent component and child component interact with each other
This chapter mainly involves knowledge points
1. Use of wechat component image 2. How to customize/introduce components 3. Let a DIV cover the rest of the page. 4. Three techniques for component interaction
1. Use of wechat component image
<image class="welcome" mode='aspectFit' :src="welIcon"></image>
Copy the codeWechat applet provides an image component to replace the IMG tag in HTML, which can realize image clipping and zooming more quickly. The above code uses the image component of wechat and sets its mode to aspectFit, which means that the aspect ratio is maintained to scale the picture so that the long side of the picture can be fully displayed. In other words, images can be displayed completely. Of course, mode has many Settings, which will not be introduced here. You just need to remember that the image component of wechat can set image clipping and zooming through mode
2. How do I customize/import components
<template>
</template>
<script>
exportDefault {// This is just the name of the component.'LoginModule'.data () {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
Copy the codeBy default, a component contains template,script, and style. With this foundation, we can write our own vue component. On line 9, we call this component LoginModule
Then we import the LoginModule component in the parent component pages/ Indexs /index.vue. There are three main steps: 1) Import the component through import
import LoginView from '@/components/login'
Copy the code2) Declare this component in components
components: {
LoginView
},
Copy the code3) Use this component in the template
<template> <! Because the login may be done elsewhere, the login page is wrapped into a separate component --> <div class="container">
<div class="title">
<p class="loginPeople" v-if="isShowLoginPeople">{{loginWho}}</p>
<image class="welcome" mode='aspectFit' :src="welIcon"></image>
</div>
<div class="login"> <! <login-view v-bind:inputName= <login-view v-bind:inputName="name" v-on:clickLogin="showLoginPeople"></login-view>
</div>
</div>
</template>
Copy the codeThere are a few things to note here: 1) Import is followed by the name of the component, and the name in the components should be the same as it. 2) Templeta can now use the component in LoginView. Such as line 10
3. Fill the rest of the page with a div
<template> <! Because the login may be done elsewhere, the login page is wrapped into a separate component --> <div class="container">
<div class="title">
<p class="loginPeople" v-if="isShowLoginPeople">{{loginWho}}</p>
<image class="welcome" mode='aspectFit' :src="welIcon"></image>
</div>
<div class="login"> <! <login-view v-bind:inputName= <login-view v-bind:inputName="name" v-on:clickLogin="showLoginPeople"></login-view>
</div>
</div>
</template>
Copy the codeThe page has two divs, one title, and one login, and we want login to cover the rest of the layout as follows
.login{
width: 100%;
position: absolute;
top: 150px;
bottom: 0px;
left: 0px;
background: #ea5c54;
}
Copy the codeThe idea here is to take the element out of the document flow by absolute counterpoint and position it to the bottom, where bottom and left are both 0, as long as top is the height of the title div
4. Three techniques for component interaction
1) Child component communicates with parent component
The child emits events that the parent listens for via this.$emit, and when the parent receives an event call, the parent emits its methods
methods: {
login () {
let userName = this.inputName
this.$emit('clickLogin', userName)
}
}
Copy the codeAs above, the child component defines a login method, and when the Login method is called, a clickLogin method is published, somewhat like a broadcast;
<div class="login"> <! <login-view v-bind:inputName= <login-view v-bind:inputName="name" v-on:clickLogin="showLoginPeople"></login-view>
</div>
Copy the codeAs shown above, when the parent refers to the child, register a listener, line 3 here, that fires its own showLoginPeople method when it receives a clickLogin broadcast from the child. The showLoginPeople method is defined below
methods: {
showLoginPeople (user) {
}
}
Copy the codeThe parameter user here is the value passed by the child component
2) Parent component communicates with child component
The child component defines the props property to receive values from the parent component
props: {
inputName: String,
required: true
},
Copy the codeThe parent component passes the corresponding value through v-bind
<login-view v-bind:inputName="name"></login-view>
Copy the code3) Non-parent-child component communication: we communicate through VUex
We first need to understand the following concepts of VUex. In order to explain it in a less official way, I will use popular language to describe it
3.1) State refers to the data that can be maintained in the state management defined by you. 3.2) getters refers to the data that you can obtain by means of getters or operate on the data maintained. 3.3) Mutations use synchronous methods to modify the maintained data. 3.4) Action uses asynchronous methods to operate mutation. You can regard Action as an encapsulation of Mutations, and the biggest difference between action and mutations is that $store. State = $store. State = $store. It is a mapping of mutations, which is also used to simplify operations
Here’s what we’re going to do, and you’d better do it yourself, or it’s an armchair strategist
1) When the applet starts, a value ‘sail’ is passed to the child LoginModule and displayed in the user name edit box. 2) When the user clicks the login button, the parent page displays the user name that is currently logged in. 3) When the user clicks the login button, the user name is stored via Vuex
Results the following
<template> <! Because the login may be done elsewhere, the login page is wrapped into a separate component --> <div class="container">
<div class="title">
<p class="loginPeople" v-if="isShowLoginPeople">{{loginWho}}</p>
<image class="welcome" mode='aspectFit' :src="welIcon"></image>
</div>
<div class="login"> <! <login-view v-bind:inputName= <login-view v-bind:inputName="name" v-on:clickLogin="showLoginPeople"></login-view> </div> </div> </template> <script> // Import the component as import, so you can use LoginView to use the component. Because of the camel's name, you can use xx-xx // In earlier versions of MPvue, instead of importing the component with the @ symbol, import the component with the ~ symbol LoginView from'@/components/login'
export default {
components: {
LoginView
},
data () {
return{// welcome to welIcon:'/static/welcome.png'// Default login name name:'Set sail'// Whether to display the user name isShowLoginPeople:false,
loginWho: ' '
}
},
methods: {
showLoginPeople (user) {
this.isShowLoginPeople = true
this.loginWho = 'What you are logging in to is' + user
let whoLogin = this.$store.state.userName
console.log('**whoLogin**'</script> <style scoped> body {/* Clear the page margin and padding */ margin: 0px; padding: 0px; } /* For page compatibility, the login div needs to fill the rest of the page. The idea here is to take the element out of the document flow by deciding to counterpoint it and position it to the bottom, with both bottom and left 0. */. Title {width: 100%; height: 150px; position: relative; background:#ea5c54;
}
.welcome{
width: 126px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.login{
width: 100%;
position: absolute;
top: 150px;
bottom: 0px;
left: 0px;
background: #ea5c54;
}
</style>
Copy the code2) Sub-component code
<template>
<div class="loginParent">
<div class="userContain">
<img class="userIcon" src="/static/name.png">
<input class="userInput" placeholder="Username" maxlength="16" type="text" v-bind:value="inputName" v-model="inputName" ref="username">
</div>
<div class="login_fields__password">
<img class="icon-password" alt src="/static/pasword.png">
<input class="input-password" v-bind:type="inputType" placeholder="Password" maxlength="16">
</div>
<div class="login_fields__submit">
<input type="button" value="Login" @click="login">
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
exportDefault {// This is just the name of the component.'LoginModule',
props: {
inputName: String,
required: true
},
data () {
return {
inputType: 'password'MapMutations is an auxiliary function, and mapActions/mapMutations simply bind the action/mutation function to your methods. When you adjust the methods in the method as usual to pass the parameter can be ok. . mapMutations(['setUserName'], // equivalent to this.$store.commit('setUserName'.'Specific value passed'), submit the methodlogin () {
let userName = this.inputName
this.setUserName(userName)
this.$emit('clickLogin', userName)
}
}
}
</script>
<style>
.userContain{
margin-top: 30px;
margin-left: 70px;
}
.userIcon {
display: inline-block;
width: 26px;
height: 26px;
}
.userInput {
display: inline-block;
width: 140px;
border-style: solid;
border-width: 1px;
font-size: 12px;
margin-left: 20px;
}
.login_fields__password{
margin-top: 30px;
margin-left: 70px;
}
.icon-password {
display: inline-block;
width: 26px;
height: 26px;
}
.input-password {
display: inline-block;
width: 140px;
border-style: solid;
border-width: 1px;
font-size: 12px;
margin-left: 20px;
}
.login_fields__submit {
margin-top: 90px;
}
</style>
Copy the code3) VuEX
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'Use (Vuex) // state is similar to the attributes/state of this class // getters, through which the attributes/state can be obtained and modified // mutations, Similar to a submit operation,mutations are generally a synchronous method that changes the attributes, status, and/or actions of the class, The main difference between actions and mutation is that actions can contain an asynchronous operation called // mapGetters, which is a helper function that simply maps getters in the store to local computed properties. Const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {const state = {'Chivalrous Tenderness'} const store = new vuex. store ({state, getters, actions, mutations})export default store
Copy the codeThe specific project can be downloaded at the following link: MPVUE Project Practice 1