拾钱运
拾钱运

mpvue学习之路

前面同志分享的步骤和现阶段有些差异：本人现阶段学习的是v 2.0.0
文档：http://mpvue.com/mpvue/quickstart.html
mpvue是美团点评团队出品的小程序框架
传送门：https://www.jianshu.com/p/8f779950bfd9
WePY是由腾讯团队推出的小程序组件化开发框架

image.png

uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布ios、android、H5以及各种小程序（微信、支付宝、百度、头条，钉钉、QQ）
传送门 https://uniapp.dcloud.io/

目录结构

类似于vue目录

  • main.js+App.vue:这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体
    image.png

    mian.js为入口文件
    image.png

    webpack需要修改的地方
    传送门：http://mpvue.com/build/
    小程序每个页面的配置和全局的配置有专门的json文件管理，全局的是app.json，每个页面时main.json
    image.png

app.json文件

"pages":[
  "pages/index/main" //路径为main.js，不是index.vue
]

main.js

import vue from 'vue'
import App from './index'  //index.vue
const app=new vue(App)
app.$mount() //手动挂载

与vue的不同

跳转页面：

去往Vuex示例页面1

新增页面（新建文件的时候）需要npm run dev 注意：新增文件必须重新启动，编译器不会自动检测新加入的文件

mpvue的局限性

1.在模板中，动态插入html的v-html指令不可用
可以使用 wxParse(https://github.com/icindy/wxParse)来实现
2.在模板中，用于数据绑定的双括号{{}}中的表达式存在诸多限制
在vue本身模板内{{}}，我们可以对绑定变量进行比较丰富的处理，比如：

  • 可以调用methods下的函数：例如：
  • vue中如果变量是对象的话，也可以调用对象的成员方法
{{msg.trim().split(',').json('#')}}
  • vue中可以使用过滤器来处理变量，最有用的场景算是格式化数据了
{{msg | format}}

以上这些mpvue中都不可以使用，只能使用简单的运算（+ - * % ！ == ==== ：> < [] .）
复杂的运算的替换方法为计算属性computed
3.在模板中，除事件监听外，其余地方都不能调用methods下的函数
在vue中，模板里调用methods部分定义的函数是非常常见的，比如下面这段代码，在v-if指令中调用getErrorNum()

{{errmsg}}

可是在mpvue里，就是不可用的！ 因为小程序模板wxml里不支持这种函数调用，导致mpvue没有很好的方式转译过去。替代方法还是计算属性
4.在模板中，嵌套使用v-for，必须指定索引index
通常在vue模板中嵌套循环渲染数组的时候，一般是这个样子的

mpvue中

5.事件处理中注意点
在mpvue中，一般可以使用web的DOM事件名来绑定事件，mpvue会将web事件名映射成对应的小程序事件名，对应列表如下：

//左侧为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

除了上面的的之外，web表单组件/