Initiate a project mpvue
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global [email protected]
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
Fragmentation mechanism 2018.7.23+
mpvue Loader after-1.1.2-rc.2, optimize the structure after the file generating build
webpack Configuration
Considerations
new page to re npm run dev to compile
Manual
mpvue inherited from Vue.js, its technical specifications and grammatical features consistent with Vue.js
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
Framework principles
mpvue retained vue.runtime core methods, seamless inherited Vue.js of basic capabilities
mpvue-template-compiler provides the template syntax to convert vue applet wxml grammar ability
to modify the configuration vue construction of the Constructing a small program code format in line with the project structure: json / wxml / wxss / js file
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
app section:
onLaunch, initialization
onShow, when the applet is started, or from the background into the foreground display
onHide, when the applet from the foreground into the background
page section:
onLoad, monitor page load
onShow, monitor page displays
onReady, listening initial page rendering is complete
onHide, monitor page hide
onUnload, monitor page unload
onPullDownRefresh, drop-down monitor user actions
onReachBottom, pull the bottom of the page event handler
onShareAppMessage, the user clicks on the top right Share
onPageScroll, page scrolling
onTabItemTap, is the current tab page, click on the tab when the trigger
Lifecycle icon
Event Processor
// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
Bind form controls
<template>
<div>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
</div>
</template>
<script>
export default {
data () {
return {
index: 0,
array: ['A', 'B', 'C']
}
},
methods: {
bindPickerChange (e) {
console.log(e)
}
}
}
</script>
<template>
<div>
<radio-group class="radio-group" @change="radioChange">
<label class="radio" v-for="(item, index) in items" :key="item.name">
<radio :value="item.name" :checked="item.checked"/> {{item.value}}
</label>
</radio-group>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'}
]
}
},
methods: {
radioChange (e) {
console.log('radio发生change事件，携带value值为：', e.target.value)
}
}
}
</script>
Please thumbs up! Because your encouragement is the greatest power of my writing!
Blowing force exchange group: 711,613,774
