This is the sixth day of my participation in the More text Challenge. For details, see more text Challenge

Writing background

Recently, one of the company’s projects is a small program based on the Cloud flash payment platform of UnionPay. Here, I have to joke that it is not so much a small program as H5 based on the cloud flash payment platform.

But this platform is a bit of a pit ah, I want to smash the kind of computer.

Project introduction

The project function is very simple, is login – card – booking attractions – view attractions into the park code.

Fortunately, the function is simple, otherwise, it is really in situ explosion.

Project preparation

1. Create platform accounts

Because the Cloud Flash payment platform is a major payment platform backed by UnionPay, the small program account created can only be merchant number, whether it is an individual merchant or the main company, anyway, it must be merchant number.

And the platform can not add small program developers, administrators. Only the account owner can perform this operation.

As a result, since the project belongs to Party A, EVERY time I want to log in to the platform, I have to find Party A to scan the code and log in, which is a blow to my heart.

2. Download developer tools and start developing

Developer tools can be downloaded from the Flash Miniprogram platform documentation. Download and install it directly.

You can create flash projects from the client, depending on your technology stack you can choose React, Vue or import projects.

However, my personal suggestion is to create a new Vue project externally and import the project into the tool after creating it.

After development, testing, also open the personal editor, in the editor development. After running the code from the command line, enter the local preview address into the address bar in the tool.

Note that the address must be followed by a slash; otherwise, the console for the current project will not be displayed in the debugger.

Don’t ask me why. I don’t understand.

3. Community and documentation

There is no community.

The document can be seen in the official website document center, if you are front-end development, do not have too much hope, I sometimes encounter problems to find the document, it is not easy to look at the title to think it can be solved, the result can download the permission, but the party A does not have access to the account.

4. Flash payment SDK and authorized login component

The cloud Flash SDK is recommended in the index.html interface through scrip introduction

// index.html
    <script src="https://open.95516.com/s/open/js/upsdk.js"></script>
Copy the code

Login authorized components can be downloaded in the document, you can choose to download react, VUE, H5 components. Download according to individual needs.

5. The small program jumps to the cloud flash payment interface

Because there is a coupon to get the function, so there is to guide the user to jump to the cloud flash-pay personal center to see the function, here together write out.

upsdk.pluginReady(function(){
    upsdk.openRNPage({
        /* * My coupon */ rnmyRedenvelope */ rnrewardCenter */
        dest: 'rncouponmycoupon'.isFinished: "0".// The default is 0 to open the current window and 1 to close the current WebView.})})Copy the code

Docking the back-end

When I started docking, I really just broke down.

Because the API interface of the back end is used by another domain name, which is directly blocked by the software, the certificate is not safe.

However, there is no way to whitelist by accessing the target domain name in the software, and there is no other way.

It turned out that this was the case with my desktop, but my laptop was fine again.

Finally, I can only let party A scan the code to log in the platform, and then add the security domain name in the experience version, and submit it to the test environment for debugging and docking.

Configure the experience, online and offline environments.

Log in to the Flash payment applet platform. This should be the last image of this article. I can’t log in.

Then go to Version Management -> Test Version on the left menu bar.

Add the security domain name and home page address.

Some people may ask, is not the code to submit to the platform? Why add home address?

Yes, that’s right. You just package the code to your own server, and throw in the home page address.

That’s why I said at first that this is H5 based on the Flash payment platform, not like a small program at all.

conclusion

There will always be challenges in life, and if you don’t push ahead, you’ll end up in the right place.

Why is not complete use of summary, I am afraid I can not write a complete use of summary that day, delete (remote warehouse) library run.