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
|
<ul v-for="(moment,index) in momentsList" :key="index">
...
</ul>
|
src赋值的问题
map循环输出时，img的src设置需要这样写
1
2
|
<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案例
