mpvue学习日记
in 前端 with 0 comment

mpvue学习日记

in 前端 with 0 comment

step1: 安装

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

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

使用mpvue开发小程序教程

step2: 页面样式 px2rpx的设置

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

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

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

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

  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

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

父子级组件数据双向传递

vue 父子组件通信方法

v-for标签打包失败

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

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

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

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

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

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

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

组件使用案例

swiper 微信官方文档 | demo案例

Comments are closed.