mpvue: vuejs和小程序碰撞出来的火花

时间  2019-11-15
标签 mpvue vuejs 程序 碰撞 出来 火花 繁體版
原文   原文链接

微信自推出小程序以来，热度一直居高不下，各大公司开始专门开发小程序，可是小程序自定义的wxml和wxss和本身定义的语法，让被三大框架统治的前端江湖头疼不易，由于须要专门为小程序开发一套代码来维护，也徒增了学习成本，中间虽有支持vuejs语法的wepy独领风骚，也是须要学习wepy的语法，直至今年3月，mpvue横空出世，也获得了vuejs做者的力推，之后有可能变为vuejs的标准 css

图片描述

框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。（这段直接copy的）  有了mpvue以后，开发小程序的体验直接上升一个档次html

  • 终于能够用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项目脚手架vue

  3. 进入mpvue-demo目录，执行npm install && npm run dev启动项目 而后打开微信开发者工具，打开mpvue-demo目录，就进入了mpvue的世界 先看下mpvue的src目录，也就是源码目录结构 vue-cli

    图片描述

基本看不出这是一个小程序项目，而后咱们打开/pages/counter/index.vue看下npm

<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作一个todolist小程序

<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: ['^pages/counter/main'], 这样counter页面就变成了首页， 这时候小程序的开发者工具应该就能显示出一行 hello mpvue的字样，若是没变化，能够看下命令行，多是代码规范不符合 api

图片描述

咱们写的，都是单纯的html+css+vue的语法，可是已经可以在小程序里继续运行了，而后咱们来继续，尝试渲染一个列表bash

<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的数据结构进行扩展，加入done字段

<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获取列表初始化todos便可

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>


复制代码

固然，这只是一个很是简单的demo，可是也涉及到不少的能力，包括渲染列表，事件绑定，计算属性，生命周期等等，咱们能够感觉到mpvue的强大之处，彻底使用vuejs的语法开发项目，这是mpvue系列文章教学的第一篇，后面咱们介绍更复杂的mpvue如何开发 最后广告一下，欢迎你们关注我在慕课网的实战课程mpvue+koa2全栈开发小程序的课程，欢迎你们支持

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程