Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the development technologies of mobike and WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the development techniques of mobike and WeChat Mini Programs?"

1 change of thinking

WeChat Mini Programs does not have the common tags of HTML, but Wechat custom components similar to React, such as view, text, map, etc.

There are no window variables, but Wechat provides the wx global method set

Cannot nest iframe without a tag link

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

Data binding uses Mustache double curly braces syntax

Unable to operate DOM, change the view display by changing page data (React-like state)

So if you are familiar with all the front-end technology stacks mentioned above, you will be adept at developing WeChat Mini Programs.

2 Life cycle

You can understand that Mini Program is a single-page H5 web page where all elements are loaded once, which leads to the concept of life cycle:

Open it for the first time, initialize Mini Program

After Mini Program initialization is completed, the onShow event is triggered.

Mini Program is switched to the background (screen off, APP switch, etc.) to trigger onHide

Mini Program switches from the background to the foreground, triggering onShow again

Mini Program error, trigger onError

Each page also has its own life cycle:

Note: in Wechat version 6.5.3, some Android machines cannot trigger the onLoad event, so you can use onReady instead.

3 event broadcast

WeChat Mini Programs of "single page structure", you can use event broadcast (unified event center) to register and trigger custom events, otherwise event management will become more and more chaotic in the later stage, and events will be transmitted across pages, you need this kind of event trigger mechanism more, you can refer to broadcast.js. For example, there is a scene like this in mobike:

After scanning the code successfully, you will be prompted to unlock on the unlocking page A, and jump to the cycling page B and query the user's riding status.

Without a unified event management center, you can hardly complete such a process, which, of course, can be solved using Hack. Because jumping to page B triggers the onShow event of B, you can write the business logic in onShow:

/ / Page url / after unlocking successfully, jump to Page Bwx.redirectTo ({onShow: "/ pages/riding/index"}) / / Page BPage ({onShow () {/ / check the riding status})

But it would be more reasonable to use event broadcasting to deal with it:

Const broadcast = require ("libs/broadcast") / / first register the event broadcast.on ("check_ride_state", () = > {/ / check the riding status}) const broadcast = require ("libs/broadcast") / / Page Adeband / after unlocking successfully, trigger the event and then jump to the Page Bbroadcast.fire ("check_ride_state") wx.redirectTo ({url: "/ pages/riding/index"}) 4 data center

App.js in the root directory is useful, app.js in the root directory is useful, and app.js in the root directory is useful.

Because the variables or methods registered inside it are available to all pages, it can also be used to deal with the cross-page event trigger problem described above. And you can register globalData for all pages to access, for example, you can register systemInfo directly into globalData, so you don't have to get it on every page:

/ / app.jsconst systemInfo = wx.getSystemInfoSync () App ({globalData: {systemInfo}})

Get it on the page:

/ / Page Aconst {systemInfo} = getApp (). GlobalData5 performance optimization

Mini Program runs on the Wechat platform, and may "share running memory" with many Mini Program, it is conceivable that the performance of a single Mini Program is likely to encounter bottlenecks and Crash may be actively destroyed by Wechat!

For example, there is this scene in mobike:

Show the map on the home page to find the car, scan the code successfully and jump to the cycling map.

Simple logic, directly two pages, two map components switch can be done. In the actual test scenario, iOS did work as expected, but under Android, it is likely to make Mini Program Crash, after successfully scanning the code, directly quit Mini Program.

The solution is to maintain only one map component throughout Mini Program, and change the different presentation of map through different State:

Index.wxml

Index/index.js

Const indexStyle = "width: 750rpx; height: 1260rpx" const rideStyle = "width: 750rpx; height: 960rpx" Page ({data: {style: indexStyle}, onUnlock () {this.setData ({style: rideStyle})}})

In this way, the problem of Mini Program Crash of some Android devices has been solved successfully.

At this point, I believe you have a deeper understanding of "what are the development technologies of mobike and WeChat Mini Programs?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.