mpvue学习日记

step1: 安装

首先跟随官网的5分钟教程尝试一次，安装好基础的开发环境
Home - mpvue-docs

之后跟随简书上的某个系列教程亲自动手写一次，了解基础的组件写法和状态存储

使用mpvue开发小程序教程

step2: 页面样式 px2rpx的设置

因为小程序里提供了类似rem的布局单位rpx。

而mpvue集成了px2rpx-loader组件，所以直接在css中使用px。在打包时webpack会自动转换成rpx。

px2rpx配置路径 build/utils.js 33行

默认是按照750px的尺寸制作的，但是部分情况下会变成375px。这时候可以修改打包的配置如下:

1
2
3
4
5
6
7

var px2rpxLoader = {
  loader: 'px2rpx-loader',
  options: {
    baseDpr: 1,
    rpxUnit: 1
  }
}

step3: 常见问题

在main.js 里面的config失效，无法生成app.json？

在src目录下应该存在app.json文件 把src/main.js中的config部分copy过去即可
原文：segmentfault

navigateTo:fail page is not found
跳转的页面未在src/app.json中配置，把 pages/xxx/main加入到json中即可

mpvue如何设置首页
src/main.js中设置 “^pages/index/main” 是无效的
mpvue编辑的首页是app.json pages的第一项。

** 单一页面中使用上下拉加载 上拉加载有效，下拉刷新却无效？ ** 在对应页面下，新建main.json页面。把config配置文件拷贝之后重新编译即可

main.json

1
2
3
4
5
6

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#fff"
}

父子级组件数据双向传递

vue 父子组件通信方法

v-for标签打包失败

1
2
3
4

// 需要加上 :key="" 才行，且key值不能重复
<ul v-for="(moment,index) in momentsList" :key="index">
  ...
</ul>

src赋值的问题
map循环输出时，img的src设置需要这样写

1
2

// 使用v-bind:赋值 不需要左右的花括号
<img v-bind:src="moment.creatorAvatar"

暂时关闭eslint或者某个页面不使用eslint

某个页面不想使用eslint可以在页面顶部加上/* eslint-disable */的注释

dev开发时 热更新想先跳过eslint可以在webpack.base.conf.js中注释以下内容

1
2
3
4
5
6
7
8
9

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter')
    }
},

组件使用案例

swiper 微信官方文档 | demo案例