创建项目

1
vue init mpvue/mpvue-quickstart my-project

区别

虽说是基于vue框架，但很多的vue特性都是不能用的
像是不支持路由、不支持v-html、不支持keep-alive、不支持transition…

网上有朋友总结的很完整：基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

不支持过滤器

1
2
3
4
5
6
7
8
9
  {{today.high | mydelete2}}
...

  filters: {
    mydelete2: function (val) {
      let vals = val.substring(2)
      return vals
    }
  }

页面一般包含3个文件

1
2
3
index.vue // 组件页面
main.js // 挂载页面
main.json // 页面配置

其中main.js通用写法：

1
2
3
4
5
import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

main.json 引入组件

1
2
3
4
5
{
  "usingComponents": {
    "van-icon": "../../../static/vant/icon/index"
  }
}

隐藏导航栏

1
2
3
"window": {
  "navigationStyle": "custom"
}

微信原生组件 scroll-view

小程序里操作元素的滚动条位置特麻烦，可以选择用scroll-view组件

  • 好处：

1.能够记忆上次滚动条位置

2.有scroll-top属性，操作滚动条位置

3.有scroll事件，可监听滚动条位置

  • 坏处：

1.但若组件内使用了图片自适应属性，会导致失忆

2.vue响应式里scroll-top不变，则不会重新渲染

  • 可投机取巧：
1
2
3
4
5
if (this.scrollTop === 0) {
  this.scrollTop = 0.1
} else {
  this.scrollTop = 0
}