The functions and methods of cross-page interaction between mini programs

At the end of last year, the sub-package size of WeChat mini programs has reached 12M. On the one hand, it shows that mini programs have gradually given developers greater permissions. On the other hand, it also shows that for some mini programs, 8M The size is no longer sufficient. I am also developing a to B mini program application this year. Here are some cross-page interaction scenarios.

For the business needs of B-side applications, the complexity of small program development is relatively more complicated than web development. One is the issue of the dual-thread processing mechanism, and the other is the interaction issue between page stacks.

Note: The author currently only needs to develop WeChat applet. In order to use new functions such as properties behaviors observers in the applet page, the Component constructor has been used to construct the page. For details, please refer to the WeChat applet Component constructor. If you don't have the need for multi-terminal development, it is recommended to try it and get a good experience.

Performance Optimization Category

---

For small programs, click on the page to trigger wx.navigateTo to jump to other pages. There will be a period of blank space in the middle. The loading period (for subcontracted pages, the blank period will be longer), but this is the internal mechanism of the mini program and there is no way to optimize it. We can only wait for this uninteresting period to pass.

When considering that the first thing after jumping to the page is the logic of fetching numbers, can we optimize it? The answer is yes. We have no way to perform a jump operation directly after obtaining the data on the current page (this operation is even worse), but we can use the cache of the current request. For details, please refer to my previous blog article - 3 wonderful uses of Promise objects.

The code is as follows:

const promiseCache = new Map()

export function setCachePromise(key, promise) {
  promiseCache.set(key, promise)
}

export function getCachePromise(key) {
  // 根据key获取当前的数据  
  const promise = promiseCache.get(key)
  // 用完删除，目前只做中转用途，也可以添加其他用途
  promiseCache.delete(key)
  return promise  
}

Make a global Map, and then use the Map to cache the promise object. Before jumping, the code is:

// 导入 setCachePromise 函数

Component({
  methods: {
    getBookData(id) {
      const promise = // promise 请求
        setCachePromise(`xxx:${id}`, promise)      
    },  
    handleBookDetailShow(e) {
      const id = e.detail
      this.getBookData(id)
       wx.navigateTo({url: `xx/xx/x?id=${id}`})
    }
  }
})

and jump The subsequent code is also as follows:

// 导入 getCachePromise 函数

Component({
    properties: {
      id: Number  
    },
    lifetimes: {
      attached () {
        const id = this.data.id  
        // 取得全局缓存的promise
        const bookPromise = getCachePromise(`xxx:${id}`)
        bookPromise.then((res) => {
          // 业务处理
        }).catch(error => {
          // 错误处理  
        })
      }
    },
    methods: {
      getBook() {
        // 获取数据，以便于 错误处理 上拉刷新 等操作  
      }  
    }
})

In this way, the logic of fetching and page loading can be processed at the same time. Of course, this is coupled to the page and is not conducive to subsequent deletion and modification. But consider that if it is only added between subcontracting jumps, it may have a good effect.

If you want to be non-intrusive, you can further study the Tips for Improving Application Speed ​​of WeChat Mini Programs and the wxpage framework. At the same time, considering that whether it is a ToC or a ToC user, there may be problems with hardware and network environment. This optimization is still very worthwhile.

Of course, in order to reduce the cold start time, the WeChat applet provides periodic update data pre-fetching function.

Note: The above promiseCache is only used for transfer, not for caching. If you consider adding a cache, you can refer to my previous blog article - Front-end API request caching solution.

Notification class

---

If the interaction is on the PC side, CRUD of the data. For example, if you modify or delete data on the details page, you can directly call the previously stored list query conditions and query again when returning to the list. However, for the drop-down scrolling design of the mobile terminal, there is no way to directly call the previous query conditions. to search.

If you enter the details page from the list page, only addition or modification operations will be performed on the details page. Then return to the list page. At this time, the user can be prompted that the data has been modified, and the user can decide whether to refresh the data.

If the data is modified on the edit page:

const app = getApp()

component({
  methods: {
    async handleSave() {
      //...
      app.globalData.xxxChanged = true
      //...  
    }
  }
})

List interface:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 检查 globalData，如果当前没有进行修改，直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 无论确认刷新与否，都把数据置为 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

Of course, we can also use wx.setStorage or getCurrentPage to get the previous page setData to perform data notification so that users can refresh the page.

Subscription publishing class

---

If it only involves modifying data, we can choose to let the user perform a refresh operation, but if it is for a delete operation For example, if the user chooses not to refresh and then accidentally clicks on deleted data, an error will occur. Therefore, if there is a need to delete, it is best to modify the list before returning to the list page to avoid errors.

mitt

There are many pub/sub open source libraries on github. If there are no specific requirements, the one with the least amount of code is mitt The author of this library is a developit guy who likes to develop micro libraries. The famous preact was also created by this guy. I won’t go into too much introduction here, it’s very simple. Everyone may be able to understand that the code is as follows (excluding the flow tool check):

export default function mitt(all) {
  all = all || Object.create(null);

  return {
    on(type, handler) {
      (all[type] || (all[type] = [])).push(handler);
    },

    off(type, handler) {
      if (all[type]) {
        all[type].splice(all[type].indexOf(handler) >>> 0, 1);
      }
    },
    emit(type, evt) {
      (all[type] || []).slice().map((handler) => { handler(evt); });
      (all['*'] || []).slice().map((handler) => { handler(type, evt); });
    }
  };
}

There are only 3 methods, on emit and off.

Just import the objects generated by the generated mitt() function in multiple pages (or put them directly into app.globalData).

Component({
  lifetimes: {
    attached: function() {
      // 页面创建时执行
      const changeData = (type, data) => {
        // 处理传递过来的类型与数据
      }
      this._changed = changeData
      bus.on('xxxchanged', this._changed)
    },
    detached: function() {
      // 页面销毁时执行
      bus.off('xxxchanged', this._changed)
    }
  }
})

这里mitt可以有多个页面进行绑定事件，如果需求仅仅只涉及到两个页面之间，我们就可以使用 wx.navigateTo 中的 EventChannel (页面间事件信息通道)。可以参考微信小程序wx.navigateTo方法里的events参数使用详情及场景,该方案的利好在于，传递到下一个页面的参数也可以通过 EventChannel 来通知，以便于解决 properties 传递数据不宜过大的问题。

注: 一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。小程序官方也有长列表组件 recycle-view。有需求的情况下可以自行研究，这个不在这里详述。

鼓励一下

如果你觉得这篇文章不错，希望可以给与我一些鼓励，在我的 github 博客下帮忙 star 一下。
博客地址

推荐教程：《微信小程序》

The above is the detailed content of The functions and methods of cross-page interaction between mini programs. For more information, please follow other related articles on the PHP Chinese website!