WeChat application number, small program development tutorial third bomb

Lei Feng network press : This article author Bokajun, a program. Lei Feng Network (search "Lei Feng Network" public number concerned) has been authorized by the author. Unauthorized refuse to reprint!

This article is the third part of the WeChat applet development tutorial series. Before reading this article, you may want to take a look at these two articles:

Heavy | WeChat application number, applet latest development tutorial

WeChat application number, the second program of the latest development of the applet

Thank you for your support! The two days Boca Jun received a lot of support and comfort, and also met many like-minded friends. At present, the tools and codes published by WeChat are not official versions, and they may be adjusted at any time. Let's first experience and learn. I've done my best with this tutorial recently. Even though it's hard, I'm very happy.

Chapter 5: WeChat applet Business card holder details page development

Today's content has added new dry goods! In addition to the development log itself, some friends' questions were answered.

Not much gossip, look at the effect of the card case details page:

Remarks Under the general demand, there is a carousel diagram behind the top, the QR code button pops up the modal box information, clicks the WeChat bar, clicks into the mobile phone, the address bar needs a map display, and the business card sharing is also a modal box guide.

The first is a carousel map, autoplay autoplay, interval carousel time, duration switch, can be added according to their needs.

Delete: is the delete button, loading is hidden, the user needs to rotate the map into the full screen after the carousel show out.

noClickImg and ClickImg: Switch between full-screen and non-full-screen carousel maps, bind the click event changeClick to switch, just change the style.

Block: Picture list.

Number_img: Current rotation index (currentNumber), and picture length (cardnum).

Where currentNumber:

// Change the number when the carousel changes

//Initialization data

Data:{

currentNumber:1

}

Slidechange:function(e){

Var number = e.detail.current;

this.setData({

currentNumber:number+1

})

Here you can see that when the close button is clicked in the full screen state, getBackStyle changes the changeClick to imgFullScrenn standby.

Click again to return to the original style, After switching, the event goes back to getBackStyle and it is used flexibly.

Refresh the developer tools can see the specific effect is as follows:

Details page can see the information is basically the same style, you can use the loop block provided by WeChat.

Here is the personal information data on the details page.

If there is information displayed, no data is not displayed, use here

//Chinese information

Var chinaMessage = res.card.groups[0].fields;

Var personMessage= []

For(var i = 0;i

personMessage.push(chinaMessage[i])

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â

}

// Is empty or null is not displayed judgment

For(var k in personMessage){

If(personMessage[k].value==null || personMessage[k].value==""){

personMessage[k]["display"] = "none";

}else{

personMessage[k]["display"] = "block";

}

Specifically dealing with the json data format, what we need to do is to bind it to the display value, and then we can call.

WeChat version of setData does not support asynchronous update of data, so we must add forceUpdata() at the end of a real network data request to force the view rendering, otherwise there will be many unexplained bugs.

Here is the description: If it is the server real data.

You can see that there will be an error, which may be the execution sequence of js, which in turn goes down. At this time, the network data is still in the request.

Define a variable.

Of course the data here is push.

The following is the QR code popup message.

This is the pop-up modal box two-dimensional code information, a good bureau initialization is the none state. Where it needs to bind data directly:

This.setData({

// Modal box name: "Show? Hidden"

})

The way is to let it show.

You need to use his place to call methods. (supports repeated calls)

Detail page The company location map directly calls the interface provided by WeChat (the demo in the group has an implementation method).

You can see the effect achieved:

The next chapter: Wechat (small programs) My page development.

Chapter 6: WeChat Applets My Page Development

Renderings and requirements:

The user has more than one business card and needs to switch to view left and right, and the menu button is switched downwards.

There is a need for sliding between two places. We use the sliding component swiper provided to us by WeChat and use nesting. The first layer is the card display and menu button sliding up and down, and the second layer is the left and right slide of the card display (supporting mutual embedding. Sets used, can be used with confidence.)

Vertical is the vertical slide, removed is the left and right slide.

The overall structure is as follows:

The click event is bound by the data switching method because it needs to support multiple clicks.

The initialization data is nextSlide:

Look at the nextSlide event again. currentSlide is the index of the current page, change it to complete the switching effect, you can see the map initialization data set cs is 0.

You can assign the current data.cs+1 and then switch the bind click event clickNext to nextSlideAgain.

Look at the nextSlideAgain event and subtract 1 index from it to achieve multiple clicks.

Specific effects can be seen.

Click on the personal business card to edit the business card page, because it needs to take the parameter, so use the wx.navgateTo.

You can see the effect:

Finally, dry goods:

We noticed this when we issued our first tutorial. How do we do real data interaction?

The first thing to go in is MD5 encryption, the reqster interaction layer.

How to quote MD5.js? Of course it is modular require, referenced js don't forget module.exports out.

Here is the requester.js reference to MD5.js.

ApplicationRoot is the server address (on the development settings page, look at AppID and AppSecret, configure server domain name).

Require.js Here module.exports is the exposed method to go out.

At this point in the global app.js, require.js is mapped to global. The global is global.

At that time, that page needs that page to accept it directly. Is modularity so good?

A complete implementation of the request to interact with data in the background is as follows:

Figure 1 is the package inside requester.js.

Figure 2 is page rendering that needs to call data.

There is no doubt that you can give more instructions and some known questions will be explained in the next chapter.

There should be some people who like the sublime editor. Someone asked how to switch highlights and switch directly to html in your lower right corner.

The next chapter: WeChat applet editing business card page development (involving points: search, sort, slide and page interaction).