WeChat Mini Program Development (6) "Edit Business Card" Page Development

There are two paths for editing business cards, which are divided into the process of adding a business card and the process of modifying the business card. The process for users to manually fill in a new business card is as follows:

##First jump to our new business card page 1. You need to pass the user’s current userId, wx.navigateTo jumps with value. Manual is true to set the user to take the new route.
Vertical Adding it means sliding vertically, removing it means sliding left and right. The overall structure is as follows:

New business card page 1 The basic layout is as follows:

Get userId.

It is also very easy to use the input component verification that comes with WeChat, such as maxLength

attribute, which can limit the length of user input. For example, the length of my name is up to 5 digits, so just use the number 5.

#You can also customize some verification effects. Specifically, you can perform some verification configurations according to your needs, get the values ​​entered by the user, and perform operations.

The built-in modal box prompt component is bound here.

where modalHidden2 is the modal box switch.

In addition proptText is the content that needs to be prompted.
Even many input boxes support dynamic changes in data, which is very convenient.

The actual effect is very fast. It saves a lot of things than before. Writing small programs, I found that the biggest advantage may be that we don’t have to consider a series of Compatibility issues.

Finally, there is an avatar to upload pictures. After testing, there are still some problems uploading to the backend server. It may be due to the imperfection of the internal beta version.

The setting is directly the background image.

Submit the form and jump. To submit the form, you use the built-in bindsubmit event component. Just add formType="submit" to the button component. Another thing to note is that when using the form submission function, the input needs to add the name attribute. This The delivery method is in the form of key-value pairs.

At this time, jump to edit page 2. This page identifies the matching company based on the mobile phone number filled in by the user. The page is very simple. It's just a data

loop, the radio button may need to be beautified in the future.

are also some

data binding and verification effects.

The actual rendering effect can be seen.

This is basically the same logic as the first edit page, some basic verification and submission, here Just talk about the first two steps. The same goes for editing page 3. I won’t go into too much detail here.

Modify the business card process renderings and requirements. Modifying the business card is to render all the previously filled in personal information at once for the user to change:

This card image module has some problems uploading images for the time being. Here it is imitating a jump component. It is recommended that the page that needs to be jumped is controlled by wx.navigateTo. One point, wx.navigateTo provides us with 3 different jumps routes, all of which are well encapsulated, and many jump pages involve passing values and the like, which can be achieved Unified management can also avoid some invisible bugs. In short, it should be determined according to business needs:

Name mobile phone required module:

Personal information module, directly loop (block) out:

## When #Onload we request required and optional data:

• requiredGroup Required Chinese information

• notRequiredGroup Topic Chinese information

• requiredGroupEn Required English information

• notRequiredGroupEn English information for topic selection

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

Chinese and English information required and optional Fill in and render:

The form submission data conversion here is a bit complicated (you can do it according to business needs, you don’t have to spend time studying the methods here), get It is an array, which is converted and passed according to the data format required by the background.

Today I will go back and figure out how to implement the fixed-point jump function of homepage A, B, and C.

The first is the small index layout on the right and data binding. The data binding is the same as the letter on the business card list. Below the letter If there is a business card, it will be rendered. If there is no business card, there is no need to render. The id is also the current letter and the content displayed on the right:

data sort, and group The .name data is the same:

This is because # does not support being set to id (that is, id="#"), so a conversion was performed.

Click event: Get the current ID, and bind data toView to the current ID.

First of all, the business card list and the alphabetical index on the business card are all in the scroll-view. This scroll-view must be set to a fixed height, set to 100% and 100vh are invalid. The scroll switch of the y-axis is turned on, and scroll-into-view needs to jump to the id of its child element.

You can take a look at:

This group.name ==sortmsg is equivalent to A==A, B==B. The same principle applies.

#If there is a menu bar at the top here , you have to pay attention to the layout, otherwise the height of the menu bar will be offset downwards. In fact, you can avoid this problem as long as it is at the same level as the alphabetical index (the top menu here is separated by a template, and the separated template It should be noted that some data that needs to be bound to the template here will be invalid, and the details will not be further studied).

The jump function is basically implemented (ohter is # at the bottom).

【related suggestion】

1. Complete source code download of WeChat Mini Program

2. Click the tabbar to change icon

3. WeChat Mini Program demo ：Lezhu

The above is the detailed content of WeChat Mini Program Development (6) "Edit Business Card" Page Development. For more information, please follow other related articles on the PHP Chinese website!