After one and a half weeks of development, MY wechat activity page based on Vue was barely launched. I experienced many pits and filled many pits. Generally speaking, I benefited a lot.

This article will cover:

  • Vue active page frame construction
  • Use of routing when developing active pages
  • The active page communicates with the user of the master site
  • Actually the problem with the line
  • Summary of this development

Vue active page frame construction

I believe that everyone has received the demand to do the activity page, and most cases are based on the wechat environment. In this context, VUE’s convenient and fast production model seems to have an advantage over other frameworks.

Activities generally develop a single page to use the technology a Vue/Vue – the router/axios/sass/webpack, seems like a lot, but in fact the Vue – cli are help us to solve these problems, this configuration is ok, You can quickly build a usable active page framework by changing or adding a few configurations according to your needs. Below is the portal built by the frame of the active page ↓↓

Remember to develop active pages from scratch

Use of routing when developing active pages

A mobile terminal activities page development success, experience personally think that is a big factor, since talked about the experience so routing cannot be ignored, naturally good routing can jump to the whole activity for many pages, but the actual development, the routing is not so easy and our business, especially in the WeChat environment.

The activity page most of the time is spent in the routing pit, whether it is wechat authorization or wechat pay are potholes, the lower part of the activity page routing use portal ↓↓

Develop active pages based on VUE – routing correlation

The active page communicates with the user of the master site

About this or want to briefly mention, the active page is generally not wechat authorization or payment, at this time if you can reuse the user data of the main site is cool a lot (especially on the user experience), so it is suggested that the active page can be placed under the domain name of the main site, why? We can share things

Actually the problem with the line

① The base path on the VUe-router is faulty

The routing article mentioned the use of base paths to solve the problem of non-root paths pointing to index, but the fact finding was not feasible (not in my development context, of course).

The browser always adds ‘/’ to the end of my path, which causes wechat Pay to fail to start (especially on Android). Finally, I changed the path in the route to the corresponding full path to solve this problem.

(2) Initializing wechat JSSDK

In the beginning, JSSDK was initialized in main.js, but it was found that the current wxReady state could not be well obtained in vue application, which may cause problems in wechat sharing. Finally, a separate component was created to load the wechat JSSDK and monitor the status of $route, resetting wechat sharing every time the route changed.

One of the benefits of putting the methods that initialize the JSSDK into a Component is that it can use props and state, which can be used in response to certain needs.

③ About payment

When we first developed it, we put all the payment-related methods in utils.js, but as the development went on, the page became deeper and the ways to trigger payment became more and more different. Finally, we decided to separate the payment-related code and put it in the pay.vue component, mounted in the top parent component. Vuex handles the payment logic.

④ Project Catalog

Finally, I will give you a look at the directory structure of this project, although it is estimated that it is still quite a pit, but still hope to be helpful.

Not only did I build Utils in JS this time, but I also tried to set up a similar “public library” on SCSS to store some px2REM methods and some common mixins, and the experiment was good.

In addition, I recommend putting HTML, CSS, JS, and even images in the same folder if the project is not too large, whether at the Page level or component level, so that it will work as the project gets bigger.

The above mentioned wechat JSSDK and payment component are written in the Components folder for future maintenance “just as the name implies”.

conclusion

This is one of the few small and medium-sized active pages to be solved by one person alone, and the workload is relatively saturated for more than a week (although it is all looking up documents). In fact, not only in the project construction and logic spent energy, in the page design draft restore is also spent a lot of time, after all, involves many lists and horizontal and vertical list mix, and the page information is very large, the layout is also suffocating to write.

After my colleagues finish the content to be shown, I hope I can show it to you here. Thanks for reading ~