Welcome to Tencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

This article was first published in cloud + community, shall not be reproduced without permission.

Author: Huang Rongkui | tencent cloud WeChat applet, head of the solution

This year can be said to be the first year of small procedures, all kinds of games, shops, tourism small procedures mushroomed, I think all the friends here more or less have used small procedures, so a popular small procedures is how to develop? Today we invited five technical experts from Tencent Cloud Layabox and plus push technology to share and analyze how to develop a popular small game from 0 to 1 at low cost or even at zero cost, so that micro channel small program development is really at your fingertips.

Today I bring you the topic is Tencent cloud micro channel small program solution. My name is Huang Rongkui, and I am in charge of the small program program of Tencent wechat. Now I am in charge of the solution of small program on Tencent cloud, and how to help developers to complete development and launch quickly.

When I did a share in December of last year, about a third of people had used miniapps, and there should be more now. Let’s briefly review the development of micro channel small program, micro channel small program in September began to test to January 9, 2017 when micro channel small program officially opened, to the real acceptance of December 28, 2017, is the micro channel small game began to open that time, that is, we are familiar with jump jump, At that time wechat small program was widely recognized.

Simply share a distribution of micro channel small program, last year when the micro channel small program its main source comes from the tools of this part. Similar to Mobike and Didi Dache, which are commonly used in our daily life, but now popular games and social networking have surpassed its market share.

So how does it implement small program?

First, let’s introduce the small program, which is the concept given by the official. Small program is a new open ability. Developers can quickly develop a small program.

So what is the principle of applets implementation?

The first is its rendering layer, which is Webviews; the second is its logic layer, which is that we write business logic to achieve login and payment functions; the third can be understood as wechat’s native ability.

So how does it achieve this capability?

Webviews is mainly responsible for rendering, and the underlying wechat provides more of the underlying capabilities. We can see that wechat offers a lot of rich native client and its own capabilities to developers. For example, network, initiate network request, storage and download, storage including file reading and writing, audio and video reading and writing, login is wechat version, forming relationship connection. Components are commonly used components, including the hardware to developers, including audio and video recording, camera, as well as taking photos, scanning code and so on.

So what does it use to pass messages and call them?

You can see that this is passed through events and returned data. When the user has some actions on the interface, it will trigger some events, to the native Webviews, and then to the business logic.

So how does the applet render it?

For those of you who have ever been an applet developer, we wrote something called WXM2, defined as Javascript, and packaged it with the business to form an applet.

This is an event handler for the applet, and you can see that it publishes. Publish is when Servive sends data to View, Service listens to View event, Service and View trigger Native layer, call wx. API.

So why is it so fast?

• The first is that it has an installation package cache. As mentioned earlier, after each applets are developed, a compilation is performed to form the applets. Compared to some of our previous development methods, such as H5 experience, there will be a very different feeling, H5 is TM2, through the request to download to the user’s device, and then render. If the network is relatively poor, such as 3G, 4G signal is not very good, there will be a white screen. Applets, however, generate packages that can be cached on the user’s device so that the user doesn’t download them again the next time they use them. There will be no white screen and so on. Of course, the size of the small program installation package is also limited, not particularly large, usually the official requirement is not greater than 2Mb, I do not know whether to improve now.
• The second is the Webview interface, when entering the small program, it is not a click to generate a Webview, generate a Webview is time consumption. When I enter the home page of the small program will generate multiple WebViews, display only need to show the Webview, without generating, so that the loading speed will be greatly improved.
• Third, the Native component, which is Native in this page, and some of the images inside are Native to speed up startup. Of course, it also uses other methods, such as subcontracting loading.

Let’s compare the various development approaches, our experience with small programs and how difficult it is to develop and how much it costs to use them. H5 is the cross-platform solution we thought of before, from the development of H5 and small programs only need to understand the front-end development can be developed. However, native development apps are relatively large and have different platforms. IOS and Android are different development languages. If a team to develop a small program must have IOS team and Android team, the development cost is high.

From the user experience, the experience of small programs can only be said to be good, if the comparison for the native APP will be worse. But compared with other peripheral APPS, the speed and performance of small programs will be much faster. And in terms of ability, some functions provided by wechat, small programs can operate some hardware, but the peripheral APP is a bit difficult. Native apps are best supported and can operate on very low-level hardware. Small programs can be recommended by searching or in the form of nearby, so it has a better ability to spread, while supporting the circle of friends for sharing spread. The transmission ability of native APP is very weak. For some usage scenarios, the native APP experience is very poor and applets are very fast. For example, if I see a Mobike on the road, I just scan it with my mini app. But you still need to download the APP.

Tencent Cloud developer tools solution

If you want to own small program development, usually need to have their own server, operation also need to configure some certificates for it to develop, so every developer to understand the knowledge of server operation and maintenance. At the same time, the deployment of server code is not convenient, server-side code debugging is not intuitive, more time spent in the deployment of the surrounding environment, rather than put more thoughts on business development.

In view of this situation we made such a solution Wafer1.0, its purpose is to solve the problem of server deployment, the balance of the server, the expansion of the server in advance to deal with the business of the basic service code in the server, while having the basic session service, this is our early solution. However, there are some problems with this solution. Users need to understand how it works, server application deployment needs to be done by themselves, the architecture is too specialized for individual developers, and code debugging is not convenient.

We have done in-depth cooperation with wechat and developed our Wafer2. Wafer1 and Wafer2 are very different, especially developers can upload server-side code, which can be directly uploaded to the development environment and production environment. Development Settings and production environments, domain names, certificates, and databases are all prepared by the system in advance. Once the user has written the code, they can upload it directly. Wafer2 also integrates the existing capabilities of Tencent Cloud, such as channel service, object storage, Vientiane Map, intelligent voice and so on.

As you can see, Wafer2 has many new features, including one-click code upload. You don’t need to know anything about the server side, just the development and production environments. Our development and online environment are separate and we can issue and deploy SSL certificates with one click. At the same time, node.js development environment support remote debugging, this set is free, welcome to experience.

This is our current ability in wechat developer tools, there is a small icon of Tencent Cloud in the upper right corner. With this capability you can upload code directly to the development environment, then start the barrage debugging, see the current environment variables in the background, restart the service, stop the service, and upload code to the production environment.

Tencent cloud small application solutions have perfect solved the problems of the previous two (need your server operational knowledge, the deployment server code inconvenient problem) then the remaining two problems, one is a server-side code debugging is not intuitive, aiming at the problem we have done the ability of remote debugging and WeChat, of course, this is for and Nods. Js version. Nods. Js development experience of the students will certainly be familiar. The other is remote debugging, where the code is all server code, and you can see breakpoints and look at environment variables.

Wafer2 in addition to these features, but also the user’s framework, users only need to use Wafer2 binding Tencent cloud account and small program account, and then create small program project.

After creation, we need to click here to upload the test code, then your local code will be uploaded to the server, here we also assigned the user a good domain name, the user as long as the small program to configure this can be accessed. We offer a lot of capabilities, including fast node interface, login, voice recognition, and so on, to ensure that users can easily use them during development.

So what do we build on that?

• The first is chat room small program, this is based on our own Sdk do chat room function, mainly using Websocket services. Chat is mainly used for information interaction and communication between the two parties. Websocket provides a capability that small program login will obtain the address from the server. Other capabilities are provided by Paas whether the current user needs to connect with the business server or the current server. The advantage of this is that we do not need to pay more attention to the implementation of Websocket during development. And websocket has a certain performance cost, if using Paas can avoid this performance cost. We can also monitor abnormal conditions, such as disconnection or abnormal conditions for compatibility, these capabilities are in our SDK, you know when using.
• The second is image recognition, which is provided by Tencent Cloud. For example, id card recognition: after uploading the ID card, users can identify the name, date of birth, gender and address on it. Of course, this is only part of the ability provided by Tencent cloud. Excellent map can also provide a living check, we can go to understand. It is not covered in this article.

What else are we going to do next?

The current situation of version control is such that when users develop small programs, the code is edited in the client, and the storage is stored by users themselves. Of course, this will bring many disadvantages, such as code version management, version comparison, many cases can not be completed in the client. If users need to deploy servers after development, they need to deploy the code themselves.

Another drawback is the complexity of initializing projects, the lack of connection between version control and the server, the inability to roll back code, and the developer tools that do not support GIT operations. In view of this situation, we have also done further cooperation with wechat. Combined with TGIT of Tencent Cloud, which is the code management used internally by Tencent. And then for deployment we use application integration, which is publishing directly to the server using developer tools, either on the user’s own server or on another server.

With these capabilities, we can quickly initialize code with one click, developers can quickly view, compare and roll back code, publish and roll back code precisely, and TGIT provides a free private repository.

At present, our small program developer tools support GS and PSP, and we can support C++, Java and compiler release later.

With the advantages of continuous inheritance, you can pre-compile code before release, you can build languages, you can customize continuous integration, you can deploy and run before release, that’s it. Thank you.

Q/A:

Q: There is production and development at the time of release. Do I need two servers for my own configuration? One is development and one is production.

A: You don’t need to do this manually, you only need to bind Tencent cloud and small program account, this server is free to generate.

Q: Don’t we need to charge for this server?

A: Development is free at the moment, the production environment may have recently been charged, before it was free.

Q: Can I choose another service provider to provide the server?

A: You may need to deploy the server by yourself. We will allow users to deploy the server by themselves in the future operation and release.

Q: Can I have one server if I need multiple access services using applets? Does that server support multiple applets?

A: Yes, you need to make some compatibility in the code yourself.

Q: Do we have a handy example or SDK or something?

A: Not yet.

Q: Now you need to tweak the code logic yourself?

A: OK, that’s right.

Q: Hello, is the development language of IOS applets the same as android applets?

A: At present, the small program is actually cross-platform, that is to say, writing A code is only one copy. It can be compatible with IOS and Android platforms at the same time. Its language is NodeJS, which is more inclined to front-end development.

Q: I have a question about the vientiane image. Just now you said that id cards can be identified. Can we identify some of our self-defined cases, that is, printed cases?

A: At present, it has print recognition, and ID identification is just one of them. I can help you contact your colleagues in Youtu to see if they have this ability.

Q: When we OCR do id identification, do we directly upload the picture?

A: Yes, just upload it, give it A link address, and the interface can be identified.

Q: BEFORE, I tried to use AI, but I needed to convert pictures into pictures. I just learned that the internal small program could be converted in this way. Some people in the community said that this function was not implemented, will you open this function to the public?

A: There should be many ways to convert to 64. If not, you can use the open interface.

Question and answer

What technology can short video access applets?

reading

Wechat small program, the development of the bottom

Liu Yi: How to use small program technology to solve the problem of enterprise sales

Li Ming: Micro channel game technology sharing

Has been authorized by the author tencent cloud + community release, the original link: https://cloud.tencent.com/developer/article/1084417?fromSource=waitui