uni-app develops WeChat applet, complete records of practical projects and pitfalls

write in front

Here are some pitfalls I encountered when developing using uni-app and uView. I hope it will be helpful to those who come after me.

# 1. WeChat developer tools close ES6 and convert to ES5

If the WeChat developer tools enable the ES6 to ES5 conversion function, the introduced uView component will not work properly and an error similar to the following will be reported:

Solution: Turn off the ES6 to ES5 conversion function of WeChat developer tools, Settings -> Project Settings -> Local Settings.

# 2. Do not put ref in computed

The following code runs abnormally on the mini program:

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

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

  mounted() {
    this.buttonRef.someMethods() // In mp-weixin it will be reported: buttonRef is empty
  },
}
</script>

Solution: Don’t put the definition of refs in computed. Get it directly through this.$refs.button every time you use it.

# 3. Component style issues on the mini program

It is possible that you have written the style of a component in h5 and it runs fine, but the result is abnormal on the applet. The reason is that the applet will add an extra layer of view containers outside the component, which may result in some height, If styles such as margins fail, the solution is to modify the outer style to make it consistent with the outermost style of our component:

<style lang="scss">
// #ifdef MP-WEIXIN
// HACk: There will be an extra layer outside the WeChat applet component, and the height needs to be set for it as well.
[data-ref='basicLayout'], // The value here can be viewed in WeChat Developer Tools
// #endif
.basic-layout,
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>

Note: Since this selector is only for the applet, we need to add a conditional rendering.

# 4. The problem of invalid external component styles modified in the applet

# Problem description

If you want to modify the style of external components (such as uni-app and uView) in .vue, the following may not work:

<template>
  <view class="container">
    <u-search v-model="keyword" placeholder="Rizhao incense burner produces purple smoke"></u-search>
  </view>
</template>

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

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

# Solution plan

This is because uni-app<style> is scoped by default, so it needs to be changed to the following:

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