Hello everyone, this is my first nuggets article, every day in the nuggets above read the big guy’s article, finally summoned up the courage to decide to write an article of their own. Today, we will bring you a micro channel small program (McDonald’s order) + crawler in detail. Big guys can ignore me this small hot chicken, but if you are the front of the small white, you can take a look at yo, maybe it will help you.
Project introduction
This small program was created for a small event I recently attended (two days of 3-4 people working in teams to complete a small project). Honestly, how can you finish a small program in two days? In the first two days, we basically finished the basic structure of the small program, and then I finished the final work, which lasted four days.
Project Preview
Assignment of project work
Because I am the group leader, so the content of the work is assigned by me, our group of four members, just one page, but the page has simple and complex points, under my tyranny, points to the complex page also do not complain! Of course I am a good team leader, I assigned myself the menu page and the crawler data was also done by me. So what I’m going to share with you is my finished page.
Preparation before the project begins
Some preparations:
- Apply for an account: Enter the wechat public platform and apply for an account according to the instructions
- Development tools: VScode and wechat developer tools
- Applets official documentation
- Github application repository
Some tools used:
- Applets cloud development database functions
- Official wechat document
- MarkMan (tools that can measure and annotate images)
- Iconfont (Alibaba Vector icon library, with a large number of icon resources)
- Github (since this is a team project, we need to build a new repository and pull everyone in)
The github command line can be used to create a git push. If someone else submits the project first, you must first git pull it down and then git push it, otherwise it will cause conflicts.
In fact, in addition to these basic preparations, the most we should do is to think. One of my predecessors once told me that when you take over a project, you shouldn’t just start coding, you should close your eyes and think for a while. He did not elaborate on what he was thinking about, but this time, I realized what his predecessor meant. First of all, we need to take a close look at the design and create a framework in our mind so that we can improve our efficiency when writing code. Secondly, we should think about how to store data. For example, when doing e-commerce page, click the left navigation bar and the right content box will display the corresponding data, which involves the storage of data. So we should think about this logic before we write the code.
Project Completion Process
Here is the page I want to finish.
Order page
- At the top of the page is a swiper for scrolling through different ads.
- In the middle of the page is the address bar, which you can click to select different stores.
- At the bottom of the page is an order bar, and scroll view should be used on both the left and right sides.
- At the end is something like a shopping cart. This section is recommended as a component call to reduce code coupling. (Although I didn’t use components)
Without further ado, let’s analyze the structure.
First let’s take a look at the swiper section of the page
As you can see from the image, this is an advertising location for the latest products. This part is actually quite simple, just reference the swiper component of the applet.
<swiper indicator-dots="true"
indicator-active-color="rgba(242,207,4,1)"
autoplay="true"
circular="true"
interval="4000"
duration="1000"
class="header"
wx:if="{{hidden}}">
<swiper-item wx:for="{{adImage}}" wx:key="index">
<image mode="aspectFill" class="headerImg" src="{{item.image}}" />
</swiper-item>
</swiper>
Copy the codeSwiper does not accept hexadecimal color input. Swiper does not accept hexadecimal color input. You can find the conversion method on Baidu.
Next comes the address bar
Here are two images for comparison:
This part of the page is not easy, first of all, the big box outside should be set to flexible layout, convenient for the address bar on the left, and members on the right side of the row. The address bar also needs to be set to an elastic layout. Set flex-flow to column to distribute along the Y-axis, and then align-items: center; You can put the name and address in the middle of the box. Because this address bar can be clicked to switch the address, so the margins can not be written dead, can only use elastic layout to put them in the middle, if the address is too long, the page will automatically adjust the margins, very beautiful.
<! -- Address bar --> <view class="middle" wx:if="{{hidden}}">
<navigator style="display: inline-block" target="" url=".. /index/index" hover-class="navigator-hover">
<view class="address">
<view>
<view class="storeName">{{storeInfo.name}}</view>
<view class="storeAdress">{{storeInfo.address}}</view>
</view>
</view>
</navigator>
<view class="member">
<image src=".. /.. / images/menuImg 18 & FM/u = 324093054273864 = 26 & gp = 0. JPG" class="menberImg" />
<text class="memberText"</text> </view> </view>Copy the code.middle{
height: 110rpx;
width: 100%;
background-color: #fff;
display: flex;
border-bottom: 1px solid #eeeeee;
}
.address{
width: 600rpx;
height: 110rpx;
display: flex;
align-items: center;
border-right: 1px solid #eeeeee;
}
.storeName{
line-height: 40rpx;
font-size: 28rpx;
font-weight: bold;
margin-left: 40rpx;
}
.storeAdress{
line-height: 34rpx;
font-size: 22rpx;
color: # 737373;
margin: 0 40rpx;
}
.member{
width: 150rpx;
height: 110rpx;
padding: 16rpx 0;
box-sizing: border-box;
display: flex;
flex-flow: column;
align-items: center;
}
.menberImg{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin: 0 ;
}
.memberText{
position: relative;
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
text-align: center;
margin-top: 14rpx;
}
Copy the codeBecause here is a click event, click after the jump to the address page, and then select the address in the jump back to this page. So how do you pass data from page to page? After browsing through the small program development documentation, we found a very useful API, can temporarily put the page data in the cache, named with a key, and then in another page, also with the same key to get the data in the cache, let’s look at the code.
toDetail (e) {
let idx = e.currentTarget.dataset.idx;
if (idx) {
wx.setStorage({
key:"itemsIndex",
data: this.data.items[idx],
})
} else {
wx.setStorage({
key:"itemsIndex",
data: this.data.items[0]
})
}
wx.navigateTo({
url: '.. /menu/menu'})},Copy the codeThis is a click event that jumps to my page from another page, using wx.setStorage to access data.
wx.getStorage({
key: 'itemsIndex',
success: (res) => {
let storeInfo = this.data.storeInfo;
storeInfo.name = res.data.name;
storeInfo.address = res.data.address;
// console.log(storeInfo);
this.setData({
storeInfo
})
},
fail: () => {},
complete: () => {}
});
Copy the codeThis is how the data is received on the page, and this method is written in the onLoad lifecycle function so that the data is rendered to the page when the page loads.
Then comes the most valuable part of this page
This part should be used by all e-commerce small programs. In fact, it is not difficult to say, simple is not simple, as long as I carefully read the following explanation, should understand how to do.
<! --> <view class="menuContent">
<view class="scrollLeft">
<scroll-view scroll-y>
<navigator class="search" url=".. /" hover-class="none">
<image class="searchImage" src=".. /.. /images/menuImg/sou-suo.png" />
<text class="searchText"> Search </text> </navigator> <block wx:for="{{scrollLeft}}" wx:key="index">
<view class="{{curIndex === index ? 'selected' : 'select'}}"
bindtap="onSelect"
data-index="{{index}}"
data-id="{{item.id}}">
<image src="{{item.url}}"
class="selImg"
wx:if="{{curIndex === index}}" />
<view class="{{curIndex === index ? 'selectedText' : 'selectText'}}">
{{item.name}}
</view>
</view>
</block>
</scroll-view>
</view>
<view class="scrollRight">
<scroll-view scroll-y scroll-into-view="{{toView}}"
scroll-with-animation="true"
bindscroll="scrollTop"
style="height: 1205rpx">
<block wx:for="{{scrollRight}}" wx:key="index">
<view class="food"
wx:for="{{item.detail}}"
wx:key="index"
wx:for-item="food"
id="{{item.id}}">
<view class="foodName">{{food.name}}</view>
<view class="foodPrice"> $< the view class ="foodPriceNum">{{food. Price}}</view> </view> <image SRC ="{{food.img}}" class="foodPci" />
<view class="custom">
<view class="customText"> customize </view> <navigator URL =".. /cart/cart"
hover-class="none">
<view class="customBtn"
bindtap="gotoCart"
data-id="{{item.id}}"
data-index="{{index}}">
<image src=".. /.. /images/menuImg/toRight.png" class="customPic" />
</view>
</navigator>
</view>
<view class="order">
<view class="orderText"> </view> <view class="orderselect" wx:if="{{food.showCombo}}">
<view class="reduce" bindtap="OnReduce" data-id="{{item.id}}" data-index="{{index}}">
<image src=".. /.. /images/menuImg/jianhao.png" class="orderPic" />
</view>
<text class="orderTitle">{{food.title}}</text>
<view class="add" bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">
<image src=".. /.. /images/menuImg/jiahao.png" class="orderPic" />
</view>
</view>
<view class="orderBtn" wx:else bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">
<image src=".. /.. /images/menuImg/jiahao.png" class="orderPic" />
</view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
Copy the codeWe can see from the page structure that this part is divided into the left and right parts, and then we use the WX :for loop to loop the data onto the page. The left and right sides also use the Scroll bar. There is a hole here that I don’t know if you have trod on it. The component must be set to a fixed height or width (depending on whether you scroll in the Y direction or the X direction). If you don’t set the height, the scroll bar will fail. I have stepped on this pit many times, but every time I come across it, I will step on it again.
Here because CSS is too much, so I will not put up to show you, if you want to see friends can go to the bottom of the article at the github address to watch. There is also a loophole in CSS, which is that there are two ways to select a layout. The first is to use an elastic layout, where the left navigation bar and the right menu bar are side by side. The second is to use display: inline-block; Method to make the left navigation bar and the right menu bar become inline block elements side by side, although the layout is fine, but when you loop through the data, you will find that the data on the right is arranged in reverse order, I can’t find the cause of this method. Therefore, when the left and right sides need to be side by side and data needs to be filled, an elastic layout is recommended.
The next part is the most difficult logical part, and I’ll give you the left and the right. Although Baidu above there are a lot of linkage logic method, but baidu to the answer is not satisfactory, so I will take its essence to its dregs, write about their own logic, next I will give you a detailed about the effect of linkage.
Let’s take a look at how clicking on the left navigation bar and then clicking on the navigation bar transforms.
onSelect(e) {
console.log(e);
const that = this;
const curIndex = e.currentTarget.dataset.index;
const toView = e.currentTarget.dataset.id;
console.log(toView)
that.setData({
curIndex,
toView
})
},
Copy the codeClass =”{{curIndex === index? ‘selected’ : ‘select’}}” changes the style. At the same time, when the event is clicked, the ID value in the data is also assigned to the toView, and then in the right scroll bar, set the scroll-into-view=”{{toView}}”, through this property, the scroll bar can automatically jump to the corresponding toView data. This is a small program custom method, can be very convenient to click on the left, right automatic jump operation. But scrolling to the right and automatically switching to the left is not so easy.
.then(res => {
let heightArr = [];
const height = 180;
let heightList = 0
for(let i = 0; i < res.length; i++) {
heightList += res[i].detail.length * height;
heightArr.push(heightList);
}
// console.log(heightArr);
this.setData({
heightArr
})
})
Copy the codeSo in this case, I’m in the onLoad lifecycle function, requesting the data, receiving the data through.than, const height = 180; This is the fixed height for each of the food boxes I have set, so by multiplying this height by each of the categorized data, you obtain the heights of the different categorized in the right-hand sidebar, stored in the heightArr array.
scrollTop(e) {
// console.log(e)
const scrollTop = e.detail.scrollTop;
if(scrollTop > 100) {
this.setData({
hidden: false})}else{
this.setData({
hidden: true
})
}
const heightArr = this.data.heightArr;
for(let i = 0; i < heightArr.length; i++) {
if(scrollTop > 0 && scrollTop < heightArr[0]) {
this.setData({
curIndex: 0
})
} else if (scrollTop < heightArr[i] && scrollTop > heightArr[i - 1]) {
this.setData({
curIndex: i
})
}
}
},
Copy the codeSo we’ve got the interval on the right-hand side, and then how do we use it? In the ScrollView component, there’s a bindScroll =”scrollTop” method which is an event that can be triggered when the scroll bar is being rolled, and this method gets the distance between the top of the scroll and the top of the scroll. In this case, we can take the highlighted distance, obtain what part of the distance is in the heightArr interval, and assign an index value for that interval to the curIndex. So the style on the left can change as you scroll on the right. Have you learned this method? If not, please ask me in the comments section below!
OnAdd(e) {
const id = e.currentTarget.dataset.id;
const indexSelect = e.currentTarget.dataset.index;
let totalPrice = this.data.totalPrice;
let index = id.split('l') [1];let scrollRight = this.data.scrollRight;
const price = scrollRight[index].detail[indexSelect].price;
scrollRight[index].detail[indexSelect].title++;
scrollRight[index].detail[indexSelect].showCombo = true;
totalPrice = totalPrice + price;
this.setData({
scrollRight,
totalPrice
})
},
OnReduce(e) {
const id = e.currentTarget.dataset.id;
const indexSelect = e.currentTarget.dataset.index;
let index = id.split('l') [1];let scrollRight = this.data.scrollRight;
let title = scrollRight[index].detail[indexSelect].title;
let totalPrice = this.data.totalPrice;
const price = parseFloat(scrollRight[index].detail[indexSelect].price);
totalPrice = totalPrice - price;
if(title > 1) {
scrollRight[index].detail[indexSelect].title--;
this.setData({
scrollRight,
totalPrice
})
}else if(title = 1) {
scrollRight[index].detail[indexSelect].title--;
scrollRight[index].detail[indexSelect].showCombo = false;
this.setData({
scrollRight,
totalPrice,
})
}
},
Copy the codeThe above are some simple methods of addition and subtraction. When clicking the + sign, the onAdd event is triggered to obtain the index value of the current click event, and then find the price and quantity of each item in the data. In addition to the quantity +1, we also need to calculate the total price of all items currently. I’m not going to go into that.
Finally, the shopping cart section at the bottom of the page
<view class="shoppingList" wx:if="{{showList && totalPrice ! = 0}}">
<view class="shadow" bindtap="onList"></view>
<view class="shoppingBottom">
<view class="shoppingHeader">
<view class="hasSelected">
<image src=".. /.. /images/menuImg/shoppingGray.png" class="image" />
<view class="text"> Selected product </view> </view> <view class="empty" bindtap="onEmpty">
<image src=".. /.. /images/menuImg/lajitong.png" class="image" />
<view class="text"</view> </view> </view> </view> <scroll-view scroll-y style="max-height: 534rpx">
<block wx:for="{{scrollRight}}" wx:key="index">
<view class="shoppingBody" wx:for="{{item.detail}}" wx:for-item="food" wx:if="{{food.showCombo}}" wx:key="index">
<view class="name">{{food.name}}</view>
<view class="unitPrice"> $< the view class ="unitPriceNum">{{food.price * food.title}}</view>
</view>
<view class="orderselect addPlace">
<view class="reduce" bindtap="OnReduce" data-id="{{item.id}}" data-index="{{index}}">
<image src=".. /.. /images/menuImg/jianhao.png" class="orderPic" />
</view>
<text class="orderTitle">{{food.title}}</text>
<view class="add" bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">
<image src=".. /.. /images/menuImg/jiahao.png" class="orderPic"/> </view> </view> </view> </block> </scroll-view> </view> </view> <! <view class="shopping" wx:if="{{totalPrice ! = 0}}">
<view class="shoppingLeft">
<view class="shoppingCar" bindtap="onList">
<image src=".. /.. /images/menuImg/shopping.png" class="shoppingImg" />
</view>
<view class="shoppingPrice">
<view class="priceTitle">￥</view>
<view class="priceNum">{{totalPrice}}</view>
</view>
</view>
<navigator url=".. /settlement/settlement" class="shoppingRight" bindtap="gotoSettlement" >
<view class="rightText"</view> <image SRC =".. /.. /images/menuImg/yellowRight.png" class="rightImg" />
</navigator>
</view>
Copy the codeThis is the shopping list and the shopping cart section, position: Fixed; This part is fixed at the bottom of the screen so that it does not slide along with the screen. On top of the structure, a mask is also set, which is displayed when the shopping list is displayed.
// Whether to display the menuonList() {
letshowList = this.data.showList; showList = ! showList; This.setdata ({showList})}, // Clear the eventonEmpty() {
const scrollRight = this.data.scrollRight;
for(let i = 0; i < scrollRight.length; i++) {
for(let j = 0; j < scrollRight[i].detail.length; j++) {
scrollRight[i].detail[j].title = 0;
scrollRight[i].detail[j].showCombo = false;
}
}
this.setData({
scrollRight,
totalPrice: 0,
showList: false}}), / / jump to the cart page gotoCart (e) {/ / console log (e) const id = e.c. with our fabrication: urrentTarget. Dataset. Id. const indexSelect = e.currentTarget.dataset.index;let index = id.split('l') [1];let scrollRight = this.data.scrollRight;
const zhushi = scrollRight[index].detail[indexSelect];
console.log(zhushi);
wx.setStorage({
key: "cartFood",
data: zhushi
})
},
Copy the codeThese methods are basic methods, or very simple, you should know what to do, and I won’t introduce one by one.
Next is the key part of this article, friends quickly listen up!
The crawler crawls data
I believe that when you write small projects, the most headache is to write false data, every time to write false data, their scalp pins and needles. So I bring you a simple crawler, not only can easily get the data, but also appears both high-end and professional!
I wrote the crawler in the cloud function, so that when running the cloud function, the crawler can be directly stored to the cloud database. Before writing the crawler, you need to initialize the runtime environment into the Node runtime environment first, and then download the basic dependencies so that you can get the data on the web page later. Because the data I’m going to get here is in a different page, I’ll define all the pages so I can refer to them directly. I also created different empty arrays to store different data from different web pages in different arrays. Now that we’re done, let’s look at the code.
const cloud = require('wx-server-sdk');
const request = require('request');
const cheerio = require('cheerio');
const breakfast = 'http://www.5ikfc.com/mdl/menu/breakfast/'; // breakfast const chaozhitaocan ='http://www.5ikfc.com/mdl/menu/chaozhitaocan/'; // Const happymeals ='http://www.5ikfc.com/mdl/menu/happymeals/'; // Const sides ='http://www.5ikfc.com/mdl/menu/sides/'; // Drink = const drink ='http://www.5ikfc.com/mdl/menu/drink/'; // const dessert ='http://www.5ikfc.com/mdl/menu/dessert/'; // dessert const McCafe ='http://www.5ikfc.com/mdl/menu/mccafe/'; / / McCafelet breakfastList = [];
let chaozhitaocanList = [];
let happymealsList = [];
let sidestList = [];
let drinkList = [];
let dessertList = [];
letmccafeList = []; // Initialize cloud cloud.init() const db = cloud.database();function maidanglaoSpider(http, list) {
return new Promise((resolve, reject) => {
request(http,
(err, res) => {
if(err) {
reject('net error');
}
if(! err) { const body = res.body; const $ = cheerio.load(body, { decodeEntities:false$(})'.lside.fr.bdgrey.main_wrap .fx li')
.each(function() {
const img = $('a img', this).attr('src');
const name = $('a', this).text().trim();
const price = $('b', this).text().trim();
list.push({
name,
img,
price
})
console.log({
name,
img,
price
})
})
resolve(list);
}
})
})
}
maidanglaoSpider(breakfast,breakfastList)
.then(res => {
console.log(res);
})
Copy the codeFirst, I pass the HTTP and list parameters to the crawler, because I need to store the data from different pages in different lists. Then return a Promise function, which makes a request in the Promise function. If the request does not return an error, const body = res.body gets the HTML body structure of the web page, and passes
exports.main = async (event, context) => {
const breakfastData = await maidanglaoSpider(breakfast, breakfastList);
const chaozhitaocanData = await maidanglaoSpider(chaozhitaocan, chaozhitaocanList);
const happymealsData = await maidanglaoSpider(happymeals, happymealsList);
const sidesData = await maidanglaoSpider(sides, sidestList);
const drinkData = await maidanglaoSpider(drink, drinkList);
const dessertData = await maidanglaoSpider(dessert, dessertList);
const mccafeData = await maidanglaoSpider(mccafe, mccafeList);
let arrData = [breakfastData,chaozhitaocanData,happymealsData,sidesData,drinkData,dessertData,mccafeData]
for(let i = 0; i < arrData.length; i++) {
await db.collection('food').add({
data: {
id: i,
detail: arrData[i]
}
})
}
}
Copy the codeI first named the different data, then put them in the arrData array, and then walked through the array to store each item of data into the cloud function.
The cloud database contains the following contents
The right thing to do is to put every kind of data in a collection, and don’t skimp on the database.
To get the data
Above we have saved the crawler data into the cloud function, and then it is time to get the data.
wx.cloud.callFunction({
name: 'foodData',
success: (res) => {
// console.log(res);
db.collection('breakfast')
.get()
.then(res => {
let food = {};
food.id = `l${res.data[0].id}` food. The detail = res. Data [0]. Detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[1].id}` food. The detail = res. Data [1]. The detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[2].id}` food. The detail = res. Data [2]. Detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[3].id}` food. The detail = res. Data [3]. The detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[4].id}` food. The detail = res. Data [4]. The detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[5].id}` food. The detail = res. Data [5]. The detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
this.setData({
scrollRight
})
return res
})
.then(res => {
let food = {};
food.id = `l${res.data[6].id}` food. The detail = res. Data [6]. Detail. Slice (0, 5); food.title = 0;let scrollRight = this.data.scrollRight;
scrollRight.push(food);
console.log(food);
this.setData({
scrollRight
})
return res
})
Copy the codeI thought I’d loop through the data, and then loop it into an empty array that I defined. But I couldn’t put it in, and I couldn’t figure out why, so I took each item of the data out and put it in. The code is ugly, but it gets the data in. This function is written in the onLoad lifecycle function, so that the data is retrieved at page load time and rendered to the page.
At this point, my personal page is complete, and my friends have submitted their pages to Github, thinking that the work is over and they can have fun. But turn a thought, no one has done the work of page jump, ah, who let me be the group leader, can only by me this “old father” to do the ending work.
Finishing touches
In fact, the final work is very simple, is to change the route jump, and send the corresponding data on the line.
The codes for transmitting and receiving data are as follows:
wx.setStorage({
key:"itemsIndex",
data: this.data.items[idx],
})
wx.getStorage({
key: 'itemsIndex',
success: (res) => {
let storeInfo = this.data.storeInfo;
storeInfo.name = res.data.name;
storeInfo.address = res.data.address;
// console.log(storeInfo);
this.setData({
storeInfo
})
},
fail: () => {},
complete: () => {}
});
Copy the codeWhen jumping to a page, use wx.setStorage to put data into the cache, and then use wx.getStorage to get data from the cache on the page that needs data.
Well, the work is done, let’s show you our final results!
Heh heh, generally speaking, still calculate ok go
Some of the summary
Small program finished, there must be some work summary right, I think through the cooperation of several small partners, I sigh or quite a lot, to sum up a few points!
- The first! The most important thing is! Be at peace. Several partners writing projects together, it is inevitable that there will be some differences in views, but we must discuss calmly, not disagree. Although our team had some quarrels when writing the project, it was generally peaceful.
- The second! We must pay attention to the quality of the code. I used to write the code by myself and didn’t realize the importance of code quality. But through this cooperation, I found that the code must be simple and easy to understand, and I also need to write more comments, so that it is convenient for others to modify your code, and also convenient for myself to read.
- The third! Keep at it. Some things seem hard, but if you keep at it, you will find them, and they will fall apart a little bit, and you will completely defeat them.
- The fourth! Do not understand to ask, whether the teacher, students, or Baidu, do not understand to ask, can not put the problem there not to solve, as long as more ask more thinking, will be a little bit of thinking.
Upon the completion of the above points is this little summary, is also the end of this article, this article is my first time to write an article, so I can know is very poor, so you have any Suggestions, be sure to leave a message to me, convenient I improve, at the same time if you have what not understand about this project, also can ask in the comment area, I will be careful answer!
Here’s the github address for this project: github.com/Yeqing98/Ma… (You can take it for reference if you need it!)