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

The knowledge points of this article "how to realize the concept of WeChat Mini Programs scanning QR Code" are not quite understood by most people, so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to realize the concept of WeChat Mini Programs scanning QR code" article.

Page analysis

The backstage needs to get the unlocking password and display it on the page.

We need a timer to specify how long it will take to check whether the bike is damaged or not. if the bike breaks down during this period, you can click back to the home page to report the vehicle trouble, and of course you will cancel the scan code.

If there is no problem with the bike, automatically jump to the billing page after checking the length of time.

Page layout

Unlock password

{{password}}

Please unlock it with a password and start billing after {{time}} s.

Is there something wrong with the vehicle?

Go back to the home page and report to the vehicle.

WeChat Mini Programs's page elements have their own set of names, using the weui design style, but the types of elements are relatively small, for example, they represent inline elements, picture tags, etc., so the page tag is easy to understand as long as it has a html foundation.

Page style

.container {

Width: 100%

Display: flex

Flex-direction: column

Align-items: center

Justify-content: space-between

Background-color: # fff

}

. password-title,.tips {

Width: 100%

Flex: 1

Text-align: center

Padding: 60rpx 0

}

. password-content {

Width: 100%

Flex: 8

Text-align: center

Font-size: 240rpx

Font-weight: 900

}

.tips {

Font-size: 32rpx

}

.tips. Tips-action {

Margin-top: 20rpx

}

.tips. Tips-href {

Color: # b9dd08

}

The style is completely css. Note that the unit here is rpx, which is set by Mini Program to adapt to all devices. Calculated by devices with a width of 750px, 1rpx = 0.5px. For other proportion conversions, you can refer to the official documentation.

First, let's learn about two knowledge points:

Data rendering page: previously, we set up a data template in the map component, and then dynamically assign values to the template data through the server in js. Whenever the js data changes, the page will re-render the data. So the core idea is data-driven pages. We set the data template {{time}} in the structure, indicating that this data needs to be changed, so we first give the initial value 9 in the data object (specially set the time to be very short for debugging)

Binding events for elements: different from traditional html, Mini Program pages bind events to elements that cannot manipulate elements, otherwise it goes against the original intention of the data-driven page, so Mini Program declares a variable such as bindtap= "moveToWarn" in the element to bind a click event for the specified element, and then implements the function of this event in js. You can also bind many event types, and more you can refer to the event documentation

First, take a look back at the home map immediate car event code. If you are not currently billing, you can scan the code. After scanning the code, you will pass the parameters (password and license plate number) and jump to.. / scanresult/index, that is, this page.

/ / Map control click event

Bindcontroltap: function (e) {

/ / determine which control e.controlId is clicked to represent the id of the control, and set the id in step 3 when the page is loaded

Switch (e.controlId) {

/ / Click the positioning control

Case 1: this.movetoPosition ()

Break

/ / Click to use the car immediately to determine whether it is currently being billed

Case 2: if (this.timer = = "" | | this.timer = undefined) {

/ / scan the code without charging

Wx.scanCode ({

Success: (res) = > {

/ / getting password notification

Wx.showLoading ({

Title: 'getting password'

Mask: true

})

/ / request the server to obtain the password and car number

Wx.request ({

Url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',

Data: {}

Method: 'GET'

Success: function (res) {

/ / request password successfully hides the wait box

Wx.hideLoading ()

/ / jump to the password page with your password and car number

Wx.redirectTo ({

Url:'.. / scanresult/index?password=' + res.data.data.password +'& number=' + res.data.data.number

Success: function (res) {

Wx.showToast ({

Title: 'password obtained successfully'

Duration: 1000

})

}

})

}

})

}

})

/ / if you are already billing, go back to the billing page

} else {

Wx.navigateBack ({

Delta: 1

})

}

Break

/ / Click the guarantee control to jump to the barrier page

Case 3: wx.navigateTo ({

Url:'.. / warn/index'

});

Break

/ / Click the avatar control to jump to the personal Center

Case 5: wx.navigateTo ({

Url:'.. / my/index'

});

Break

Default: break

}

}

We write the following code in js, and the options of this page is the parameter passed above. Try to print out what it is!

/ / pages/scanresult/index.js

Page ({

Data: {

Time: 9 / / default timing length, which is shorter here for debugging. Ofo app is 90s.

}

/ / Page loading

OnLoad:function (options) {

/ / get the password

This.setData ({

Password: options.password

})

/ / set the initial timing seconds

Let time = 9

/ / start timer

This.timer = setInterval () = > {

This.setData ({

Time:-- time / / countdown

});

/ / Jump to the billing page with the bike number after reading it for a second

If (time = 0) {

ClearInterval (this.timer)

Wx.redirectTo ({

Url:'.. / billing/index?number=' + options.number

})

}

}, 1000)

}

/ / Click to report the obstacles on the home page.

MoveToWarn: function () {

/ / clear timer

ClearInterval (this.timer)

Wx.redirectTo ({

Url:'.. / index/index'

})

}

})

When the countdown is complete, you should automatically jump to the billing page

Page analysis

The backstage needs to get the bike number and display it on the page.

We need a timer to accumulate cycling events for billing, and it can show that the maximum unit is hours.

Two buttons: end the ride and go back to the map. Among them, click to end the ride, turn off the timer, and charge according to the cumulative time; click back to the map, if the timer has been turned off, close the billing page and jump to the map. If the timer is still ticking, keep the current page and jump to the map.

Click back to the map need to bring the timer status to the home page, the home page to make a judgment, determine that click on the car immediately to respond to reasonable logic (already charging, can not repeat scan code. The billing has been stopped and needs to be re-scanned)

Page structure (see which of us are data templates? What events are bound to the element? )

Current bike number: {{number}}

{{billing}}

{{hours}}: {{minuters}}: {{seconds}}

End the ride.

Go back to the map

Page style

.container {

Width: 100%

Display: flex

Flex-direction: column

Align-items: center

Justify-content: space-between

Background-color: # fff

}

.number, .endride {

Padding: 60rpx 0

Flex: 2

Width: 100%

Text-align: center

}

.time {

Text-align: center

Width: 100%

Flex: 6

}

.time. Time-content {

Font-size: 100rpx

}

.endride button {

Width: 90%

Margin-top: 40rpx

}

Data logic (see comments for better understanding)

/ / pages/billing/index.js

Page ({

Data: {

Hours: 0

Minuters: 0

Seconds: 0

Billing: "charging"

}

/ / Page loading

OnLoad:function (options) {

/ / get the license plate number transferred from the scan success page, and then define a timer

This.setData ({

Number: options.number

Timer: this.timer

})

/ / initialize timer

Let s = 0

Let m = 0

Let h = 0

/ / timing begins

This.timer = setInterval () = > {

This.setData ({

Seconds: swarm +

})

If (s = = 60) {

S = 0

MFG +

SetTimeout () = > {

This.setData ({

Minuters: m

});

}, 1000)

If (m = = 60) {

M = 0

Hobby +

SetTimeout () = > {

This.setData ({

Hours: h

});

}, 1000)

}

}

}, 1000)

}

/ / end the ride and clear the timer

EndRide: function () {

ClearInterval (this.timer)

This.timer = ""

This.setData ({

Billing: "this ride takes time."

Disabled: true

})

}

/ / return to the map with timer status

MoveToIndex: function () {

/ / if the timer is empty

If (this.timer = "") {

/ / close the billing page and jump to the map

Wx.redirectTo ({

Url:'.. / index/index'

})

/ / keep the billing page to jump to the map with timer status

} else {

Wx.navigateTo ({

Url:'.. / index/index?timer=' + this.timer

})

}

}

})

The fourth step of page analysis is mainly implemented in the moveToIndex function. At the end of the ride, set the timer value to empty, and determine the status of the timer when you click back to the map (whether the value is empty). If empty, close the billing page and end the ride. If it is not empty, jump to the home page with the timer status, and the home page immediately uses the car click event to respond to the passed parameters (timer status) with reasonable logic. Go back to the above to take a look at the conditions for judging the immediate use of the car. When the timer passed on this page does not meet the conditions, we click on the first page of the map to use the car immediately and we will return to this page.

The above is about the content of this article "how to realize the concept of WeChat Mini Programs scanning QR code". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.