WeChat Mini Program Development (3) Example Tutorial on Business Card Holder Details Page

New stuff added today! In addition to the development log itself, I also answered some questions from friends. Without further ado, let’s take a look at the rendering of the “Business Card Box” details page:

## Note the general requirements: behind the top is a carousel image, the QR code button pops up the modal box information, click on the WeChat bar, click to save to the phone, the address bar needs to display a map, and the business card sharing is also required. Modal box guide.

The first is the carousel image,
autoplay automatic playback, interval carousel time, duration switching speed, you can add it according to your own needs. Delete: It is the delete button. It is hidden after loading. The user needs to click on the carousel image to enter it, and then the carousel image will be displayed in full screen.
noClickImg and ClickImg: Switch between full-screen and non-full-screen carousel images. The click event changeClick is bound to switch. Just change the style.
Block: Picture list.
Number_img: Current carousel index (currentNumber), and image length set (cardnum).
Where currentNumber:

//Change the number when the carousel chart changes

//Initialize data

Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number+1

})

},

Here you can see the full screen

status When the close button is clicked, getBackStyle switches changeClick to imgFullScrenn on standby.

Click again to return to the original style,

After switching The event goes back to getBackStyle, use it flexibly.

Refresh the developer tools and you can see the specific effect as follows:

You can see on the details page that the information is basically the same style, and you can use the loop block provided by WeChat. The following is the personal information data in the details page. If there is information, it will be displayed. If there is no data, it will not be displayed. Here we use

//Chinese information

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

var personMessage= []

           for(var i = 0;i

            personMessage.push(chinaMessage[i])

           }

           //为空或者null是不显示判断

          for(var k in personMessage){

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

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

            }else{

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

            }

           }

Specifically processed in json data format, all we need to do is to bind the display value to it, and then we can call it.

This version of WeChat’s setData does not support asynchronous

updatingdata, so when a real network data request occurs, we must Add forceUpdata() at the end to force the view rendering, otherwise many inexplicable bugs will appear.

#Here is the explanation: This is the real data of the server.

You can see that an error will be reported. It may be the execution order of js. Go down one by one. At this time Network data is still being requested.

Just define a variable.

Of course the data here is pushed.

The following is the QR code pop-up message.

This is the QR code information of the pop-up modal box. The layout initialization is in the none state. There you need to bind data directly:

This.setData({
//模态框名字:”显示？隐藏”
})

The method is to let it display.

Just call the method from its place. (Supports repeated calls)
The company location map on the details page directly calls the interface provided by WeChat (the demo in the group has an implementation method).
You can see the effect achieved:

##[Related recommendations]

1.

Complete source code download of WeChat mini program

2.

WeChat mini program demo: Kaka Auto

3.

Simple left swipe operation and waterfall flow layout

The above is the detailed content of WeChat Mini Program Development (3) Example Tutorial on Business Card Holder Details Page. For more information, please follow other related articles on the PHP Chinese website!