September 13, 2018: The introduction of VUEX was added. VUEX was used in the store folder and the page of city acquisition on the home page, as well as in the page of city selection. You can refer to how to introduce and use VUEX in MPvue

September 6, 2018: Added search and the Amap API at the top of the home page

1. The user agrees to obtain authorization and the user does not agree to obtain authorization





September 5, 2018: Product sharing (forwarding function) was added to the product details page;



August 30, 2018: many people reported that login can not log in, because this requires their own configuration background can be, in order to let you experience some operations after login, HERE I added the default user, you can experience other functions! There may be problems here: everyone is using the same account, adding shopping cart, favorites and some delivery addresses may show the information added by many people. I will delete these information of online default users regularly, and now the latest clone code can be experienced.

You can also set your default account information in app. vue (so it doesn't conflict with others) var userInfo = {"openId":"oQmbb4sNZdxaUQZ0sfYgvtOP2S7c"."nickName":"He Yu-shuo"."gender": 1,"language":"zh_CN"."city":"Changping"."province":"Beijing"."country":"China"."avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlW xUibxQ/132"."watermark": {"timestamp": 1535513485,"appid":"wx601ce71bde7b9add"}};
  var openId = userInfo.openId;
  wx.setStorageSync("userInfo", userInfo);
  wx.setStorageSync("openId", openId);
Copy the code

preface

Have been planning to write their own interface, write a small program online, data is always unable to start, Inadvertently found a netizen crawl netease strictly selected mall some data about a total of 20 or so tables, is one of the quite detailed (part of the field and the part of the table data is modified,) usually writes most projects use vue, so choose the mpvue development directly, the back-end initially plan to use PHP but learned a half a month to learn things Too many to write in a short time, so I decided to use Node to develop the interface.

Small program source address

Applets server source address

Like the hope that we point a star to encourage, thank you for your support!!!!

Technology stand

Front end: applets, MPvue, async, await

Back end: Node, KOA2, mysql, knex.js operate database, Navicat used by visualization tools

Current Online Status

Due to the domain name record small program temporarily unable to go online, but the small program server has been online, interface is access to the online interface, you just need to clone the source code to the local, directly in the wechat developer tools, you can request to the data, see the effect, after the record will be added to the TWO-DIMENSIONAL code

Small program source address

Applets server source address 

Like the hope we point a start to encourage, thank you for your support!!!!

Mall main functions to achieve

  • Home page, features, categories, shopping cart, mine
  • Small program authorization login to obtain user information
  • The home page contains brand manufacturing page, brand manufacturing details page, new product launch page, popular recommendation page, each category list
  • Product details page, including FREQUENTLY asked questions, everyone is looking at the product list, add to cart, bookmark the product, buy now, place an order, select the shipping address
  • Search function, including history, popular search, search list display, fuzzy search tips
  • The section of the list of goods contains comprehensive, price ranking
  • Feature feature, including feature details, feature recommendation list
  • Categories, including large categories on the left and detailed categories on the right
  • Shopping cart, including product selection, left to delete goods, order and other functions
  • Address management, including new address and import wechat address, address editing, left swipe delete, setting the default address
  • My page, containing my favorites, address management, feedback

Partial effect display

1. Homepage display and special page effect


2, classified page, classified sub-page and search function, search list, history, fuzzy search tips




3, shopping cart function add shopping cart, single multi – selection, delete and commodity collection function



4. Address management



Project summary and some problems encountered

1. Add a page

Once a new page is added, you must run NPM run dev manually to take effect

2. Created Lifecycle issues that need attention

Do not fetch data in the Created life cycle of vue. Once the widget is started, all the methods in the Created life cycle of the whole project will be executed once. Therefore, do not use this life cycle

3. Problems to be paid attention to when sharing pages or pages with input data (e.g. details page, new address, search page)

In these pages, there is a common problem is that he will keep the last time you all operations, such as: although details page will get the new data, but he will flash to the previous data and then become the new data, for example: search page, when you quit, again into the search input is stored in the inside, the content of the last time we need to do is just to load the page The initial data defined in data in vUE needs to be reinitialized

// Initialize the data before loading the page to solve the problem above
 onLoad() {
  this.initData(); 
},
// Define the data that a method needs to initialize
initData() {
   this.listData = []
   this.productList = []
}Copy the code

3. Use of the onShow method

/ / Select * from onShow; / / select * from onShow; / / Select * from onShow; / / Select * from onShow; / / Select * from onShow

onShow() {  
this.getListData();
},Copy the code

4. Control of mpvue-Loader version (lock the version to avoid problems caused by official upgrade)

The locked version, the original project development is very good, but changed the computer, the same project re-download dependent results of various errors, found in github issue,mpvue-loader has been upgraded, does not support the previous main.js written configuration applets app.json, locked version only need the following two places, not locked version By default, the latest version will be downloaded

// Remove the previous ^ symbol to lock the version"mpvue-loader": "1.0.13"."webpack-mpvue-asset-plugin": "Hundreds" Copy the code

5. Set horizontal scroll for the native component

<scroll-view scroll-x="true" :scroll-left="scrollLeft" class="head">
   <div @click="changeTab(index,item.id)" :class="[nowIndex==index ?'active':'']" v-for="(item, index) in navData" :key="index"> {{item.name}} </div> </ scrollview > // Set the float for the child element, and the parent element will not use flex layout. } // The child element is set as follows, so that horizontal scrolling can be done. Item {display: inline-block; }Copy the code

6. Use the MPvue-WxParse rich text editor plug-in

If you want to use this plug-in, you must use my package.json and the corresponding configuration file. I locked the configuration version of mpvue-loader and so on.

The last

New features will be added in the future

Small program source address

Applets server source address

Like the hope that we point a star to encourage, thank you for your support!!!!