At the end of last year, the subcontracting size of wechat small programs has reached 12M, which on the one hand shows that small programs gradually release more rights for developers, and on the other hand shows that the size of 8M is no longer enough for some small programs. I personally am also working on a to B applet this year. Here are some examples of cross-page interaction scenarios.

For the business requirements of b-side applications, the complexity of small program development is more complex than web development. One is the two-threaded processing mechanism, and the other is the interaction between page stacks.

Note: For now, I only need to develop wechat applets. In order to implement new features such as Properties Behaviors, observers and other applets, the Component constructor has been used to construct pages. See the wechat applet Component constructor for details. If you do not have the need for multi-terminal development, it is recommended to try to use it, you can get a good experience.

Performance Optimization class

Wx. NavigateTo has a blank load period (longer for subcontract pages), but this is an internal mechanism of the applet and cannot be optimized. All we can do is wait for this uninteresting gap to pass.

Given that the first thing you do after jumping to a page is fetch logic, can we optimize that? The answer is yes. There is no way to directly fetch data from the current page and then jump to it (which is worse), but we can use caching for the current request, as described in my previous blog post – 3 Great uses of Promise objects.

The code is as follows:

const promiseCache = new Map(a)export function setCachePromise(key, promise) {
  promiseCache.set(key, promise)
}

export function getCachePromise(key) {
  // Get the current data by key
  const promise = promiseCache.get(key)
  // Delete when used up. For now, it is only used for transfer purposes. You can also add other uses
  promiseCache.delete(key)
  return promise  
}
Copy the code

Make a global Map and use the Map to cache the promise object before jumping:

// Import setCachePromise

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

The code after the jump also looks like this:

// Import getCachePromise

Component({
    properties: {
      id: Number  
    },
    lifetimes: {
      attached () {
        const id = this.data.id  
        // Get the global cache promise
        const bookPromise = getCachePromise(`xxx:${id}`)
        bookPromise.then((res) = > {
          // Business processing
        }).catch(error= > {
          // Error handling})}},methods: {
      getBook() {
        // Get data for error handling such as pull-up flusher}}})Copy the code

This allows you to handle both fetch and page loading logic at the same time, which, of course, is coupled to the page and is not conducive to subsequent deletions and modifications. But consider if only added between subcontracting jumps may have a good effect.

If you want to be non-invasive, you can further study the micro channel small program to improve the application speed tips and WXPage framework, at the same time, considering whether ToC or ToC users, there may be hardware and network environment problems, the optimization is very worthwhile.

Of course, in order to reduce the cold start time, wechat mini program provides the function of periodically updating data pre-pull.

Note: The promiseCache above is only used for forwarding, not caching. If you are considering adding caching, please refer to my previous blog post on front-end API Request caching solutions.

Inform the class

If the interaction is on the PC side, CRUD for the data. For example, after data is modified or deleted on the details page, when the list is returned, the query conditions stored before can be directly retrieved to query again. However, for the pull-down and scrolling design of the mobile terminal, there is no way to directly call the previous query conditions to search.

If you access the details page from the list page, you can only add or modify the details page. Then return to the list page. In this case, you can prompt the user that the data has been modified, and the user can decide whether to refresh the data.

If the data is modified in the edit page:

const app = getApp()

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

List interface:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // Check globalData and return if no changes have been made
      if(! app.globalData.xxxChanged)return
      wx.showModal({
        // ...
        complete: (a)= > {
          // Set the data to false regardless of whether the refresh is confirmed
          app.globalData.xxxChanged = false}})}})Copy the code

Of course, we can also use wx.setStorage or getCurrentPage to retrieve the previous page setData for data notification, so that the user can refresh the page.

Subscription publishing class

If it only involves modifying the data, we can choose to let the user refresh the data, but for the deletion operation, if the user chooses not to refresh the data, and then the user accidentally clicks on the deleted data, an error will occur. So 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 plenty of pub/ Sub libraries on Github, and if you don’t have a specific need, the library to find the least is Mitt, a developit guy who likes to develop microlibraries and is the creator of preact. I won’t go into too much detail here, it’s very simple. As you can probably see, the code looks like this (without checking with the flow tool):

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[The '*'] || []).slice().map((handler) => { handler(type, evt); }); }}; }Copy the code

There are only three methods, on emit and off.

Simply import the objects generated by the mitt() function on multiple pages (or drop them directly into app.GlobalData).

Component({
  lifetimes: {
    attached: functionConst changeData = () {const changeData = (type, data) => {// handle the type and data passed} this._changed = changeData bus.on('xxxchanged', this._changed)
    },
    detached: function() {// Execute bus.off('xxxchanged', this._changed)
    }
  }
})
Copy the code

In this case, Mitt can have multiple pages to bind events. If the requirement only involves between two pages, we can use the EventChannel in Wx. NavigateTo. You can refer to the details and scenarios of events parameter usage in wx. NavigateTo method in wechat. The advantage of this solution is that the parameters transmitted to the next page can also be notified through EventChannel, so as to solve the problem that the data transmitted by properties should not be too large.

Note: when a page displays too much information, the applet page freezes and the screen goes blank. Miniprogram officials also have a long list of recycle-view components. If there is a need, you can do your own research, which is not detailed here.

To encourage the

If you think this article is good, I hope you can give me some encouragement and help me star under my Github blog. Blog address

Reference documentation

Component constructor for wechat applets

Micro channel small program to improve the application speed tips

wxpage

mitt

Promise objects have three great uses

The front-end API requests a caching scheme