Lei Feng Net Note: 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 fourth bullet for a small program development tutorial. The following articles follow:
Heavy | WeChat application number, applet latest development tutorial
WeChat application number, the second program of the latest development of the applet
WeChat application number, small program development tutorial third bomb
Thank you for your support! Bocajon rested for two days at the weekend and returned to combat today. The WeChat official tools and tutorials were released on Friday evening. The recommended programs and small partners were all trying out. Combining tutorials and code, writing their own demos was also good.
Not much gossip, start updating!
Chapter VII: Wechat (Small Program) Edit Business Card Page DevelopmentThere are two paths for editing a business card, which are divided into a new business card process and a modified business card process.
The user fills in the new business card process:
19421.jpg?imageMogr2/format/jpg/quality/90" />
First jump to our new business card page 1 needs to pass the user's current userId, wx.navigateTo with a value jump.
Manual is true to set the user to take the new route.
The basic layout of the new business card page 1 is as follows:
Take the userId.
It is also very easy to use the input component verification that comes with WeChat, such as the maxLength attribute, which can limit the user input length. For example, my name length is 5 digits, and the direct digit 5 ​​is.
You can also customize some verification effects. You can perform some verification configurations based on the requirements and take the values ​​entered by the user to perform operations.
This is bound to the own modal box prompt component.
Where modalHidden2 is a modal box switch.
In addition proptText is the content that needs prompting.
Even though many input boxes also support dynamic data changes, it is very convenient.
The actual effect, very quick, save a lot of things than before, write small programs, found that the biggest benefit may be that we do not have to consider a series of compatibility issues.
Finally there is a picture upload picture, test the next upload to the background server is still a bit problem, it should be the beta version is not perfect cause it.
The setting is directly a background image.
Submit forms and jumps.
The submission form uses the own bindsubmit event component. You can add the formType="submit" to the button component. It is also worth noting that when you use the form submission function, you need to add the name attribute to the input. This transfer method is a key value. Passed on the form.
This time jumps to the edit page 2 page, this page is based on the user's mobile phone number to identify the matching company, the page is very simple, a data cycle only, radio box may need to beautify the future.
It is also some data binding and validation.
The actual rendering effect can be seen.
This is basically the same logic as the first editing page, some basic verification and submission, here we talk about the first two steps, edit page 3 is the same, here is no longer too much.
Modify the business card flow chart and requirements, modify the business card is a one-time rendering of the previously filled in personal information, for users to change:
Business card picture module, upload pictures for a moment there is still a problem, here is to imitate a jump component, compare the proposed page need to jump or use wx.navigateTo control a little better, wx.navigateTo provides us with 3 different jump routes , The package is very good, and many of the jump pages implicated in the value of the class, you can achieve unified management can also avoid some invisible bugs, in short, according to business needs to determine:
Name phone required module:
The personal information module is directly blocked:
When Onload we request mandatory and optional data:
requiredGroup Required Chinese information,
notRequiredGroup topics Chinese information,
requiredGroupEn Required English information,
notRequiredGroupEn English information in the topic.
//1. The attribute group data of the Chinese information of the company corresponding to the requesting business card is divided into required and optional fields.
/ / Select item variable starts with no
requester.getOfflineCardInfoGroupFields(userId, cardId,
Function (res) {
//debugger
Var 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 rendering:
Here the form submit data conversion is a bit complicated (we do according to business needs, do not spend time to study the method here), get an array, according to the background data format required to transfer the past.
Let's go back today and figure out how to implement the fixed-point jump function on the home page A, B, and C.
The first is the small index layout on the right and the data binding, data binding, and the letters on the business card holder list. The business card is rendered under the letters. If there is no, no rendering is required. The id is also the same as the current letter displayed on the right:
The data sort is the same as the group.name data:
This is because # does not support id (ie id="#"), so a conversion is made.
Click event: Get the current ID, and the binding data toView is the current ID.
First, the list of business cards, the alphabetical index on the business card are in the scroll-view, this scroll-view must be set to a fixed height, set to 100% and 100vh is invalid, the y-axis scroll switch is turned on, scroll-into-view needs Jump to the id of its child element.
You can see:
This group.name==sortmsg equals A==A, B==B.
Here, if there are some menu bars at the top, you should pay attention to the layout, otherwise there will be a downward offset of the height of the menu bar, in fact, you can avoid this problem as long as the same level with the alphabetic index (the top menu here When the template is separated, it is necessary to pay attention when separating the template. Some data that needs to be bound to the template will fail. The details are not further studied.
The basic implementation of the jump function (other is # bottom).
Well, today is updated here, the next one we talk about "WeChat applet grouping function development and other small features perfect." I was busy working lately during the day. I only had time to write a tutorial for the night. I didn't have time to reply to posts on the forum. Everyone came to exchange QQ groups. Many gods and masters shared a lot of dry goods in the group. Friends. You can also freely ask questions and exchanges.