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

This article mainly introduces the relevant knowledge of "methods similar to the development of Didi Taxi's Mini Program system". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope that this article "methods similar to Didi Taxi's Mini Program system development" can help you solve the problem.

Function 1: Didi home page

Function description: top navigation production, click on the corresponding nav page to present different content, and click to determine whether it is forward or backward automatically slide out of the next nav to achieve excessive animation effect. Enter the starting position to simulate the waiting time. The principle of implementation:

Simulate the load effect of waiting time and use the concept of componentization to create a template folder

It can be used directly where the loading effect is needed.

/ / determine whether to display or not by setting the Boolean value of isLoading

Head navigation and click to determine the direction of sliding and automatically slide out, we can use a scroll-left= "{{navScrollLeft}}" this property to set, click nav we can dynamically change this value, so as to achieve this effect.

{{navItem.name}}

How to change the value of this navScrollLeft? At first, the idea is to set the left of nav's navigation, and then hide it if you exceed it. The pit, it can't be realized at all. It was impossible to tell whether the left slid out or out again, and then I thought of setting a threshold. Tired is really hard to write. It seems to give up, ah, or stick to it, so think of separate to get and write their js

SwitchNav (e) {var cur = e.currentTarget.dataset. Current; var singleNavWidth = this.data.windowWindth/4; / / get the screen width to store four nav, this.setData ({navScrollLeft: (cur-1) * singleNavWidth, / / Click to reduce the value of each nav currentTab: cur,}) switchTab (e) {var cur = event.detail.current; var singleNavWidth = 55 / / set the width of each nav this.setData ({currentTab: cur, navScrollLeft: (cur-1) * singleNavWidth / / also dynamically change this value});}

Take care of this kind of top navigation effect Mini Program for the first time, but with a little special effects. In the future, if you encounter it, you can come back and learn from it, so as to avoid wasting a lot of time and energy here, like me. We are programmers who want to complete effective time to create greater value.

Function 2: the choice of starting position

In order to do this effect, I read the document n times over and over again, which is really cheating. WeChat Mini Programs api really doesn't talk about maps in detail. It may be someone like me who is born confused about map processing. Here will be a detailed list of the problems I encountered, I hope it can also help you to deal with maps in the future.

Keyword search, inverse address resolution, address resolution, and switching city list are used here. It is suggested that you can learn about Tencent Map api in the future.

Var QQMapWX = require ('.. /.. / libs/qqmap-wx-jssdk.js'); / / Import the packages you need and create a libs folder var qqmapsdk;qqmapsdk = new QQMapWX ({key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6xxxx'// applies for your own developer key}) Qqmapsdk.reverseGeocoder ({/ / reverse address resolution api). You can resolve the location address location: {latitude: latitude, longitude: longitude,}, success: function (res) {conslog.log (res)} according to your longitude and latitude.

The first pit: how to get longitude and latitude, move markes?, how much to write, it may be minute by minute for Daniel, but it is still very difficult for beginners. After pondering for a long time, I suddenly found this.mapCtx.getCenterLocation, moving the map event to get the longitude and latitude of the map center. So we can fix a controls in the center of the map, move the map to parse its coordinates, and bind the data to the display below, so it is realized. The emmm code is as follows

Bindregionchange: function (e) {/ / Mobile Map event var that = this this.mapCtx.getCenterLocation ({/ / getCenterLocation can obtain the latitude and longitude of the point in the map success: function (res) {app.globalData.strLatitude=res.latitude / / to the whole bureau Use app.globalData.strLongitude= res.longitude qqmapsdk.reverseGeocoder ({location: {latitude: res.latitude, / / you can get the latitude and longitude of the corresponding central point longitude: res.longitude,}, success: function (res) {that.setData ({address: res.result.address) by moving the map / / the inverse address parsing of latitude and longitude obtained our location information bluraddress: res.result.formatted_addresses.recommend})},})

The second pit: the destination call api can also achieve the search prompt function, but I need history also exists, and click on a certain item I need to jump to the home page to display, no history of the page experience is very bad. Is it? Here's how I realized it.

Qqmapsdk.getSuggestion ({/ / call api to realize the keyword search prompt keyword: value, / / pass the value of input, here value is not 'value', just started to feel sleepy. Prompt region: 'Nanchang', success: function (res) {let data = res.data that.setData ({address: data, value})

Judge the input box by wx:if. Below for different arrays, fill in the first small pit. And then we think, when we click search, how do we add it to our history? Click the id to get that value and then push into the history array, is it very nice to realize the choice of the starting position of Didi? of course, this is the tip of the iceberg, and we still need to explore behind it.

Function 3: Didi cost calculation

The ancients said: details determine success or failure, a good WeChat Mini Programs is often some details moving, unexpectedly is an imitation, although not 100%, at least hope to be exactly the same.

Analysis, click on the home page to call the express page does not jump, but to display different content. Is it possible to use wx:if as above? Yes, use a repeat to carry the content to be displayed, so that you can not get this little trick.

To calculate the price, Tencent Map api is also used to obtain the distance between two points. Just now, all the starting points are stored in globalData. The advantage is that the data inside can be obtained at any time.

Let {endLatitude,endLongitude} = app.globalData / / use the syntax of ES6 to structure data qqmapsdk.calculateDistance ({mode: 'driving', to: [{latitude: endLatitude, longitude:endLongitude}] Success: (res) = > {var num1 = 8: 1.9 * (res.result.elements [0] .distance / 1000) var play1 = num1.toFixed (1) / / take a decimal point app.globalData.play= play1 / / is also stored in the global Later, the payment at the end of the order will be made with this.setData ({play1:play1,})}. This is the end of the introduction on "methods similar to the development of Didi Taxi's Mini Program system". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.