review
Before reading this article, you can take a look at the content shared in the last article, mainly about the origin of wechat small program, its characteristics and product advantages, industry applications, development language, operation environment, preparation before development and so on.
This project is based on wechat small program native framework, common native components and official API interface implementation of small program version personality resume, and the introduction of cool ColorUI component library, to show a different wonderful picture.
Let’s try it online first. The code is as follows:
If you can help everyone, please click 👍 and ❤️, your praise is the author’s motivation to continue writing. The follow-up will output more high-quality technical blog posts, and we share together. All right, let’s get down to business.
The preparation work before development has been introduced, unfamiliar can go to have a look, here will not be detailed.
New project
Open wechat developer tools, select small program to enter, click new project, fill in according to the above prompts, especially to obtain the AppID directly go to small program background – development – development Settings, find the AppID copy and paste. Alternatively, click the test number to get the AppID, as shown in the figure below:
Click the create button in the lower corner again to enter the developer interface, as shown in the picture:
Click the details in the upper right corner for basic information – local Settings – check the legitimate domain name and Web-view service domain name, as shown in the picture:
After understanding the basic components of wechat developer interface (including menu bar, toolbar, simulator, directory structure – resource manager, editor, debugger, etc.), we will analyze the project requirements of mini program personality resume.
Demand analysis
For job seekers, preparing an excellent resume is essential. If you’ve ever been looking for a job, you probably know that you have to prepare a lot of resumes and send them out in a big way. Although the printing cost is not much, it feels like paper is a bit wasteful and not energy saving and environmental protection. I suddenly have an idea, wechat is so popular, can you develop a personal RESUME of your own H5 mobile terminal, browsing on the wechat page, but the experience is not good, but also limited. So can we consider the micro channel small program production and development of personal resume, completely close to the native experience, fast, in reference to the small program official documents for development (a certain front-end basis, some HTML + CSS + JS development experience, it is easier to learn to apply). The company interview does not need to bring resume (some companies will directly provide), with magic tools directly show small program code or search small program, instantly feel high, coupled with cool personality resume style, seems to be better than ordinary job seekers. Not only does it show off one of the highlights of your skills, but it also gets the interviewer’s goodwill and attention.
Functional design
Like a normal resume, but more succinct, it should highlight your strengths and highlights, especially the description of work experience (or internships, personal projects). The mini program project page includes: welcome page (launch page), basic information, work experience (project introduction), professional skills, technical blog (list of articles, article details).
* start page
Add a cool CSS3 animation for your resume cover.
* Basic information
There are three parts: personal information (name, position, gender, age, working years and contact information), education background and self-evaluation.
* Work experience
In a timeline, describe your work experience and successful projects related to the position you are applying for (full project experience is preferred).
* Professional skills
Colorful progress bar show, skilled skill level divided by percentage, good at research and learning back-end skills, and interpretation of the source code and analysis of unique insights can be written.
* Tech blog
It is a good habit to have a personal blog that reflects your understanding, love, summary and sharing of technology. You’ve also published your open source project on Github, contributed widgets, widgets, etc., plus a certain amount of Star status, not to mention the likes. If you can publish your own original articles in CSDN, Nuggets, Blog Park, Sifu and other very popular and active large developer community platforms, it is even better (interview bonus). Congratulations, you are one step closer to the great god, please keep it up. Let’s work hard together. Our future is not a dream.
Code implementation
It is recommended to take a look at the native framework, components, and apis of applets in the official applets documentation before starting. Attached here is the overall animation sketch of the project:
1) Start page
Open Explorer, find the app.json file in the root directory, add the path of the pages/welcome/welcome directory in the Pages array object, and press CTRL + C to save it, it will automatically compile and generate four files respectively: WXML, welcome. WXSS, welcome. Js, welcome. As shown in the figure:
Note: The start page path is placed first as the rendering of the first page of the initial load rendering. If you want a page to be displayed first, just switch places.
The page layout is written directly in the welcome.wxml file with the following code:
<view class="container">
<view class="bg">
<! -- <image src="/images/welcome_2.jpg" class="img"></image> -->
<text class="common title">Personality resume</text>
<text class="common subtitle" id="fadeIn">RESUME</text> <view class="common desc animate"> <text>I</text> <text>phase</text> <text>The letter</text> <text>I</text> <text>will</text> <text>into</text> <text>for</text> <text>numerous</text> <text>star</text> <text>In the</text> <text>The most</text> <text>bright</text> <text>the</text> <text>the</text> <text>one</text> <text>star</text> </view> <text class="common subdesc" id="fadeIn2">Looking forward to your discovery......</text> <view class="common animate2"> <text>a</text><text>sex</text><text>Jane</text><text>Through the</text> </view> </view> </view> Copy the codeAll still images are stored in the images folder, if not created first. As shown in the figure:
After the page layout is completed, the style is written in welcome. WXSS file, and animation effects use cSS3 text shadow, Transform attribute and animation attribute. The code is as follows:
.container {
position: relative;
}
.bg {
position: fixed;
width: 100%; height: 100%; margin: 0; padding: 0; background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEibpXx808iaVdEJ70eUvxjDWiaJgDfQ2gqN3ovbIH9gzIJnqqxKG12fCGKzBORGofM2nQKgY4ibdKHo tAw/0?wx_fmt=jpeg'); background-size: 100% 100%; overflow: hidden; } .common { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(50%, 50%); color: #fff; text-align: center; } .title { margin-top: -340rpx; font-size: 80rpx; text-shadow:0 0 5px #CCCCCC.0 0 10px #CCCCCC.0 0 15px #CCCCCC.0 0 20px # 095816.0 0 25px # 095816.0 0 30px # 095816.0 0 50px # 095816.0 0 80px # 095816.0 0 100px # 095816.0 0 150px # 095816; } .subtitle { margin-top: -240rpx; font-size: 50rpx; font-family: 'Times New Roman', Times, serif; color: #d79d31; text-shadow: 0 1px 0 #ccc.0 2px 0 #c9c9c9.0 3px 0 #bbb.0 4px 0 #b9b9b9.0 5px 0 #aaa.0 6px 1px rgba,0,0,0.1 (0),0 0 5px rgba,0,0,0.1 (0),0 1px 3px rgba,0,0,0.3 (0),0 3px 5px rgba,0,0,0.2 (0),0 5px 10px rgba(0,0,0,0.25); } .desc { margin-top: 180rpx; font-size: 35rpx; text-shadow: 2px 2px 1px pink; /* text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); */ } .subdesc { margin-top: 260rpx; font-size: 35rpx; text-shadow: 2px 2px 1px pink; } /* Animation */ .animate2 { margin-top: -340rpx; font-size: 80rpx; } .animate2 text { opacity: 0; display: inline-block; transform: translate(-150px, -50px) rotate(-180deg) scale(3); animation: revolveScale 3s forwards; } .animate2 text:nth-of-type(2) { animation-delay:.1s; } .animate2 text:nth-of-type(3) { animation-delay:.15s; } .animate2 text:nth-of-type(4) { animation-delay:.2s; } .animate text:nth-of-type(2) { animation-delay: 2.0 s; } .animate text:nth-of-type(3) { animation-delay: 2.05 s; } .animate text:nth-of-type(4) { animation-delay: 2.1 s; } .animate text:nth-of-type(5) { animation-delay: 2.15 s; } .animate text:nth-of-type(6) { animation-delay: 2.2 s; } .animate text:nth-of-type(7) { animation-delay: 2.25 s; } .animate text:nth-of-type(8) { animation-delay: 2.3 s; } .animate text:nth-of-type(9) { animation-delay: 2.35 s; } .animate text:nth-of-type(10) { animation-delay: 2.4 s; } .animate text:nth-of-type(11) { animation-delay: 2.45 s; } .animate text:nth-of-type(12) { animation-delay: 2.5 s; } .animate text:nth-of-type(13) { animation-delay: 2.55 s; } .animate text:nth-of-type(14) { animation-delay: 2.6 s; } .animate text:nth-of-type(15) { animation-delay: 2.65 s; } .animate text:nth-of-type(16) { animation-delay: 2.7 s; } .animate text { opacity: 0; display: inline-block; transform: translate(-150px, -50px) rotate(-180deg) scale(3); animation: revolveScale 3s forwards; } @keyframes revolveScale { 60% { transform: translate(20px, 20px) rotate(30deg) scale(3); } 100% { transform: translate(0) rotate(0) scale(1); opacity: 1; } } /* Fade-in effect */ #fadeIn { animation: fadeIn 3s 1; } #fadeIn2 { animation: fadeIn 1s 3 2s; } @keyframes fadeIn { 0% { opacity: 0; /* The initial state transparency is 0*/ } 50% { opacity: 0; /* Intermediate state transparency is 0*/ } 100% { opacity: 1; /* End state transparency is 1*/ } } Copy the codeAfter the animation effect of the startup page is set, jump to the next TAB page and view the API route and interface interaction of the official document. The code is as follows:
// pages/welcome/welcome.js
Page({
// Lifecycle function -- listens for page loading
onLoad: function (options) {
wx.showToast({ // Displays a message prompt box
title: 'Loading'. icon: 'loading'. duration: 400 }) setTimeout((a)= > { // Execute the registered callback function after the timer expires wx.switchTab({ // Jump to the tabBar page and close all other non-Tabbar pages url: '/pages/about/about'. }) }, 6000) }, }) Copy the codeThe default top navigation bar is removed from the startup page, and the following code should be added to the configuration item in the welcome.json page:
{
"navigationStyle": "custom" // Navigation bar style: default Default style custom Custom navigation bar, only the capsule button in the upper right corner is reserved
}
Copy the codeTo learn more about page configuration, go to the official documentation: Frame – Applets Configuration – Page Configuration, with detailed instructions.
2) Basic information
If you need to set the background color of the top navigation bar globally, modify the title of the navigation bar directly in the app.json global configuration item, and the code is as follows:
{
"window": { "backgroundTextStyle": "light".// Pull-down loading mode, support dark/light only
"navigationBarBackgroundColor": "#0081ff".// Navigation bar background color
"navigationBarTitleText": "Resume".// Navigation bar title text content
"navigationBarTextStyle": "white" // The navigation bar title color can only be black or white }, } Copy the codeAdd bottom Tabbar page toggle, directly in app.json global configuration, code as follows:
{
"tabBar": {
"selectedColor": "#0081ff".// The color of the text on the TAB. Only hexadecimal color is supported
"list": [ // List of tabs. minimum 2 to maximum 5 tabs
{
"pagePath": "pages/about/about".// Page path, which must be defined in Pages first "selectedIconPath": "images/nav_4_active.png".// The image path when selected "iconPath": "images/nav_4.png".// Image path, icon size limit is 40KB, recommended size 81px * 81px, network images are not supported. When Position is top, icon is not displayed. "text": "Basic Information" // TAB button text }, { "pagePath": "pages/index/index". "selectedIconPath": "images/nav_1_active.png". "iconPath": "images/nav_1.png". "text": "Work Experience" }, { "pagePath": "pages/skill/skill". "selectedIconPath": "images/nav_2_active.png". "iconPath": "images/nav_2.png". "text": "Professional skills" }, { "pagePath": "pages/blog/blog". "selectedIconPath": "images/nav_3_active.png". "iconPath": "images/nav_3.png". "text": "Tech Blog" } ] } } Copy the codeDownload the source code and extract it. Copy the main. WXSS and icon. WXSS style files in/ColorUI and put them in your root directory or utils folder. WXSS (app.wxss)
@import '/utils/icon.wxss';
@import '/utils/main.wxss';
Copy the codeTo view the DEMO effect of ColorUI component library, open the menu bar, click project – select Import Project – Import project pop-up box – drop down to select ColorUI source path – click test number – click import button. As shown in the figure:
Create the basic information page, the same as the operation of the launch page, I will not go into details here, the page layout about. WXML, divided into three blocks with border shadow to display personal information (add wechat, make phone calls, save address book), education background, self-evaluation. The code is as follows:
<view class="padding">
<view class="padding-xl radius shadow-warp bg-white margin-top">
<view class="flex justify-center">
<image class="cu-avatar xl round" src=".. /.. /images/avator.jpg"></image>
</view> <view class="flex justify-center margin-top-sm"> <text class="text-bold">Jack Chen</text> </view> <view class="flex justify-center margin-top-sm"> <text>Expected Position:</text> <text class="text-shadow text-orange">The development manager</text> </view> <view class="flex justify-center margin-top-sm"> <text>male</text> <text class="margin-left-sm">32,</text> <text class="margin-left-sm">8 years working experience</text> </view> <view class="flex justify-around margin-top-sm"> <view bindtap="showQrcode"> <text class="cuIcon-weixin text-xl text-blue"></text> <text class="margin-left-xs">Add WeChat</text> </view> <view bindtap="phoneCall"> <text class="cuIcon-phone text-xl text-blue"></text> <text class="margin-left-xs">Make a phone call</text> </view> <view bindtap="saveContact"> <text class="cuIcon-addressbook text-xl text-blue"></text> <text class="margin-left-xs">Save address book</text> </view> </view> </view> <! -- Education Experience --> <view class="padding-xl radius shadow-warp bg-white margin-top"> <view class="cuIcon-medalfill text-xl text-blue text-center"></view> <view class="edu margin-top text-center text-bold"></view> <view class="margin-top"> <text class="cuIcon-time"></text> <text class="margin-left-sm">2016.9-2020.7</text> </view> <view class="margin-top-sm"> <text class="cuIcon-home"></text> <text class="margin-left-sm">University of social</text> </view> <view class="margin-top-sm"> <text class="cuIcon-attentionfavor"></text> <text class="margin-left-sm">Computer information management</text> </view> </view> <! -- Self-evaluation --> <view class="padding-xl radius shadow-warp bg-white margin-top"> <view class="cuIcon-appreciatefill text-xl text-blue text-center"></view> <view class="evaluate margin-top text-center text-bold"></view> <view class="margin-top evaluate-cont"> <text>1. Optimistic, steady, practical, broad interests, diligent and studious;</text> <text>2. Strong sense of responsibility, strong adaptability, strong determination, strong execution, good at communication;</text> <text>3. Have the courage to meet new challenges, strong dedication and teamwork spirit, willing to accept all work tests, believe that my participation will create higher value for the enterprise or the company.</text> </view> </view> </view> Copy the codeBorder shadow layouts and styles go directly to the ColorUI component library – Element – Border Shadow. As shown in the figure:
.cuIcon-weixin..cuIcon-phone..cuIcon-addressbook {
vertical-align: -3rpx;
}
.edu..evaluate { height: 1px; border-top: 1px solid #ddd; } .edu::before..evaluate::before { position: relative; top: -25rpx; height: 50rpx; line-height: 50rpx; background: #fff; padding: 0 20rpx; } .edu::before { content: 'Educational Experience'; } .evaluate::before { content: 'Self-evaluation'; } .evaluate-cont { text-align: justify; } .evaluate-cont text { display: block; } Copy the codeAdd wechat function, the code is as follows:
// Add the binding event property name bindtap to the view component and the custom method name showQrcode
<view bindtap="showQrcode">
<text class="cuIcon-weixin text-xl text-blue"></text>
<text class="margin-left-xs">Add WeChat</text>
</view>
Copy the code// pages/about/about.js
Page({
// Add personal wechat functions - custom event handlers
showQrcode: function() {
wx.previewImage({ // Preview the image in full screen on a new page. During the preview, users can save pictures and send them to friends.
current: 'https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEiboiaOY2EnpjVFTGp7ia5JOux88eu1sLiciaz73WcZYEQIClqpcd2OQp9jbNW4NDuTbEuhZOToH8dt ZHBw/0?wx_fmt=jpeg'.// HTTP link for the current display image urls: ['https://mmbiz.qpic.cn/mmbiz_jpg/GxbBAxrsEiboiaOY2EnpjVFTGp7ia5JOux88eu1sLiciaz73WcZYEQIClqpcd2OQp9jbNW4NDuTbEuhZOToH8dt ZHBw/0?wx_fmt=jpeg'] // List of HTTP links for images to preview }) } }) Copy the codeThe function of making a phone call and saving the address book is similar to the development of adding wechat functions. The official small program also provides the corresponding API, the code is as follows:
// pages/about/about.js
Page({
// Make a phone call
phoneCall: function() {
wx.makePhoneCall({
phoneNumber: '137 * * * * * 615'. complete: (res) = > {}, fail: (res) = > {}, success: (res) = > {}, }) }, // Save the address book saveContact: function() { wx.addPhoneContact({ firstName: 'Jack Chen'. remark: 'Front End Engineer'. mobilePhoneNumber: '13788888888'. weChatNumber: 'Lazy farmer'. organization: 'Tencent Technology'. title: 'Senior Engineer' }) } }) Copy the code3) Work experience
The layout of work experience page is relatively simple, so I directly choose ColorUI component library – component – timeline, and modify the desired effect on this basis, as shown in the figure:
Because the length is too long, work experience interface source code, will not go up, if you need to view, please move to the article finally have free access.
4) Professional skills
Professional skills page layout is simpler, directly choose ColorUI component library – element – progress bar, and modify the desired effect on this basis, as shown in the figure:
Because the length is too long, professional skills interface source code, will not go up, if you need to view, please move the article finally have free access.
5) Tech blogs
With previous development experience, technical blog page layout, not to mention, is still the use of ColorUI component library – about, on this basis to modify their desired effect, as shown in the figure:
Click article Selection to jump to the article list page, using the Navigator component. The page layout includes a card-like article list and a card-like article list, also referring to the ColorUI component library. The article list data is implemented using the WXML list rendering syntax WX :for. I’ll skip the source code because it’s too long.
Finally, the article list page jumps to the article details page function realization, is through the small program native component – open ability – Web -view to realize the small program page jump. The official documentation describes the Web-view component in detail.
The specific code is as follows:
// pages/articles/articles.wxml
<view class="image" bindtap="bindViewTap" data-mid="{{item.mid}}" data-sn="{{item.sn}}" data-chksm="{{item.chksm}}">
<image src="{{item.imgUrl}}" mode="widthFix"></image>
<view class="cu-tag bg-blue">{{item.tag}}</view>
<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text> </view> </view> Copy the code// pages/articles/articles.js
Page({
bindViewTap: function(e) {
wx.navigateTo({ // Leave the current page and jump to a page in the application. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applets is up to ten layers.
url: `/pages/article/article? mid=${e.currentTarget.dataset.mid}&sn=${e.currentTarget.dataset.sn}&chksm=${e.currentTarget.dataset.chksm}`.// The path (package path) of the non-tabbar pages in the application to jump to, which can be followed by parameters. Between parameters and paths? Parameter keys and parameter values are connected with =, different parameters are separated with &; Such as' path? key=value&key2=value2'
}) }, }) Copy the code// pages/article/article.wxml
<web-view src="https://mp.weixin.qq.com/s?__biz=MzIzMzQ0NDUwNQ==&mid={{mid}}&idx=1&sn={{sn}}&chksm={{chksm}}&token=201203996&lang=zh_C N#rd"></web-view>
Copy the code// pages/article/article.js
Page({
/ * ** Initial data for the page* /
data: { mid: ' '. sn: ' '. chksm: ' '. }, / * ** Lifecycle functions -- listen for page loads* / onLoad: function (options) { // Inside page jump Accept parameter values are obtained from options console.log('options===',options) this.setData({ // Change the initial data state mid: options.mid, sn: options.sn, chksm: options.chksm }) } }) Copy the code
Upload, review, publish
upload
After completing the development, click the upload button in the upper right corner of the toolbar to submit the code, and press the prompt box to complete the operation.
audit
Log in the small program background – Version Management – Version development – Submit for review (complete the operation as prompted), as shown in the picture:
After the submission is successful, we will see the review status of the re-review version. Please pay attention to the review results at any time.
release
If approved, the approved version column will appear a release button. After clicking “Publish online”, the column of online version will be displayed, as shown in the figure:
If you do not download the small program code, you can also go to wechat – Discover – small program – click the search icon in the upper right corner – input personalized resume, online experience their own achievements.
Write in the last
Here small program from a quick start to the project actual combat development of the next two articles on the end, if there is something wrong with the article, welcome criticism, is willing to accept humbly. If you can help us, please click 👍 and ❤️. Thank you again. I also look forward to more exchanges and learning with you.
Recommend relevant high-quality articles to read
- NodeJS full stack to develop a fully functional Express project (with complete source code)
- Vue+Echarts to build big data visualization cool display company brand actual combat project sharing (attached source code)
- The front-end must know what MySQL is all about – the NodeJS full stack growth path
- 2020 worth collecting and learning more than 280 H5 games, from the beginning to the thorough understanding of it (attached source code)
Free quick access to source code: pay attention to the public number, and then in the public number back to the “source” two words can be obtained.
Welcome to pay attention to the author’s public number: lazy code farmers
