uni-app开发微信小程序,实战项目踩坑大全记录

写在前面

这里记录一些使用 uni-app 和 uView 开发时踩过的坑，希望能对后来者有所帮助。

# 1. 微信开发者工具关闭 ES6 转 ES5

如果微信开发者工具开启了 ES6 转 ES5 的功能，会导致引入的 uView 组件无法正常使用，会报类似于下面这样的错：

解决方案：把微信开发者工具的 ES6 转 ES5 功能关掉，设置 -> 项目设置 -> 本地设置。

# 2. ref 不要放在 computed

下面这份代码，在小程序端运行异常：

<template>
  <view class="container">
    <button ref="button">button</button>
  </view>
</template>

<script>
export default {
  computed: {
    buttonRef() {
      return this.$refs.button
    },
  },

  mounted() {
    this.buttonRef.someMethods() // 在 mp-weixin 会报：buttonRef 为空
  },
}
</script>

解决方案：不要把 refs 的定义放在 computed，每次使用都直接通过this.$refs.button获取。

# 3. 小程序端的组件样式问题

有可能你在 h5 编写好一个组件的样式，运行好好的，结果在小程序端却不正常了，原因在于小程序端会在组件外额外增加一层视图容器，这可能会导致诸如一些高度、外边距之类的样式失效，解决方案就是修改这个外层的样式，使它与我们这个组件的最外层样式一致：

<style lang="scss">
// #ifdef MP-WEIXIN
// HACk: 微信小程序端组件外面会多一层，需要给它也设置高度
[data-ref='basicLayout'], // 这里的值在微信开发者工具查看
// #endif
.basic-layout,
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>

注意：由于这个选择器只针对小程序端，所以我们要加一个条件渲染。

# 4. 小程序端修改的外部组件样式无效的问题

# 问题描述

如果要在.vue中修改外部组件的样式（如 uni-app 和 uView），像下面这样可能会无效：

<template>
  <view class="container">
    <u-search v-model="keyword" placeholder="日照香炉生紫烟"></u-search>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    }
  },
}
</script>

<style lang="scss">
.container {
  .u-search .u-input {
    color: red !important;
  }
}
</style>

# 解决方案

这是因为在 uni-app<style> 默认都是scope的，所以需要改成下面这样：

<style lang="scss">
.container {
-  .u-search .u-input {
+  /deep/ .u-search .u-input {
    color: red !important;
  }
}
</style>