Mpvue is a front-end framework for developing applets using vue.js. The framework is based on the Vue. Js core, the overall framework and Vue syntax keep consistent, the overall development experience is good. But the deeper you go, the more problems emerge.

1. Problems caused by opening the same page multiple times

The first is that there is a requirement to go from the home page -> My Followers -> Someone else’s home page, and the home page module is opened twice

There’s nothing wrong with the requirement that when we go from someone else’s home page -> My Followers -> home page, my profile becomes the profile of the person I just opened, which is…

Don’t panic. There’s something we need to figure out.

When mpvue routes Page A -> Page A -> Back, the data is shared by an object. Why is mpvue doing this

First create a hack file/SRC /util/ hack.js

const pageDatas = {}

export default {
  install(_Vue) {
    // Add global methods or attributes
    _Vue.prototype.$isPage = function isPage() {
      return this.$mp && this.$mp.mpType === 'page'
    }
    
    _Vue.prototype.$pageId = function pageId() {
      let pid = null
      try {
        pid = this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
      } catch (e) { }
      return pid
    }
    
    // Inject the component
    _Vue.mixin({
      
      methods: {
        stashPageData() {
          return { data: { ...this.$data } }
        },
        restorePageData(oldData) {
          Object.assign(this.$data, oldData.data)
        },
      },
      
      onLoad() {
        if (this.$isPage()) {
          // Enter the new page
          Object.assign(this.$data, this.$options.data())
        }
      },
      
      onUnload() {
        if (this.$isPage()) {
          // Exit the page and delete the data
          delete pageDatas[this.$pageId()]
          this.$needReloadPageData = true
        }
      },
      
      onHide() {
        if (this.$isPage()) {
          // Back up data to hide
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },
      
      onShow() {
        if (this.$isPage()) {
          // If it is backward, set data to historical data
          if (this.$needReloadPageData) {
            const oldData = pageDatas[this.$pageId()]
            if (oldData) {
              this.restorePageData(oldData)
            }
            this.$needReloadPageData = false}},})},}Copy the code

Introduce/SRC /main.js in main.js

import Vue from 'vue'
import App from './App'
import Hack from './utils/Hack'


Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(Hack)

const app = new Vue(App)
app.$mount()

Copy the code

After the test, it was found to be OK, but this is only a temporary solution, which can cure the symptoms rather than the root cause. We still hope the official solution can be solved as soon as possible.

2. scroll-viewSome problems with components

Actually, I don’t recommend using this component, and it’s not mpVue’s fault, it just doesn’t work very well.

  • Some of the following events do not fire in MPvue
  • bindscrolltolower
  • bindscrolltoupper
  • bindscroll

Guess what the solution is? Just take the bind out, hahaha

  • scrolltolower
  • scrolltoupper
  • scroll

However, bindScrolltolower stops executing when the Scroll view height is 100%, so the solution is to put some restrictions on the outside parent element

<div class="cat-scroll">
    <scroll-view style="height: 100%; width: 100%">
    </<scroll-view>
</div>
Copy the code
.cat-scroll {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
}
Copy the code

Thus solved, but but but but but but but but it covered the drop-down and small program after the screen refresh conflict, causes the drop-down refresh does not perform. WTF

So let’s go back to what we said at the beginning and instead of using scroll view, let’s do it another way. First of all, the reason we use scroll view is usually to do a drop-down load more. In a small program, the page globally has a scroll to the bottom event onReachBottom and we just need to write in this event more pull load, and it doesn’t conflict with the drop-down refresh.

export default {
    onPullDownRefresh(){
        // Drop refresh
    },
    onReachBottom(){
        // Pull up to load more}}Copy the code

3. Slot nested subtemplates

Slot is supported in the new version of MPvue, but I urge you not to use it. There are many problems. There are various problems in data transmission between father and son. I have not found a good solution.

This article is available at github github.com/Jon-Millent…