Mpvue: Sparks from the collision of vuejs and applets

WeChat since the launch of small programs, has been high heat, companies began to develop a small program, but the small program custom WXML and WXSS and define your own grammar, let ruled by three framework the front end of the river’s lake have a headache is not easy, because of the need to specifically for small program to develop a set of code to maintain, also increases the learning cost, Although Wepy, which supports vuejs syntax, is leading the way, it is also necessary to learn wePY syntax. Until March this year, MPVue was born, which has been strongly promoted by vuejs authors, and may become the standard of VUejs in the future

The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development. With MPVue, the experience of developing small programs goes up a notch

Finally, NPM
Using HTML + CSS (SCSS)
Full VUE development experience, all.vue single file components
Use vue-CLI command line tool vue.js to quickly initialize the project
Without further ado, let’s try Vuex

Installation environment

NPM install vue-cli -g install vue -CLI and small program developer tools
Execute vue init mpvue/mpvue-quickstart mpvue-demo and press enter all the way down to get a scaffold for your mpvue project
Go to the mpvue-demo directory, execute NPM install && NPM run dev to start the project and then open wechat developer tools, open the mpvue-demo directory, and enter the world of MPvue

It doesn’t look like this is a small program, so let’s go to /pages/counter/index.vue and have a look

<template>
  <div class="counter-warp">
    <p>Vuex counter：{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>

    <a href="/pages/index/main" class="home"</a> </div> </template> <script> // Use Vuex import store from'./store'

export default {
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')},decrement () {
      store.commit('decrement')
    }
  }
}
</script>

<style>
.counter-warp {
  text-align: center;
  margin-top: 100px;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>

Copy the code

Completely a vuejs component, without any of the syntax of the applet, let’s now delete everything and try to make a Todolist out of Vuejs

<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
  </div>
</template>

<script>

export default {
  data () {
    return {
      title: 'Hello Mpvue'
    }
  }
}
</script>

<style>
.title{
  color:#ed12a3;
  text-align: center;
}
</style>

Copy the code

SRC /main.js to change the configuration of pages: [‘^pages/counter/main’], so that the counter page becomes the home page, at this time the applet developer tool should be able to display a line of hello mpvue, if there is no change, can look at the command line, maybe the code specification does not meet

What we’ve written is pure HTML + CSS + VUE syntax, but we can still run it in a little program, so let’s go ahead and try to render a list

<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
    <ul class="todos">
      <li v-key='i' v-for='(todo,i) in todos'>{{todo}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      title: 'Hello Mpvue',
      todos: ['eat'.'sleep'.'MooC Learning']
    }
  }
}
</script>

<style>
.title{
  color:#ed12a3;
  text-align: center;
}
ul.todos{
  margin:20px;
}
</style>

Copy the code

We added UL and LI and used V-for to render the list. Now let’s try adding user input to add a record using input and button tags and vuejs event handler @click

<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
    <input type="text" v-model='mytodo'>
    <button @click='addTodo'</button> <ul class="todos">
      <li v-key='i' v-for='(todo,i) in todos'>{{todo}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      mytodo: ' ',
      title: 'Hello Mpvue',
      todos: ['eat'.'sleep'.'MooC Learning']
    }
  },
  methods: {
    addTodo () {
      if(! this.mytodo) {return
      }
      this.todos.push(this.mytodo)
      this.mytodo = ' '
    }
  }
}
</script>

<style>
.title{
  color:#ed12a3;
  text-align: center;
}
ul.todos{
  margin:20px;
}
input{
  border:2px solid #ed12a3;
}
</style>

Copy the code

Then we added another function to try calculating properties and rendering styles, adding a click time for each event, marking it as done, and displaying the deleted styles. We needed to extend the toDOS data structure to include the Done field

<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
    <input type="text" v-model='mytodo'>
    <button @click='addTodo'</button> <ul class="todos">
      <li 
        v-for='(todo,i) in todos'
        v-key='i'
        :class="{'done':todo.done}"
        @click='toggle(i)' 
        >{{todo.text}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      mytodo: ' ',
      title: 'Hello Mpvue',
      todos: [
        {text: 'eat'.done: false},
        {text: 'sleep'.done: false},
        {text: 'MooC Learning'.done: false}
      ]
    }
  },
  methods: {
    addTodo () {
      if(! this.mytodo) {return
      }
      this.todos.push(this.mytodo)
      this.mytodo = ' '}, toggle (i) { this.todos[i].done = ! this.todos[i].done } } } </script> <style> .title{ color:#ed12a3;
  text-align: center;
}
ul.todos{
  margin:20px;
}
input{
  border:2px solid #ed12a3;
}
.done{
  text-decoration: line-through;
}
</style>

Copy the code

We also need to show the progress we’ve made and the empty button, which is where the calculated properties of vuejs are needed


<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
    <input type="text" v-model='mytodo'>
    <button @click='addTodo'</button> < button@click ='clearTodo'</button> <ul class="todos">
      <li 
        v-for='(todo,i) in todos'
        v-key='i'
        :class="{'done':todo.done}"
        @click='toggle(i)' 
        >{{todo.text}}</li>
        <li>
          {{todoNum}}/{{todos.length}}
        </li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      mytodo: ' ',
      title: 'Hello Mpvue',
      todos: [
        {text: 'eat'.done: false},
        {text: 'sleep'.done: false},
        {text: 'MooC Learning'.done: false}
      ]
    }
  },
  computed: {
    todoNum () {
      returnthis.todos.filter(v => ! v.done).length } }, methods: {clearTodo() { this.todos = this.todos.filter(v => ! v.done) },addTodo () {
      if(! this.mytodo) {return
      }
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ' '}, toggle (i) { this.todos[i].done = ! this.todos[i].done } } } </script> <style> .title{ color:#ed12a3;
  text-align: center;
}
ul.todos{
  margin:20px;
}
input{
  border:2px solid #ed12a3;
}
.done{
  text-decoration: line-through;
}
</style>

Copy the code

Finally, we add localStorage, which is stored in localStorage every time it changes, and initialize todos by getting the list from localStorage in the created lifecycle function

The API documentation

Note that there is a refresh operation in the middle, the next entry can still save the previous state, the whole code is as follows

<template>
  <div class="mpvue-demo">
    <p class="title">{{title}}</p>
    <input type="text" v-model='mytodo'>
    <button @click='addTodo'</button> < button@click ='clearTodo'</button> <ul class="todos">
      <li 
        v-for='(todo,i) in todos'
        v-key='i'
        :class="{'done':todo.done}"
        @click='toggle(i)' 
        >{{todo.text}}</li>
        <li>
          {{todoNum}}/{{todos.length}}
        </li>
    </ul>
  </div>
</template>

<script>

exportDefault {// Datadata () {
    return {
      mytodo: ' ',
      title: 'Hello Mpvue', todos: []}}, // Computed properties computed: {todoNum () {
      returnthis.todos.filter(v => ! V.one).length}}, // created lifecycle, executed after component creationcreatedGetStorageSync () {this.todos = wx.getStoragesync () {this.todos = wx.getStoragesync ();'todos') | |} [], the methods: {/ / clearing has been completedclearTodo() { this.todos = this.todos.filter(v => ! V.done) this.updatestorage ()}, // Update local storageupdateStorage () {
      wx.setStorageSync('todos', this.todos)}, // Add eventsaddTodo () {
      if(! this.mytodo) {return
      }
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ' 'Toggle (I) {this.todos[I].done =! this.todos[i].done this.updateStorage() } } } </script> <style> .title{ color:#ed12a3;
  text-align: center;
}
ul.todos{
  margin:20px;
}
input{
  border:2px solid #ed12a3;
}
.done{
  text-decoration: line-through;
}
</style>


Copy the code

Of course, this is just a very simple demo, but there are a lot of capabilities involved, including rendering lists, event binding, calculating properties, life cycles, etc. We can see the power of MPVue, and develop projects using vuejS syntax entirely. This is the first in a series of mpVue articles. Mpvue + KOA2, mpvue+ koA2, mpvue+ KOA2, mpvue+ KOA2

Mpvue: Sparks from the collision of vuejs and applets

Installation environment

Related Posts

Canvas realizes the picture around the cup, and imitates the deformation command in PSD to realize the distortion and deformation of the picture

Construction of virtual IP load balancing cluster mode of micro service management platform NACOS

Self-checklist of a [qualified] front end engineer