preface

Mobike mini program has been officially released on the first day of its launch on wechat, which has been widely used in weibo media circle of friends. This article focuses on a summary of the technical direction and how to go from learning to progress over a period of time.

A paradigm shift

  • Instead of the usual tags of HTML, wechat applets have custom components like React, such as View, text, map, etc

  • There is no window variable, but wechat provides a wX global method set

  • Cannot nest iframe without a tag link

  • Event binding and conditional rendering are similar to Angular, written in WXML

  • Data binding uses Mustache double brace syntax

  • There is no way to manipulate the DOM and change the view presentation by changing the Page data (like React state)

So if you are familiar with all the front-end stacks mentioned above, you will be in your element developing wechat applets.

The life cycle

As you can see, applets are single-page H5 pages, and all elements are loaded once, which leads to the concept of a lifecycle:

  • When opened for the first time, the applets are initialized

  • After the applets are initialized, the onShow event is raised

  • The applet is switched to the background (screen goes out, switch APP, etc.), triggering onHide

  • The applets switch from background to foreground, triggering onShow again

  • Small program error, raising onError

Each page also has its own life cycle:

Note: in wechat 6.5.3, some Android devices cannot trigger the onLoad event, so onReady can be used instead.

Event broadcast

You can use event broadcast (a unified event center) to register and trigger custom events. Otherwise, event management will become chaotic in the later stage, and events will be transmitted across pages. You need this event trigger mechanism more. For example, there is a scene like this in Mobike:

After the code scanning is successful, lock unlocking is displayed on page A, so it is necessary to jump to cycling page B and query the user’s cycling status.

It’s almost impossible to do this without a unified event management center, but you can Hack it. Since jumping to page B triggers B’s onShow event, you can write business logic in onShow:



// Page A
// After the lock is unlocked, go to Page B
wx.redirectTo({
  url: "/pages/riding/index"
})Copy the code


// Page B
Page({
  onShow() {
    // Check cycling status}}})Copy the code

However, it is more reasonable to use event broadcast to handle:



const broadcast = require("libs/broadcast")

// Register events first
broadcast.on("check_ride_state", () = > {// Check cycling status
})Copy the code


const broadcast = require("libs/broadcast")

// Page A
// After the lock is unlocked successfully, the event is triggered and the Page is redirected to Page B
broadcast.fire("check_ride_state")
wx.redirectTo({
  url: "/pages/riding/index"
})Copy the code

The data center

The app.js of the root directory is useful, and the app.js of the root directory is useful. Because variables or methods registered within it can be retrieved by all pages, it can also handle the cross-page event triggering problem described above. And you can register globalData for all pages. For example, you can register systemInfo directly with globalData so that you don’t have to fetch it on every page:



// app.js

const systemInfo = wx.getSystemInfoSync()
App({
  globalData: {
    systemInfo
  }
})Copy the code

Get on the page:



// Page A

const {
  systemInfo
} = getApp().globalDataCopy the code

Performance optimization

Small programs run on the wechat platform, and may “share running memory” with many small programs, it is conceivable that the performance of a single small program is likely to encounter bottlenecks and Crash or be destroyed by wechat actively!

For example, mobike has this scene:

The home page shows the map to find a bike, and jumps to the cycling map after scanning the code successfully.

Simple logic, directly two pages, two map components switch can be done. In the actual test scenario, iOS is indeed as expected and everything is normal, but under Android, it is very likely to make the small program Crash, and directly exit the small program after successful code scanning.

The solution is to maintain only one map component throughout the applet, and change the different representation of the map with different states:

index.wxml



    <map id="map" controls="{{controls}}" style="{{style}}"></map>Copy the code

index/index.js



const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"

Page({
  data: {
    style: indexStyle
  },
  onUnlock() {
    this.setData({
      style: rideStyle
    })
  }
}
})Copy the code

In this way, the Crash problem of some Android devices was solved successfully.