官方资料

quickstart demo项目目录详解

默认已经熟悉使用webpack开发vue项目，这里只讲src部分。同时需要了解部分小程序开发的知识。

1. mpvue项目和微信小程序的映射关系

主要关系可以在bulid/webpack.base.conf.js中推断出来。

main.js 导出的config字段编译为小程序的*.json文件，*.vue文件的template部分编译为*.wxml, script部分编译为*.js, style部分编译为*.wxss。
src/main.js和src/App.vue会被编译为小程序的app.js、app.json、app.wxss。
src/pages下的每个文件夹都对应了小程序的一个页面。每个页面都有以上的映射关系。不会递归遍历。
src/components是公共组件部分，可以使用vue的组件重用机制。
因为添加页面会改变bulid/webpack.base.conf.js中的entry配置，所以需要重启webpack(ctrl + c, npm run dev)才能生效
支持微信小程序原生组件，事件处理方式需要改为vue方式。

下拉刷新和上拉加载事件

pages/custom-page/index.vue

<template>
  <div class="wrapper">
    CustomPage
  </div>
</template>

<script>
  export default {
    name: 'CustomPage',
    methods: {
      
    },
    onReachBottom() {
      console.log('searchScrollLower')
    },
    onPullDownRefresh() {
      console.log('PullDownRefresh');
    }
  }
</script>

pages/custom-page/main.js

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

export default {
  config: {
    navigationBarTitleText: '自定义组件',
    enablePullDownRefresh: true
  }
}

Vuex的使用

vuex官方文档

使用示例

可以自定义一个Vue插件，把vuex store 挂在到 $store，在src/main.js里import一下就行了。这样就可以在不同的页面直接使用this.$store获取同一个store对象了。

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import remind from '../pages/remind/store'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

Vue.use({
  install(Vue, options) {

    Vue.prototype.$store = new Vuex.Store({
      state,
      mutations,
      // 使用了vuex的模块化。
      modules: {
        remind
      },
      strict: debug
      // plugins: debug ? [createLogger()] : []
    })
  }
})

src/pages/remind/store.js

// initial state
const state = {
  test1: 'test1'
}

// getters
const getters = {
}

// actions
const actions = {
}

// mutations
const mutations = {
  test1nn(state, nv) {
    state.test1 = nv || 'test1nn'
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}