A method for converting Taro applet code into APP

Abstract

The present invention discloses a method for converting Taro applet code into APP, wherein the front-end is developed using the Taro framework, the native APP part uses the encapsulated Xview Native SDK, the Web end and the native end interact using the Xview JS SDK, and the front-end personnel only need to write the JS interaction code to call the rich native function modules; the present invention provides an Xpack online packaging system, which can generate APP installation packages and download QR codes through a simple Web interface, making APP testing and publishing simple and convenient; even in the absence of native developers, APP applications can be quickly generated and published, because the developers do not need to care about the native code and the native development environment. For developers who are not familiar with APP, the software engineering developed based on the Taro framework can greatly reduce the threshold of APP development.

Description

Technical Field

[0001] The present invention belongs to the field of APP software engineering development, and specifically relates to a method for converting Taro applet code into an APP. Background Art

[0002] In the field of mobile development, with the widespread popularity of APPs and mini-programs, technical development has different code implementation methods. In the existing software development technology, mini-programs and APPs are mostly developed separately due to the different technical development languages ​​used.

[0003] At present, the development mode of hybrid apps is mainly based on native or hybrid development. Generally, it is necessary to start with Cordova, React Native, and be familiar with the corresponding development language or rules to implement APP development and packaging. With the popularity of mini programs, many mobile software need to implement both mini programs and APP systems.

[0004] In this context, the Taro front-end can well implement the development of mini-programs, and supports the use of Vue, React to develop mini-programs, H5, and React Native. Taro can quickly develop mini-programs and H5 applications, but the mini-programs developed with Vue in the Taro scenario have the disadvantage that there is currently no direct way to convert the code or package it into an APP. Manual code writing is required for conversion, which increases the development time cost for users who need both mini-programs and APPs at the same time. Summary of the invention

[0005] Purpose of the invention: The purpose of the present invention is to solve the deficiencies in the prior art, provide a method for converting Taro applet code into APP, solve the problem that Taro applet developed using Vue does not support APP, and realize the secondary conversion of applet code into APP software, thereby avoiding separate development and wasting software developers' time and cost.

[0006] Technical solution: A method of converting Taro applet code into APP of the present invention comprises the following steps:

[0007] Step S1, use the command line tool Taro CLI to generate a Taro front-end project, and select Vue or React as the framework;

[0008] Step S2, install project dependencies and add Xview JS SDK dependency library;

[0009] Step S3: Write the Taro front-end page code, run the project on the mini program side, and use the mini program developer tool to preview it;

[0010] Step S4: When interacting with native API, directly call the API method provided by Xview JS SDK and modify the common object name to achieve compatibility between the mini program and the APP.

[0011] For example, when making a phone call: change Taro's original Taro.makePhoneCall(phoneNumber) to Xview.makePhoneCall(phoneNumber);

[0012] Step S5: After the mini program debugging is completed, the APP debugging is performed. If the installation project does not consider the mini program for the time being, the APP packaging debugging is performed directly, that is, directly go to step S6;

[0013] Step S6: Generate APP package resources and package the APP end, modify the Taro compilation configuration, change the APP package resource generation directory to www, and keep the Taro default setting dist for the mini program. In this way, the two ends can be debugged at the same time during the development stage without affecting each other;

[0014] Step S7, access the Xpack online packaging system, create an APP application, upload the application logo and www packaging resources, select the native components required for the application, and perform APP packaging and installation testing;

[0015] Step S8: After the APP is tested correctly, the APK and IPA installation package files generated by the packaging system are released to the corresponding application market.

[0016] Furthermore, when the Taro applet is not connected to the Xview JS SDK in step S1, the Taro interaction code is automatically compiled and replaced according to the platform type. If it is an APP, the original Taro API is replaced with the Xview JS SDK native interaction code.

[0017] Furthermore, the specific method of step S2 is:

[0018] S2.1. Use Visual Studio Code to import the created Taro project;

[0019] S2.2. Import the Xview JS SDK dependency library related files.

[0020] Furthermore, the specific operations involved in native API interaction in step S4 are as follows:

[0021] S4.1. Open the page taro-app / src / pages / index / index.vue and add code to the template.

[0022] S4.2. Execute the command to preview the mini program package:

[0023] Execute in the development phase: npm run dev:weapp;

[0024] Release phase execution: npm build dev:weapp;

[0025] S4.3. Use the applet development tool to import the packaged dist applet project;

[0026] S4.4. Use the applet development tool to preview the required debugging functions.

[0027] Furthermore, the specific method of packaging in step S7 through the Xpack online packaging system is:

[0028] S7.1. Log in to the packaging system Xpack and create an App application;

[0029] S7.2. Upload the www.zip packaged resources to the App application;

[0030] S7.3. Click the Pack button on the Pack interface;

[0031] S7.4. After the package is successfully packaged, you can see the App download QR code and installation package download link;

[0032] S7.5. Install the App on your phone for testing.

[0033] Furthermore, in step S7, the front-end and APP packaging operation can be completed using a line of command based on the Xpack-cli command line tool.

[0034] Beneficial effects: Compared with the traditional APP and mini-program, which need to be developed separately and waste the time of software engineers, the present invention converts the mini-program code into APP directly, which greatly saves development time. It can quickly generate APP from mini-program and put it online.

[0035] Compared with the prior art, the present invention has the following advantages:

[0036] (1) In the present invention, the front-end is developed using the Taro framework, the native APP part uses the encapsulated XviewNative SDK, and the Web end and the native end interact using the Xview JS SDK. The front-end personnel only need to write the JS interaction code to call the rich native function modules.

[0037] (2) The present invention provides an Xpack online packaging system, which can generate APP installation packages and download QR codes (Android and iOS) through a simple Web interface (or command line tool CLI), making APP testing and publishing simple and convenient; even in the absence of native developers, APP applications can be quickly generated and published, because developers do not need to care about native code and native development environment. This can greatly lower the threshold for APP development for developers who are not familiar with APP. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 It is a schematic diagram of the overall process of the present invention;

[0039] Figure 2 It is a schematic diagram of the module structure in the present invention;

[0040] Figure 3 A schematic diagram of creating a Taro project command in the embodiment;

[0041] Figure 4 This is a schematic diagram of directly calling the Xview JS SDK in the embodiment;

[0042] Figure 5 This is a schematic diagram of using WeChat developer tools to preview and debug the call making function in the embodiment;

[0043] Figure 6 This is a schematic diagram of the final installation of the App on a mobile phone for testing in the embodiment. DETAILED DESCRIPTION

[0044] The technical solution of the present invention is described in detail below, but the protection scope of the present invention is not limited to the embodiments.

[0045] The method of converting Taro applet code into APP in the present invention solves the problem that Taro applet developed using Vue in the prior art does not support APP. Figure 1 and Figure 2 As shown, the specific method is:

[0046] Step S1, use the command line tool Taro CLI to generate the Taro front-end project, and select Vue or React as the framework;

[0047] S1.1. Install the node environment (>=12.0.0)

[0048] S1.2. Use npm or yarn to install @tarojs / cli globally, or use npx directly;

[0049] #Install the CLI using npm;

[0050] $ npm install -g@tarojs / cli;

[0051] #OR install CLI using yarn;

[0052] $yarn global add@tarojs / cli;

[0053] #OR installed cnpm, use cnpm to install CLI;

[0054] $ cnpm install -g@tarojs / cli;

[0055] S1.3. Install Visual Studio Code.

[0056] S1.4. Create Taro front-end project;

[0057] like Figure 3 As shown, in this embodiment, the terminal executes the command to create a Taro project: taro init taro-app Step S2, install project dependencies and add Xview JS SDK dependency library;

[0058] S2.1. Use Visual Studio Code to import the created Taro project;

[0059] S2.2. Import the Xview JS SDK dependency library related files;

[0060] Step S3: Write Taro front-end page code, run the project on the mini-program side, and use the mini-program developer tool to preview it. Step S4: When it comes to native API interaction, directly call the API method provided by Xview JS SDK;

[0061] For example, when calling the phone call method, change Taro's original Taro.makePhoneCall(phoneNumber) to Xview.makePhoneCall(phoneNumber). Just change the common object name to achieve compatibility between the mini program and the APP.

[0062] S4.1 Open the page taro-app / src / pages / index / index.vue and add code in the template, such as Figure 4As shown, this embodiment only tests the call making function. The actual scenario will also involve many native function modules. The Xview Native SDK and Xview JS SDK provided here not only encapsulate the commonly used mini-program function modules, but also include third-party SDKs, such as WeChat, Alipay, Jiguang, Umeng, AutoNavi, Baidu, Agora and other mainstream commonly used SDKs, and are constantly being added and improved.

[0063] S4.2 Execute the command to preview the mini program package:

[0064] Execute in the development phase: npm run dev:weapp;

[0065] Release phase execution: npm build dev:weapp;

[0066] S4.3 Use WeChat developer tools to import the packaged dist applet project;

[0067] S4.4 Use WeChat developer tools to preview and debug the calling function, such as Figure 5 As shown;

[0068] Step S5: After the mini program debugging is completed, the APP debugging is performed. If the mini program is not considered for the project, the APP packaging debugging is performed directly, and the process jumps to step S6;

[0069] Step S6: Generate APP package resources and package the APP end, modify the Taro compilation configuration, change the APP package resource generation directory to www, and keep the Taro default setting dist for the mini program. In this way, the two ends can be debugged at the same time during the development stage without affecting each other;

[0070] S6.1. Modify the taro-app / config / index.js configuration and add the following code:

[0071] outputRoot:`${process.env.TARO_ENV===="h5"? "www":"dist"}`,

[0072] S6.2. Execute the command to generate App package resources;

[0073] npm run build:h5;

[0074] S6.3. After packaging, compress the www resources into a www.zip package;

[0075] Step S7: Access the Xpack online packaging system, create an APP application, upload the application logo and www packaging resources, select the native components required for the application, and perform APP packaging and installation testing.

[0076] In this step, the intranet online package can also be directly packaged during the development phase to facilitate real-time debugging of the APP; in addition to packaging in the form of Web pages, the present invention can also complete the front-end and APP packaging operations through a line of command based on the Xpack-cli command line tool.

[0077] S7.1 Log in to the packaging system and create an App application;

[0078] Here we only demonstrate how to use the online packaging system to generate App applications. In actual scenarios, we also provide a command line tool CLI for packaging. The front-end project only needs to simply configure the appid of the native packaged application to directly package the APP through the command line, making the APP packaging operation more convenient and quick.

[0079] S7.2Upload the www.zip packaged resources to the App application;

[0080] S7.3 Click the Pack button on the Pack interface;

[0081] After S7.4 is packaged successfully, you can see the App download QR code and installation package download link;

[0082] S7.5 Install the App on your phone for testing. Figure 6 As shown;

[0083] Step S8: After the APP is tested, the APK and IPA installation package files generated by the packaging system are released to various application markets.

[0084] In actual applications, when there is an APP demand in the later stage, you only need to follow the subsequent steps such as step S6 to complete the APP packaging test.

[0085] The present invention takes into account another situation, that is: if the Taro applet has been developed and is not connected to the Xview JSSDK, if you want to directly convert it into an APP, you must perform necessary reconstruction, at least the code for the native API call must be reconstructed. For this reason, the present invention automatically compiles and replaces the Taro interaction code according to the platform type during the Taro compilation period. If it is the APP side, the original Taro API is replaced with the Xview JS SDK native interaction code.

[0086] It can be seen from the above embodiments that when developing Taro applications through the technical solution of the present invention, since all Taro official APIs or mini-program APIs are re-encapsulated and code isolated, developers do not need to worry about large-scale reconstruction of the application after the official API is changed, but only need to modify the re-encapsulation code to complete the update; and developers can perform another layer of encapsulation to list commonly used APIs, which is more stable and efficient.

[0087] In summary, the present invention can quickly generate an APP from a mini-program developed based on Taro, and provide corresponding tools; compared with the existing technical solutions, the present invention has lower learning cost and difficulty in getting started. Developers familiar with the Taro mini-program can quickly get started with APP development, and can also quickly convert existing Taro mini-programs into APPs.

Claims

1. A method for converting Taro applet code into APP, characterized by: The following steps are involved: Step S1, use the command line tool Taro CLI to generate a Taro front-end project, and select Vue or React as the framework; Step S2, install project dependencies and add Xview JS SDK dependency library; Step S3: Write the Taro front-end page code, run the project on the mini program side, and use the mini program developer tool to preview it; Step S4: When interacting with the native API, directly call the API method provided by the Xview JS SDK and modify the common object name to achieve compatibility between the mini program and the APP end; Step S5: After the mini program debugging is completed, the APP debugging is performed. If the installation project does not consider the mini program for the time being, the APP packaging debugging is performed directly, that is, directly go to step S6; Step S6: Generate APP package resources and package the APP end, modify the Taro compilation configuration, change the APP package resource generation directory to www, and keep the Taro default setting dist for the mini program. In this way, the two ends can be debugged at the same time during the development stage without affecting each other; Step S7: Access the Xpack online packaging system, create an APP application, upload the application logo and www packaging resources, select the native components required for the application, and perform APP-side packaging and installation testing; Step S8: After the APP is tested correctly, the APK and IPA installation package files generated by the packaging system are released to the corresponding application market.

2. The method for converting Taro applet code into APP according to claim 1, characterized in that: When the Taro applet is not connected to the Xview JS SDK in step S1, the Taro interaction code is automatically compiled and replaced according to the platform type. If it is an APP, the original Taro API is replaced with the Xview JS SDK native interaction code.

3. The method for converting Taro applet code into APP according to claim 1, characterized in that: The specific method of step S2 is: S2.

1. Use Visual Studio Code to import the created Taro project; S2.

2. Import the Xview JS SDK dependency library related files.

4. The method for converting Taro applet code into APP according to claim 1, characterized in that: When the native API interaction is involved in step S4, the specific operations are as follows: S4.

1. Open the page taro-app / src / pages / index / index.vue and add code to the template. S4.

2. Execute the command to preview the mini program package: Execute in the development phase: npm run dev:weapp; Release phase execution: npm build dev:weapp; S4.

3. Use the applet development tool to import the packaged dist applet project; S4.

4. Use the applet development tool to preview the required debugging functions.

5. The method for converting Taro applet code into APP according to claim 1, characterized in that: The specific method of step S7 packaging by the Xpack online packaging system is: S7.

1. Log in to the packaging system Xpack and create an App application; S7.

2. Upload the www.zip packaged resources to the App application; S7.

3. Click the Pack button on the Pack interface; S7.

4. After the package is successfully packaged, you can see the App download QR code and installation package download link; S7.

5. Install the App on your phone for testing.

6. The method for converting Taro applet code into APP according to claim 1, characterized in that: In step S7, the front-end and APP packaging operation can also be completed using a line of command based on the Xpack-cli command line tool.

Images