初始化一个 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 vue-cli@2.9
- # 4. 创建一个基于 mpvue-quickstart 模板的新项目
- # 新手一路回车选择默认就可以了
- $ vue init mpvue/mpvue-quickstart my-project
- # 5. 安装依赖, 走你
- $ cd my-project
- $ NPM install
- $ NPM run dev
小程序项目配置
image.PNG
分包机制 2018.7.23+
mpvue-loader 1.1.2-rc.2 之后, 优化了 build 后的文件生成结构
webpack 配置
注意事项
新增的页面需要重新 NPM run dev 来进行编译
使用手册
mpvue 继承自 vue.js, 其技术规范和语法特点与 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
框架原理
mpvue 保留了 vue.runtime 核心方法, 无缝继承了 Vue.JS 的基础能力
mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
修改了 vue 的建构配置, 使之构建出符合小程序项目结构的代码格式: JSON/wxml/wxss/JS 文件
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
App 部分:
onLaunch, 初始化
onShow, 当小程序启动, 或从后台进入前台显示
onHide, 当小程序从前台进入后台
page 部分:
onLoad, 监听页面加载
onShow, 监听页面显示
onReady, 监听页面初次渲染完成
onHide, 监听页面隐藏
onUnload, 监听页面卸载
onPullDownRefresh, 监听用户下拉动作
onReachBottom, 页面上拉触底事件的处理函数
onShareAppMessage, 用户点击右上角分享
onPageScroll, 页面滚动
onTabItemTap, 当前是 tab 页时, 点击 tab 时触发
生命周期图示
image.PNG
事件处理器
- // 事件映射表, 左侧为 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'
- }
表单控件绑定
- <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>
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/8c50bfb48b80