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