mpvue: искры от столкновения vuejs и апплета

внешний интерфейс Командная строка Vue.js mpvue
mpvue: искры от столкновения vuejs и апплета

С момента запуска мини-программ WeChat популярность оставалась высокой, и крупные компании начали разрабатывать мини-программы, однако пользовательские wxml и wxss мини-программ и их собственный синтаксис вызвали головную боль у фронтенд-рек и Lakes доминируют три основных фреймворка, т.к. необходимо разрабатывать набор кода специально для обслуживания апплета, что также увеличивает стоимость обучения. чтобы изучить синтаксис wepy.До марта этого года mpvue родился и получил с толчком автора vuejs, он может стать стандартом vuejs в будущем

图片描述

Фреймворк основан на ядре Vue.js, а mpvue модифицирует среду выполнения и реализацию компилятора Vue.js, чтобы он мог работать в среде апплета, тем самым предоставляя весь набор возможностей разработки Vue.js для разработки апплета. (Этот абзац напрямую скопирован) С mpvue опыт разработки апплета напрямую поднимается на новый уровень.

  • Наконец-то можно использовать npm
  • Используйте html+css (scss)
  • Полный опыт разработки vue, все однофайловые компоненты .vue
  • Быстро инициализируйте проекты с помощью инструмента командной строки Vue.js vue-cli
  • Поддержка Vuex Без лишних слов, давайте сначала попробуем

Среда установки

  1. Каждый должен реализоватьnpm install vue-cli -gУстановите vue-cli и апплетинструменты разработчика

  2. воплощать в жизньvue init mpvue/mpvue-quickstart mpvue-demoЗатем пройдите весь путь, чтобы войти, вы получите строительные леса проекта mpvue.

  3. Войдите в каталог mpvue-demo и выполнитеnpm install && npm run devЗапустите проект, затем откройте инструмент разработчика WeChat, откройте каталог mpvue-demo и войдите в мир mpvue. Сначала посмотрите на каталог src mpvue, который является исходной структурой каталогов.

    图片描述

Практически невозможно увидеть, что это небольшой программный проект, и тут мы открываем/pages/counter/index.vueпосмотри

<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>

Это полностью компонент vuejs, без какого-либо синтаксиса апплета, давайте сейчас удалим весь контент и попробуем сделать список задач с помощью 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>

После модификации открытьsrc/main.jsИзмените конфигурацию страниц, чтобы перейти кpages: ['^pages/counter/main'],Таким образом, страница счетчика становится домашней страницей. В это время инструмент разработчика апплета должен иметь возможность отображать строку hello mpvue.Если нет изменений, вы можете посмотреть в командной строке.Возможно, спецификация кода не соответствует требованиям.

图片描述

То, что мы написали, это чистый синтаксис html+css+vue, но он может продолжать работать в апплете, а затем давайте продолжим и попробуем отобразить список

<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: ['吃饭', '睡觉', '慕课学习']
    }
  }
}
</script>

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

Мы добавили ul и li и использовали v-for для отображения списка. Давайте попробуем добавить пользовательский ввод, чтобы добавить запись. Нам нужно использовать теги input и button, а также обработку событий vuejs @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: ['吃饭', '睡觉', '慕课学习']
    }
  },
  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>

图片描述

Затем мы добавляем еще одну функцию, чтобы попробовать вычисляемые свойства и визуализацию стиля. Добавляем время клика к каждому событию, которое можно пометить как завершенное и отображать удаленный стиль. Нам нужно расширить структуру данных todos и добавить поле "Готово"

<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: '吃饭', done: false},
        {text: '睡觉', done: false},
        {text: '慕课学习', 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>

图片描述

Нам также нужно отобразить прогресс, который был завершен, а также кнопку очистки, здесь нам нужно вычисляемое свойство vuejs


<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: '吃饭', done: false},
        {text: '睡觉', done: false},
        {text: '慕课学习', done: false}
      ]
    }
  },
  computed: {
    todoNum () {
      return this.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>

图片描述

Наконец, когда мы добавляем локальное хранилище, оно сохраняется в localStorage при каждом изменении и снова инициализируется.createdВ функции жизненного цикла получите список из localStorage для инициализации задач.

API-документация

图片描述

Обратите внимание, что в середине есть операция обновления, при следующем входе вы все равно можете сохранить предыдущее состояние, все коды следующие

<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: [
      ]
    }
  },
  // 计算属性
  computed: {
    todoNum () {
      return this.todos.filter(v => !v.done).length
    }
  },
  // created生命周期，组件创建后执行
  created () {
    // 从本地存储里获取数据
    this.todos = wx.getStorageSync('todos') || []
  },
  methods: {
    // 清空已完成的事情
    clearTodo () {
      this.todos = this.todos.filter(v => !v.done)
      this.updateStorage()
    },
    // 更新本地存储
    updateStorage () {
      wx.setStorageSync('todos', this.todos)
    },
    // 添加事件
    addTodo () {
      if (!this.mytodo) {
        return
      }
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ''
      this.updateStorage()
    },
    // 设置事件状态
    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>

Конечно, это всего лишь очень простая демонстрация, но она также включает в себя множество возможностей, включая списки рендеринга, привязки событий, вычисляемые свойства, жизненные циклы и т. д. Мы можем почувствовать мощь mpvue, который полностью разработан с использованием синтаксиса проекта vuejs, это первая часть серии обучающих статей по mpvue, а позже мы расскажем, как разрабатывать более сложные mpvue. Последнее объявление, приглашаю всех обратить внимание на мои практические курсы на MOOC.comКурс разработки полного стека апплета mpvue+koa2, вы можете поддержать

Категории