mpvue项目踩坑集锦1. Module build failed: Error: Final loader didn'

1. 一些常用语法

vue init mpvue/mpvue-quickstart my-project

2. Module build failed: Error: Final loader didn't return a Buffer or String

新版的问题,把package.json里面的这两个写死就好了,不要^

"mpvue": "1.0.18"
"mpvue-template-compiler": "1.0.18"

3. 在微信小程序里高亮显示 .vue文件代码和stylus代码

方法: 微信小程序中安装可以高亮显示 vue和stylus文件的插件。从你vscode的插件文件夹中去找，然后把需要的插件复制到微信的插件文件夹里。最后将插件打钩，重启小程序

主要插件： VUE高亮插件octref.vetur。 stylus高亮插件sysoev.language-stylus

步骤:

打开vscode插件所在文件夹 open ~/.vscode/extensions 。可以全部复制，也可以只复制你需要的

将刚才复制的vscode的插件，再黏贴到 编辑>打开编辑器扩展目录 里。

在 工具>插件>编辑器自定义扩展 里把你需要的插件启动。然后重启小程序生效

参考文档

4.基本语法

this.$root.$mp.query // 获取页面传递参数, 需要在mounted生命周期里获取
wx.showToast({
  icon: 'none',
  title: '授权链接参数错误',
}) // 提示

5. 特殊特性

1. 动态插入html的`v-html`不可用

小程序的界面并不是基于浏览器的BOM/DOM的，所以不能动态的在界面模板里直接插入HTML片段来显示。如果有在小程序里插入html判片段的需求，可以用组件或者wxParse(github.com/icindy/wxPa…)来实现

2. 在模板中。用于数据绑定的双括号语法`{{}}`中的表达式功能存在诸多限制

我们在大括号中只能使用一些简单的运算符运算。 filters或者一些复杂的方法调用都不可以。可以考虑使用计算属性computed来替代

3. 对于表单，请直接使用小程序原生的表单组件

4. 不支持在template内使用methods中的函数

所以, 无法通过方法去处理数据。当用到需要处理多个后台返回数据的情况时。只能在后台返回数据的同时，将数据处理到一个新的参数里。然后在template中调用这个参数。 (重要: 这里如果不注意, 而是按照vue的常用写法, 会不生效)

5. class和style支持的语法

// 实践可行
<div :class="num % 2 == 0 ? 'c-blue' : 'c-yellow'">你好呀</div>
:style="{background: 'blue'}"  // 使用行内元素
:style="{color:(isTrue?'red':'green')}"
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
:class="[isDisabled ? 'bg-red' : 'bg-blue']"
:class="{'bg-yellow': isTrue}"
:class="[{ 'bg-yellow': isTrue }, font100]"
:class="[ isFalse ? 'bg-yellow' : 'bg-red' , font50]"
:class="[bgGreen , font50]"
:class="{'bg-green': isTrue , 'font-size100': isTrue}"

6. 嵌套列表必须指定不同的索引

7. 在. 使用vuex进行状态管理

由于mpvue不像vue web单页面应用那种单vue实例的结构，而是采用了多vue实例的结构(app和各个页面都会由单独的vue实例来管理)。所以推荐使用在组件中通过import导出store所在的模块文件。然后调用该store上的相关属性和方法。

8. 图片

图片引入: <img src="/static/images/home/header.png" />

在css中引入:

.icon{
    background-image: url('./assets/images/home/header.png')
}
.icon1{
    background-image: url('~assets/images/home/header.png')
}

import globalStore from "../../stores/global-store";

computed: {
    count(){
        return globalStore.state.count
    }
},

methods: {
    handleIncrement(){
        globalStore.commit('increment')
    }
}

8. 在项目中使用全局sass

安装sass-resources-loader插件。在build>utils.js中将全局scss文件引入。

// build/utils.js
  return {
    css: generateLoaders(),
    wxss: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

// global.scss
/** 主题色 **/
$theme-color: blue;
// 导航背景颜色
$nav-titlecolor: #262626;

9. 安装插件sass报错

版本问题。引入以下版本

"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",

10. 点击跳转到页面某个位置

可以用 scroll-view。查看微信小程序文档api， wx.createSelectorQuery()可以获取dom到屏幕顶部的位置。这是微信的一个API， res返回的是一个数组，数组的 res[0].top + res[1].scrollTop等于Dom元素到顶部的距离

this.$nextTick(() => {
  let nowId = '#hopeId'; // v.id是点击按钮传递过来的参数id， 也就是希望跳转的id
  let query = wx.createSelectorQuery()
  query.select(nowId).boundingClientRect()
  query.selectViewport().scrollOffset()
  let jumpLocation = 0;
  query.exec(function(res) {
  // res[0].top #hopeId节点的上边界坐标     res[1].scrollTop 显示区域的竖直滚动位置
    jumpLocation = res[0].top + res[1].scrollTop
    wx.pageScrollTo({
      scrollTop: jumpLocation - 100,
      duration: 300
    })
  })
})

11. 微信小程序如何区分本地还是线上环境

wx.getAccountInfoSync() 获取当前帐号信息。线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取

返回值

Object

帐号信息

属性	类型	说明
miniProgram	Object	小程序帐号信息
plugin	Object	插件帐号信息（仅在插件中调用时包含这一项）
miniProgram 的结构

属性	类型	说明	最低版本
appId	string	小程序 appId
envVersion	string	小程序版本	2.10.0
version	string	线上小程序版本号	2.10.2

miniProgram.envVersion 的合法值

值	说明	最低版本
develop	开发版
trial	体验版
release	正式版

mpvue项目踩坑集锦