Prior to Singles’ Day, we developed an H5 and mini-program virtual pet raising game project using Taro. Below simple do some summary and review ~

Pet Project

Pet Wang Wang is a lightweight virtual pet cultivation game, which is launched on JINGdong APP- my own. It is jointly created by my Jingdou Channel and Jingdong Laike. It integrates entertainment + tools and creatively embedded pet racing gameplay. Is the evolution of the electricity + little game version pet tomas intelligent system will be based on user registration in jingdong time allocated to him a exclusive dog dog, users can complete the task through a variety of forms in wang wang get dog food, the virtual pet feed, pet after feeding user integral and pet level will be improved, also available points for material reward. Jingdong APP entrance – my, Jingdou – With Pet Wang Wang:


Small program entry – Courtesy


Technology selection

Business requirements require us to develop a set of h5 and mini program at the same time to ensure the functions of both the App side entrance and the mini program side, as well as the mini program cards shared by the App side to guide users to carry out social sharing and increase game experience and user participation. In order to solve the problem of multi-terminal development, there are many similar development frameworks on the market, such as uni-app of vue.js specification, MPvue, Wepy, Taro of react.js specification, etc. Our existing guest polite small program, is to use native small program development, there are currently about 800,000 UV, if the entire small program with Taro reconstruction or conversion cost is too large. In fact, the pet project is equivalent to developing a new page in guest politeness. At first, we planned to write two sets, one set of native applets and one set of H5 development. However, the development cycle is too long to ensure that we can go online before November 11, and the maintenance cost is also very high. Finally, we chose Taro to solve this problem, it can be a set of code, compiled into both ends of the run. And the compiled applet code can be well integrated with the native applet project.

Taro local H5 development

Taro init jd_dog_web NPM install -g@tarojs /cli Add the developed page corresponding to Pages in app.jsx.

pages: [
    'pages/jdDog/jdDog'.'pages/petRace/petRace'.'pages/exchange/exchange'.'pages/exchange/exchangeRecord'.'pages/followShop/followShop'].Copy the code

The catalogue of our project development is as follows:

  • Pages: indicates the service page
  • Components: module components
  • Common: public methods
  • Assets: static resources such as pictures

NPM Run Dev :h5 for local refactoring development, the first step has been successful, the following is compatible with native applets.

Taro is integrated with native applets

Because we used the native applet development project before, there are many common methods and modules in the project, so how to make our newly developed page can call and run the original applet project code is the key. It’s not that complicated. App.env.taro_env === “H5” is the key factor. If you do do something about it, Taro will do nothing about it. If you do do something about it, he will do nothing about it. For example, pet projects require login, login in app, and joint login in applets, using applets login plug-in. When we do NPM run build: Appellate P, requirePlugin(‘loginPlugin’), which copies code into the original appellate program, is directly available and the appellate appellate plugin is invoked normally. Some public methods that normally reference native applets are OK when the scene value determination is in the applets. Only the debugging part is a bit troublesome, need to compile the small program code copy to the small program project, to run normally.

LoginJd (cb,isLoginOut){// Check the h5 environment or small program environmentif(process.env.TARO_ENV === 'h5') {if(isLoginOut){// Force login directly...return; } // Check if yes H5 no You have logged in to the jingdong accountlet url = ``
        Taro.request({
            url:url,
            data:{},
            jsonp:true
        }).then((res)=>{
            if(res.data && res.data.islogin =='1'){
                console.log('Logged in');
                this.prepareH5()
                cb && cb(1);
            }else{
                console.log('Not logged in'); cb && cb(0); }})}else{
        let plugin = requirePlugin('loginPlugin');
        let ptKey = plugin.getStorageSync('jdlogin_pt_key');
        if(isLoginOut){
            if(ptKey){
                plugin.logout({
                    callback: ()=> {}
                    });
            }
            cb && cb(' ');
            return; } cb && cb(ptKey); }},Copy the code

To talk about how to integrate compiled code into the native applet, the first step is to add the corresponding page in the native applet project, because it is not the home page, so we directly put the page into the subcontract. After registering the page, we also need to put the corresponding compiled page into the project’s Pages.

"subPackages": [{"root": "pages/followShop/"."pages": [
        "followShop"] {},"root": "pages/jdDog/"."name": "jdDog"."pages": [
        "jdDog"] {},"root": "pages/exchange/"."pages": [
        "exchange"."exchangeRecord"] {},"root": "pages/petRace/"."name": "petRace"."pages": [
        "petRace"]]},Copy the code

We move the compiled code in the figure below directly into the pages file of the native applet and into the components file of the native applet. Other dependent files such as common are moved directly to the primary directory of the native project. This way, in the small program can run up.


The animation program

Corresponding to a game project, how can there be no animation? For the animation part, as a front end, it is a big obstacle. No matter using CSS or JS to achieve animation, it can not be a good restoration of the designer’s original manuscript. But some complex linkage effects are difficult. The dynamic efficiency factor is the key to determine whether the page animation looks natural. So give it back to the motion designer. This project is controlled by the dynamic effect designer, and the PNG animation picture of APNG is given. Difficult actions such as eating, leveling up, pouring dog food, and running are all done by APNG. Fortunately, APNG support on mobile is pretty good.

And APNG has many advantages over GIF

  • GIF: supports up to 8 bits 256 colors, color level transition is poor, the image has a grainy sense does not support Alpha transparent channel, the edge has a mixed edge
  • APNG: support 24-bit true color images support 8-bit Alpha transparent channel downward compatible PNG

Choosing APNG animation to develop dynamic effects greatly reduces the front-end workload.

Project summary

At 10 o ‘clock on November 1st, the project was officially launched. By November 11th, the PV of the Pet Dog project has reached 3.5 million and THE UV has reached 280,000, and it continues to grow every day. Taro is used to solve the pain points of multiple scenarios. Of course, some scenarios in the project still need to write h5 and small program codes separately to meet business requirements, such as long graph saving and typing effect. Overall, it does improve the development efficiency and reduce the development cycle. We also want to thank Taro’s technical team for their support.

译 文 : The first Taro Program