概述悔详，因?yàn)樾〕绦蚱脚_(tái)原因(比如不能操作DOM，BOM)波材，所以還不能完全實(shí)現(xiàn)vue的功能酿愧。
官方資料
quickstart demo項(xiàng)目目錄詳解
默認(rèn)已經(jīng)熟悉使用webpack開發(fā)vue項(xiàng)目，這里只講src部分政敢。同時(shí)需要了解部分小程序開發(fā)的知識(shí)其徙。
1. mpvue項(xiàng)目和微信小程序的映射關(guān)系
主要關(guān)系可以在
bulid/webpack.base.conf.js中推斷出來。
main.js導(dǎo)出的config字段 編譯為小程序的*.json文件喷户，*.vue文件的template部分編譯為*.wxml,script部分編譯為*.js,style部分編譯為*.wxss唾那。src/main.js和src/App.vue會(huì)被編譯為小程序的app.js、app.json褪尝、app.wxss闹获。src/pages下的每個(gè)文件夾都對(duì)應(yīng)了小程序的一個(gè)頁面。每個(gè)頁面都有以上的映射關(guān)系河哑。不會(huì)遞歸遍歷避诽。src/components是公共組件部分，可以使用vue的組件重用機(jī)制璃谨。因?yàn)樘砑禹撁鏁?huì)改變
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的使用
使用示例
可以自定義一個(gè)Vue插件拱雏，把vuex store 掛在到
$store棉安，在src/main.js里import一下就行了。這樣就可以在不同的頁面直接使用this.$store獲取同一個(gè)store對(duì)象了铸抑。
- 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
}
src/main.js
import './store'
