mpvue学习之路

2019-10-08 本文已影响0人拾钱运

前面简书同志分享的步骤和现阶段有些差异：本人现阶段学习的是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的不同

跳转页面：

<a href="/pages/counter/main" class="counter">去往Vuex示例页面1</a>

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

mpvue的局限性

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

可以调用methods下的函数：例如：

<template>
  <div>{{ formatMessage(msg) }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,World"
    }
  },
  methods: {
    formatMessage(str) {
      return str.trim().split(',').join('#')
    }
  }
}
</script>

vue中如果变量是对象的话，也可以调用对象的成员方法

<div>{{msg.trim().split(',').json('#')}}</div>

vue中可以使用过滤器来处理变量，最有用的场景算是格式化数据了

<div>{{msg | format}}</div>

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

<div v-if="getErrorNum()>0 && code == 10001" class="error">{{errmsg}}</div>

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

<template>
  <ul v-for="category  in  categories">
      <li  v-for = product  in  categories.product>
            {{product.name}}
      </li>
  </ul>
</template>

mpvue中

<template>
  <ul v-for="(category ) in  categories">
      <li  v-for = (product,proindex)  in  categories.product>
            {{product.name}}
      </li>
  </ul>
</template>

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表单组件<input>/<textarea>的change事件会被转为blur事件，
keydown，keypress 键盘事件没有了，因为小程序没有键盘
vue事件修饰符
.prevent 可以直接干掉，因为小程序里没有默认事件，比如submit并不会跳转页面
.capture 支持1.0.9以后事件捕获
含义：给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素，如果有多个该修饰符，则由外而内触发
.self 没有可以判断的标识
含义：只当事件在该元素本身（比如不是子元素）触发时触发，忽略事件冒泡和事件捕获的影响
7.对于表单，请直接使用小程序原生的表单组件
表单组件又多，又复杂，框架可能hold不住，所以在实际开发中，推荐使用小程序的表单组件标签来写，而不是使用web表单组件标签来写，当然了，在mpvue中使用了小程序的组件标签，数据绑定功能还是完全可以用的。示例:

<template>
  <div>
      <picker  @change="handlePickerChange" :value="selectedIndex"  :range="message">
            <view class="picker">
                当前消息：{{messages[selectedIndex]}}
            </view>
      </picker>
  </div>
</template>
<script>
  export default {
      data(){
        return {
         selectedIndex:0,
          message:['hello','word','haha']
      }
     },
     methods:{
        handlePickerChange  (e) {
         console.log(e)
       }
    }
   }
</script>

其他注意事项：

在web vue开发中，通常使用vue-router来进行页面路由，但是在mpvue中使用<a>标签和小程序原生api wx.navigateTo等来做路由功能，还有请求后端数据，vue中使用的axios，mpvue中使用wx.request等来进行