首页 HTML5前端框架正文

mpvue_用vue来写小程序

景先 前端框架 2018-03-20 2018 0

    今天逛社区的时候忽然发现一款叫mpvue的东东,以为又是某个UI组件库,点开文章一看,瞬间就被里面

的内容吸引了。

    

下面来简单介绍一下mpvue。

    

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

    

mp:mini program 的缩写

mpvue:Vue.js in mini program

主要特性

使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:


  • 彻底的组件化开发能力:提高代码

  • 完整的 Vue.js 开发体验

  • 方便的 Vuex 数据管理方案:方便构建复杂应用

  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

  • 支持使用 npm 外部依赖

  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

  • H5 代码转换编译成小程序目标代码的能力


配套设施

  • mpvue-loader 提供 webpack 版本的加载器

  • mpvue-webpack-target webpack 构建目标

  • postcss-mpvue-wxss 样式代码转换预处理工具

  • px2rpx-loader 样式转化插件

  • mpvue-quickstart mpvue-quickstart

  • mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具

  • 其它

快速上手

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry  
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

完成上述步骤后去小程序的官网下载小程序的IDE,用IDE打开当前项目,作为调试(和chrome的作用一样),如果有AppId就在小程序的IDE中输入。

生命周期

app 部分:

  • onLaunch,初始化

  • onShow,当小程序启动,或从后台进入前台显示

  • onHide,当小程序从前台进入后台

page 部分:

  • onLoad,监听页面加载

  • onShow,监听页面显示

  • onReady,监听页面初次渲染完成

  • onHide,监听页面隐藏

  • onUnload,监听页面卸载

  • onPullDownRefresh,监听用户下拉动作

  • onReachBottom,页面上拉触底事件的处理函数

  • onShareAppMessage,用户点击右上角分享

  • onPageScroll,页面滚动

  • onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)

demo

new Vue({
  data: {
    a: 1
  },
  created () {   
     // `this` 指向 vm 实例
     console.log('a is: ' + this.a)
  },
  onShow () {    
     // `this` 指向 vm 实例
     console.log('a is: ' + this.a, '小程序触发的 onshow')
  }
})
// => "a is: 1"

注意事项

  • 如果新增页面需要  npm  run dev

  • 获取page onLoad时的 options  this.$root.$mp.query

  • 获取onLaunch/onShow时的option  this.$root.$mp.appOptions

小程序的组件使用(参考文档)

        下载wp-weiui.css,在项目中import 

 采坑原因

    1. 对于一在小程序组件中为 Handler或者为EventHandle 的属性,在 mpvue 框架中要写成 vue 的

事件绑定形式,就像:bindchange写成@change

    2. 对于一些在小程序中绑定值的属性,例如上面 picker 组件中的 value,在 mpvue 框架中要写

成 :value="date"

触发取值

还是举个简单的例子,slider组件有一个bindchange属性,它是完成一次拖动后触发的事件,那么如果我们想取对应的值该怎么操作。 在小程序中:

event.detail = {value: value}

但在 mpvue中要这样写:

event.mp.detail = {value: value}

从中可以很明显地看出区别,因此要避免踩的坑:

在触发事件后如果要获取对应的值,需要写成这样: e.detail.value

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。

    评论