A preface.

This article describes how to use UNI-App to quickly develop mall wechat mini program and how to access background Spring Cloud micro service through actual practice.

Youlai-mall project is a set of full-stack mall system, and the technology stack is distributed micro-service plus the front and back end separation mode, so some previous articles are needed as a basis before the actual practice of this project.

Background micro services

  1. Spring Cloud of actual combat | first article: Windows setup Nacos services
  2. The second Spring Cloud of actual combat | : Spring Cloud integration Nacos registry
  3. Spring Cloud of actual combat | article 3: the Spring Cloud integration Nacos configuration center
  4. Spring Cloud of actual combat | article 4: Spring Cloud integration Gateway API Gateway
  5. Spring Cloud of actual combat | article 5: Spring Cloud integration OpenFeign between micro service calls
  6. Spring Cloud of actual combat | article 6: the Spring Cloud + Spring Security Gateway OAuth2 + JWT micro service unified certificate authority
  7. Spring Cloud of actual combat | the seven articles: Spring Cloud + Spring Security Gateway OAuth2 integrated unified certificate authority platform to realize the logout disable JWT scheme
  8. Spring Cloud of actual combat | the eight: Spring Cloud + Spring Security OAuth2 + Vue no refresh perception to realize the separation mode before and after JWT renewed
  9. Spring Cloud of actual combat | the nine article: Spring Security OAuth2 authentication server unified authentication custom exception handling
  10. Spring Cloud of actual combat | article 10: Spring Cloud + Nacos integration Seata 1.4.1 the latest version of the micro service architecture to realize the distributed transaction, advanced road must move beyond the threshold
  11. Spring Cloud of actual combat | article 11: Spring Cloud Gateway Gateway for RESTful interface access and the power button fine-grained control

Background management front end

  1. Vue – element – admin combat | first article: remove the mock to detail the service interface, build SpringCloud + vue front end separation management platform
  2. Vue – element – the second admin combat | : minimal change access backend implementation according to the dynamic loading menu

Wechat applets

  1. Vue + uni – app store actual combat | first article: from 0 to 1 to quickly develop a mall WeChat applet, seamless access Spring Cloud OAuth2 authentication authorization to log in

Application deployment

  1. Docker combat | first article: Linux installation Docker
  2. The second Docker combat | : Docker deployment nacos – server: 1.4.0
  3. Docker combat | article 3: the IDEA of integration Docker plug-in a key to achieve automatic packaging deployment service project, once and for all the technology is worth a try
  4. Docker combat | article 4: Docker to install Nginx, implementation is based on the vue – element – admin deployment project to build the framework of line
  5. Docker combat | article 5: Docker enable TLS encryption solution to expose security vulnerabilities caused by port 2375, hacked three lessons learned of the cloud hosts

Ii. Project introduction

1. Project Introduction

Youlai-mall is a full-stack mall system. The whole system adopts microservice architecture, and the interaction mode of front and back ends is separated. The back end adopts Spring Boot + Spring Cloud and uses Spring Cloud Alibaba to expand microservices. The front-end of the management platform adopts Vue + Element-UI, which is based on the mature back-end front-end solution vue-element-admin. Uni-app is used in wechat applets.

2. Technical selection

Believe a Java backend development, back-end and management platform front-end technology stack selection should be beyond doubt, the current mainstream.

As for why we choose UNI-App instead of wechat native, MPvue, Vant and other frameworks based on VUE for wechat applets development, I can’t say that my personal opinion is not good, I can only say that the problem of not rich components is not very friendly for a half-skilled front-end, let alone rapid development. It was not until I was confused that I met uni-App, a magical device, which can be said to have been met very late. The following article will prove through practice that Uni-App is not an empty name of Wave.

In fact, micro channel small program development is not necessary to tangle with the use of a specific framework, feel that which components are good to introduce directly, it can be described as “the greatest success of the world”, in short, suitable for their own good.

If you are still entangled in the framework selection of wechat small program might as well see more and understand more, or the back will waste more time cost and energy, can refer to the following article.

In-depth evaluation of cross-end frameworks: wechat native, WEPY, MPvue, Uni-App, Taro, Chameleon

3. Project demonstration

  • An overview of the project

  • Background micro services

  • Management of the front

  • Wechat applet end

  • The mobile APP end

APP is introduced: vant combat | first: have to mall mobile APP project is introduced

Iii. Actual combat of projects

1. Development tools

As a Java Developer, IDEA is basically enough for daily development, but wechat small program development must have wechat Developer tools. Besides, because uni-app framework is used, HBuilderX is officially recommended. Click the name below to jump to the official address for download.

Wechat developer tools

HBuilderX

PS: Accustomed to IDEA shortcut keys before using HBuilderX development, it is recommended to switch the shortcut key scheme in advance, is not a very humane development tool.

2. Personal application for wechat applets development

Enter the wechat public platform to apply for the development of small programs. After creating small programs, the development Settings in the development column will get the corresponding AppID(small program ID), as required below.

PS: The Yilai Mall project is based on personal small program development. Compared with enterprises, individuals have less interface rights, such as obtaining users’ mobile phone numbers and calling wechat payment interfaces. I believe that most children do not have the conditions to get enterprise, also reluctant to spend thousands of dollars in unnecessary circumstances to register a company. But the personal number is basically enough, you can also make up for the lack of personal number through the “curve to save the country”, for example, you can use XorPay, Payjs and other third-party payment platforms to make up for the personal number can not call the payment interface.

3. Create the uni-App Store template

Back-end developers are generally not good at front-end page design and development, how to quickly develop wechat mall small program pages?

Remember the amazing Uni-App framework mentioned above? It provides a plug-in marketplace with many components and templates developed based on uni-App.

Uni-app plug-in market

Search for the keyword “mall”, select the most downloaded project template and click enter

Click “Import plug-in with HBuilderX” to automatically launch the application and load the project into the workspace.

4. Configure wechat applets to access the Spring Cloud OAuth2 authentication center

4.1 wechat applets

The default value of imported mall templates is local JSON data, so access to background microservices needs to encapsulate AXIos requests. Vuex also needs to be added to manage state. The adjustment steps of wechat applets are as follows:

4.1.1 Modifying the name of the Imported Template item to Youlai-mall-appP and configuring AppID in manifest.json

4.1.2 Encapsulating the request AXIos

4.1.3 Adding vuex for Status Management

4.1.4. Logon page and logon code logic adjustment

4.1.5. Start of wechat mini program

4.2 Background micro-services

4.2.1 Wechat Authorized Login access Authentication Center

private Result handleForWxAppAuth(Principal principal, Map<String, String> parameters) throws WxErrorException, HttpRequestMethodNotSupportedException {

        String code = parameters.get("code");
        if (StrUtil.isBlank(code)) {
            throw new BizException("Code cannot be empty.");
        }

        WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
        String openid = session.getOpenid();
        String sessionKey = session.getSessionKey();

        Result<MemberDTO> result = remoteUmsMemberService.loadMemberByOpenid(openid);
        if(! ResultCode.SUCCESS.getCode().equals(result.getCode())) {throw new BizException("Failed to obtain member information");
        }
        MemberDTO memberDTO = result.getData();
        String username;
        if (memberDTO == null) { // Wechat authorized login member information does not exist
            String encryptedData = parameters.get("encryptedData");
            String iv = parameters.get("iv");

            WxMaUserInfo userInfo = wxService.getUserService().getUserInfo(sessionKey, encryptedData, iv);
            if (userInfo == null) {
                throw new BizException("Failed to obtain user information");
            }
            UmsMember member = new UmsMember()
                    .setNickname(userInfo.getNickName())
                    .setAvatar(userInfo.getAvatarUrl())
                    .setGender(Integer.valueOf(userInfo.getGender()))
                    .setOpenid(openid)
                    .setUsername(openid) 
                    .setPassword(passwordEncoder.encode(openid).replace(AuthConstants.BCRYPT, Strings.EMPTY)) // Remove prefix encryption {bcrypt}
                    .setStatus(Constants.STATUS_NORMAL_VALUE);

            Result res = remoteUmsMemberService.add(member);
            if(! ResultCode.SUCCESS.getCode().equals(res.getCode())) {throw new BizException("Failed to register as a member");
            }
            username = openid;
        } else {
            username = memberDTO.getUsername();
        }

        // OAuth2 authentication parameters correspond to the username and password information of the registered member during the authorization login, simulating oAuth2 password mode authentication
        parameters.put("username", username);
        parameters.put("password", username);

        OAuth2AccessToken oAuth2AccessToken = tokenEndpoint.postAccessToken(principal, parameters).getBody();
        Oauth2Token oauth2Token = Oauth2Token.builder()
                .token(oAuth2AccessToken.getValue())
                .refreshToken(oAuth2AccessToken.getRefreshToken().getValue())
                .expiresIn(oAuth2AccessToken.getExpiresIn())
                .build();
        return Result.success(oauth2Token);

    }
Copy the code

Declaration: The wechat login here is based on the wechat authorized quick login method rather than the form, so the user name and password registered in the first authorized login are generated in a customized way, and then the OAuth2 authentication with these two parameters to complete the password mode authentication and generate token back to the wechat applite. For form registration/login, replace username and password.

4. Conclusion

Finally, I would like to share some personal lessons. In fact, we all know in our hearts that the most effective way to learn a technology is to be able to use it in real situations. Although I have been doing development for 6 years, it is a pity that I am still doing CRUD in a small company. The fundamental reason is that I have too poor skills. Therefore, I used my spare time to create the Youlai-Mall project and bought three cloud hosts for this purpose. Although they were the cheapest ones bought by the activity, at least their attitude towards technology was certified.

The original intention is to introduce and integrate technologies such as distributed and high concurrency into this project, so as to deepen the understanding of technology through actual practice. It is quite helpless that there is no environment, so we will create our own environment. If you are interested in the project, please contact me (wechat id: HaoxianRUI) to join in the development. Finally, IF I think it will help you more or less, I can give you a project STAR. Thank you

The project name address
The background youlai-mall
Management of the front youlai-mall-admin
Wechat applets youlai-mall-weapp

Look forward to your participation and suggestions, please feel free to contact me if you have any questions ~ (wechat: Haoxianrui)