Contents Chapter
1 Introduction
1.1 Development background
1.2 The meaning and purpose of the selected topic
1.3 Research status
1.4 Research content of this paper
Chapter 2 Introduction to key technologies
2.1 NODE.JS
2.2 MYSQL
2.3 VUE
2.4 HTML
2.5 JS
2.6 CSS
2.7 Small program developer tools
3 Chapter System Analysis
3.1 Small Program Design Ideas
3.2 Data Sheet
Chapter 4 System Implementation
4.1 Shopping Process
4.2 Store Opening Process
4.3 Mall Homepage
4.4 Discovery Page
4.5 Shopping Cart
4.6 My
4.7 Product Details
4.8 Order Confirmation Page
4.9 Add Address, Select Address
4.10 Address List
4.11 Order Payment and Password Input
4.12 My Order
4.14 Store Menu and View Store Information
4.15 Publish Products
4.16 Server
Chapter 5 System Test
5.1 WeChat Authorization and WeChat ID Binding
5.2 Product List and Details Test
5.3 Shopping Cart Test
5.4 Shopping cart single item and multi-item settlement
5.5 Add address and address selection
5.6 Order test
References
Acknowledgments
Chapter 1 Introduction
1.1 Development background
The rapid development of online shopping has spawned many e-commerce platforms. Cloud’s Taobao, Liu Qiangdong’s JD.com, Zhang Jindong’s Suning.com, Huang Zheng’s Pinduoduo, and so on. Among them, Pinduoduo is the fastest growing and fastest growing. Relying on the huge user group of WeChat, Pinduoduo rapidly expands the number of users. Its group bargaining strategy encourages users to share and spread. Share, and finally open the Pinduoduo mini program.
Small programs have three major features: go away after use, within reach, without installation and uninstallation; it is these three features that provide support for the rapid development of small programs. For small and medium-sized enterprises, the development cost of WeChat mini-programs is low, especially for companies that specialize in the development of mini-programs. They are proficient in the development of mini-programs and have a framework available, so they do not need to package themselves, and enterprises can use the WeChat platform to obtain relatively large traffic. Mini programs do not require separate APP promotion, operation and development. The Mini Program provides many interfaces, such as the scan function, photo function, payment function, etc. that everyone uses every day. These functions are often used in the use of WeChat. used in . While reducing development time and cost, it can also not change the user's usage habits, which cannot be easily achieved by other programs.
The changeable climate and unstable environment make people resist going out to a certain extent. The online shopping in all over the world, the authenticity of the goods, the consumption of the road and the difficulty of returning the goods have also made the development of e-commerce reach a bottleneck period. The growing number of counterfeit and shoddy products has also created some resistance to e-commerce. Not being able to see the product quickly, not being able to handle returns and exchanges well, made people feel very cold towards online shopping. This is a crisis, but also a business opportunity.
I think it's just a business opportunity, a big business opportunity for physical stores to counter e-commerce. Of course, this still needs to rely on the Internet. The propaganda effect of the Internet is self-evident. In modern society, no one can live alone without the Internet. The pain of being cut off from the world without the Internet is a reflection of many young people today. Although online shopping is good, it cannot solve urgent problems.
Because of this, I want to develop a WeChat applet-based shortcut program that prioritizes serving the surrounding area and then expands outward. The development of small programs is used in the development tools independently developed by WeChat: "WeChat Developer Tools", and third-party development tools such as Hbuilder can also be used for development. After the development is completed, it is packaged into a small program. Just upload it. It uses the same language as the previous development, which is similar to the mainstream development framework Vue. It comes with rich APIs for developers to use, which greatly reduces the workload and development difficulty of developers.
1.2 Significance and purpose of the selected topic
With the development of society, the advent of the Internet age, the popularity of mobile phones, and the development of transportation. Online transactions have more advantages than traditional transactions, because online transactions are more convenient. You can browse products from all over the country with a swipe of your finger. As long as you see the products you want, you can directly click buy to place an order and pay, and the rest Leave it to the logistics. We just need to wait patiently at home for the courier brother's call.
This was very popular at the beginning. While the number of online products has doubled, the number of defective products has also increased, and affected by seasons, weather, festivals, etc., many times people need to wait for a long time to get to merchandise. After waiting, after getting the product, I have long lost the love and impulse I had when I placed the order. The solution for e-commerce is to arrange more warehouses and logistics points, and increase logistics vehicles to solve the time spent on the road, which also increases costs.
So, why not develop a software that allows merchants to give priority to serving the surrounding areas, set up a service circle, real-time delivery within the circle, and express logistics outside the circle. Prioritize the display of nearby merchants and products for users, so that users can get the products in the shortest time, and even users can go to the store to choose according to the address. On the one hand, the store has been promoted to increase the flow of people. No matter where it is opened, the flow of people on the Internet is the same, which can reduce the cost of opening a store. The reduction of cost means the increase of profits, and the increased profits can be fed back to users. , so that both parties can benefit.
1.3 Research status
According to the data in March 2018, the number of WeChat users has exceeded 1 billion. After the mini program was launched in 2017, the number of users in that month was only 2 million. Later, with the continuous update of the mini program, more open entrances were added, including users sharing with friends and Moments, official account jumping and other multiple entrances, so that the number of mini program users began to increase. In December 2017, after the official launch of the WeChat mini-program represented by "jumping", the mini-program quickly entered people's field of vision, and the number of users also began to skyrocket. Statistics show that the number of WeChat mini-program users reached over 400 million that month. many. With the continuous updating of small programs, the use scenarios of small programs have also begun to increase, and the coverage has become wider and wider, and the user population of small programs has also formed a trend.
With the development of small programs and the increase in the number of users, many e-commerce platforms have also developed small program versions one after another. Pinduoduo is one of the most successful cases. Thanks to the easy dissemination of small programs, Pinduoduo quickly became popular in WeChat groups, and you can find traces of Pinduoduo’s presence in any group you open. Thanks to the continuous update and iteration of the WeChat platform, new functions have been developed one after another, and each time more functions will bring different surprises to people. That is, it is compatible with the previous version and adds new functions. Recently, a live broadcast function has been launched. It does not need to write codes and develop by itself. It only needs to operate the graphical interface of the management platform to realize the live broadcast function in the applet. This greatly reduces development and maintenance costs.
1.4 Research content of this paper
This paper mainly studies how to use WeChat applets to develop multi-merchant micro malls. The research ideas are as follows:
(1) Determine the needs. The overall requirement is: one WeChat account is one user, and each user can use the same account to shop and open a store. After becoming a user, continue to apply to become a store owner, and after passing the review, you can publish your own products in the mall;
(2) Determine the function. The two main functions of this mall are merchants listing products and users purchasing products; the transaction process of each product needs to be completed through the joint operation of merchants and users. Merchant puts products on shelves, users browse and purchase products, merchants deliver goods, users receive goods and evaluate them, which is a commodity transaction process.
(3) Study the implementation plan. Use the WeChat unique identifier to determine the uniqueness of each user and the association of data. Use user id and store id to realize the association between users and products; realize the association between store information and product information through store id and product id; realize the association between user information, order information and product information through user id, order id and product id; Use address id and user id to realize the association between user information and address information; use user id, product id and shopping cart id to realize the association between shopping cart, user and product.
(4) Page layout and functions. The home page displays products, which are sorted by sales volume by default; sorting by price, distance, and favorable rating can be added. The discovery page is used to search for products, such as product types, product brands, product names, product descriptions, etc.; the user on the shopping page stores the products added to the shopping cart by the user, and can place orders and pay for multiple products at the same time; the my page is used to manage my data, such as: orders, favorite products, favorite stores, my store, published products and personal information, etc.
(5) Page writing. The page is written using the "WeChat Developer Tools" provided by Tencent and referring to the "WeChat Mini Program Development Documentation", and uses the API provided by the framework to realize functions such as sharing, selecting pictures, uploading pictures, viewing pictures, and page jumping.
(6) Data docking. Use the built-in API of the framework to load data asynchronously and update data locally; record user operations in real time and feedback user needs; hide key information such as: user id, store id, user payment password, etc., and display page information such as: product information, orders Information, store information, etc.;
(7) Functional testing. Test whether each function can run normally and adapt to various user operations. For example, when placing an order, the user has not paid after reaching the payment page. At this time, the order should be changed to a pending order. When purchasing a product, the user sets the purchase quantity to 0, which is not allowed. When the user's balance is insufficient, the payment should fail, and the user will be prompted "Payment failed due to insufficient balance."
Chapter 2 Key Technology Introduction
2.1 Node.Js
Node.js is a framework that runs in a javascript environment. It allows javascript to develop back-end programs, and can realize most of the functions realized with other back-end languages. It can sit on an equal footing with back-end languages such as PHP, Java, Python, NET, Ruby, etc.
3.3.2 Advantages of node.js
The grammar of Node.js is almost the same as that of js. It can be said that those who have learned and used javascript can learn node.js development very easily. Node.js has opened up the application scope of Javascript, a great progress from the browser to the server. Realize the unification of the front-end and back-end programming environments, greatly reducing development time and development costs. Node.js has ultra-high concurrency capabilities, using single-threaded non-blocking I/O and event-driven mechanisms, so that Node.js programs are also parallel on a macro level.
2.2 mysql
MySQL is an open source relational database system; it has become one of the most popular database systems and is gradually entering the market of original commercial databases. It can be seen that many large companies such as Yahoo, Google, Facebook, and NetEase are using MySQL databases as their main databases, and even use MySQL as their core application database system.
2.3 Vue
In the past ten years, our web pages have become more dynamic and powerful because of JavaScript. We have put a lot of traditional server-side code into the browser, which has generated thousands of lines of JavaScript code. They Links to various HTML and CSS files [4], but lacks a formal organizational form, which is why more and more developers use JavaScript frameworks, and vue is one of the more popular ones at the moment. The Vue framework is a progressive framework for building user interfaces. The core library of Vue[2] only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. Vue uses js to write HTML, which reduces a lot of repetitive code to a certain extent and greatly improves the code writing speed; among them, v-for is used to generate code with loop; v-if is used to judge whether to display elements; and v Compared with -show, one exists, cannot be seen and does not take up space; the other does not exist at all; v-model multi-user obtains the input content in the input; 2.4 HTML
HTML
is the brick and stone of building a website, the basis of building a website, and commonly used tags There are <div></div> elements, which represent block-level elements, that is, they occupy one line by default, and are not in the same line as the front and rear elements; <span></span> elements, represent the primary color in the line, that is, if there is one before and after, it is also an in-line element element, it will be displayed in one line without wrapping, and setting the width and height of in-line elements will not take effect, which can be modified using the display attribute; <a></a> element, the jump of the user page, comes with a trigger style, only one is needed Address, you can jump to any page in the Internet, which is quite easy to use;
2.
JavaScript is a cross-platform, object-oriented scripting language. It is an essential thing for web page interaction; a website without Javascript is dead and soulless, and only by adding Javascript can the website be endowed with flexibility, life, and various actions and interactions; it can dynamically change HTML tags , you can also change the CSS style according to user operations. In short javascript is the soul of HTML.
Javascript can do a lot of things that HTML can't do when the website is running; such as obtaining user input and passing it to the background, and then displaying the things returned by the background to the user; 2.6 CSS CSS
is
Cascading Style Sheets (English full name: Cascading Style Sheets). It is a tool for users to arrange the tags in HTML in the way they want; if HTML is compared to raw materials, then CSS is a mold to specify the display of HTML; it has powerful functions and can use animation to make unexpected effects ;Simple and practical is one of its major features;
2.7 Mini Program Developer Tools
WeChat Mini Program, a type of Mini Program, the English name is Mini Program. It is a smaller and faster application than APP, which can be installed and used without downloading. It realizes the dream of programs being "at your fingertips". Users can use WeChat to scan or search to open the corresponding application. You can also enter the Mini Program and reach the specified page of the Mini Program by sharing friends, official account jumps, and app jumps. This is equivalent to integrating all applets into one project and jumping between pages. It is not only a single individual but also a whole.
The WeChat Mini Program Developer Tool provides a simple, efficient, easy-to-learn and easy-to-use application development framework and rich components and APIs. This greatly reduces development difficulty and increases development efficiency.
The development language used by Mini Programs is mainly JavaScript, and the development process of Mini Programs is similar to ordinary web development. For those who have been engaged in front-end development for a long time, the threshold for migrating from web development to small program development is not high, but there are some differences between the two.
