mpvue: vuejs和小程式碰撞出來的火花

蝸牛老溼發表於2018-05-21

微信自推出小程式以來，熱度一直居高不下，各大公司開始專門開發小程式，但是小程式自定義的wxml和wxss和自己定義的語法，讓被三大框架統治的前端江湖頭疼不易，因為需要專門為小程式開發一套程式碼來維護，也徒增了學習成本，中間雖有支援vuejs語法的wepy獨領風騷，也是需要學習wepy的語法，直至今年3月，mpvue橫空出世，也得到了vuejs作者的力推，以後有可能變為vuejs的標準

框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。（這段直接copy的）有了mpvue之後，開發小程式的體驗直接上升一個檔次

終於可以用npm了
使用html+css(scss)
完全的vue開發體驗，全部.vue單檔案元件
使用 Vue.js 命令列工具 vue-cli 快速初始化專案
支援 Vuex 廢話不多說，我們先來體驗一下

安裝環境

需要大家執行 npm install vue-cli -g安裝vue-cli和小程式的開發者工具
執行vue init mpvue/mpvue-quickstart mpvue-demo 然後一路回車下去，你就得到了一個mpvue專案腳手架
進入mpvue-demo目錄，執行npm install && npm run dev啟動專案然後開啟微信開發者工具，開啟mpvue-demo目錄，就進入了mpvue的世界先看下mpvue的src目錄，也就是原始碼目錄結構

基本看不出這是一個小程式專案，然後我們開啟/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做一個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的字樣，如果沒變化，可以看下命令列，可能是程式碼規範不符合

我們寫的，都是單純的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的資料結構進行擴充套件，加入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全棧開發小程式的課程，歡迎大家支援

WeScale 技術篇 —— mpvue 與微信小程式的火花
2018-04-08
Vue微信小程式
WebFlux 和 Spring Security 會碰出哪些火花？
2021-09-09
WebUXSpring
AI和網路的結合，會碰撞出怎樣的火花？
2020-07-08
AI
當 RocketMQ 遇上 Serverless，會碰撞出怎樣的火花？
2020-04-27
MQServer
美顏api和AI智慧美妝碰撞出了怎樣的火花？
2021-11-19
APIAI
疫情之下，大資料和物流行業將“碰撞出怎樣的火花”？
2021-09-29
大資料行業
雲原生＋新技術，會碰撞出怎樣的火花？
2023-03-09
區塊鏈+教育行業，會碰撞出怎樣的火花？
2018-11-14
區塊鏈行業
小程式分包（原生+mpvue）
2018-08-10
Vue
mpvue開發小程式
2018-11-14
Vue
mpvue外賣小程式
2018-09-08
Vue
[小程式] mpVue 踩坑
2018-07-14
Vue
小程式mpvue-echarts的使用
2019-06-26
VueEcharts
mpvue小程式踩坑之旅
2019-03-05
Vue
mpvue 小程式框架入門
2018-08-01
Vue框架
使用mpVue構建小程式
2018-05-03
Vue
當智慧交通遇上大資料，會碰撞出什麼樣的火花？
2018-05-15
大資料
3D列印與大資料會碰撞出什麼樣的火花？
2018-06-12
3D大資料
微信小程式搭建mpvue+vant
2019-04-02
微信小程式Vue
mpvue寫一個CPASS小程式
2018-09-02
Vue
mpvue開發小程式總結
2018-10-15
Vue
美團小程式框架mpvue蹲坑指南
2018-04-05
框架Vue
使用mpvue開發微信小程式
2018-05-15
Vue微信小程式
適配mpvue平臺的的微信小程式日曆元件mpvue-calendar
2019-03-04
Vue微信小程式元件
第一個mpvue小程式開發完了，來總結下吧
2019-03-04
Vue
基於mpvue的微信小程式專案搭建
2019-03-03
Vue微信小程式
mpvue & 小程式開發過程中的坑
2019-03-04
Vue
基於mpvue的仿滴滴出行小程式
2018-07-02
Vue
微信小程式搭建mpvue+vant+flyio
2019-04-03
微信小程式Vue
使用mpvue搭建一個初始小程式
2018-12-01
Vue
美團小程式框架mpvue入門教程
2018-04-03
框架Vue
mpvue開發音訊類小程式踩坑和建議
2019-03-11
Vue音訊
“碰一碰”版本的藍芽鍵盤，來啦！
2021-07-27
藍芽
小程式與WebRTC聯姻能擦出怎樣的火花？
2018-08-30
Web
用mpvue實現的微信小程式版cnode社群
2018-04-30
Vue微信小程式
使用 Mpvue 開發微信小程式的最佳實踐
2018-05-17
Vue微信小程式
使用mpvue開發github小程式總結
2018-08-21
VueGithub
mpvue小程式開發 - 生命週期梳理
2018-11-02
Vue

mpvue: vuejs和小程式碰撞出來的火花

安裝環境

相關文章