一种将Taro小程序代码转化成APP的方法与流程

一种将taro小程序代码转化成app的方法
技术领域
1.本发明属于app软件工程开发领域，具体涉及一种将taro小程序代码转化成app的方法。


背景技术：

2.在移动开发领域，随着app与小程序的大量普及，技术开发有不同的代码实现方式，现有的软件开发技术中，由于使用的技术开发语言不同小程序与app多是分别开发。
3.现阶段混合app的开发模式，主要以原生或者混合开发为主，一般需要先从比如cordova、react native实现，并前要熟悉对应的开发语言或规则，实现app开发与打包。随着小程序的流行，很多移动端软件需要同时实现小程序与app系统。
4.在这样的背景下，taro前端能很好的实现小程序开发，支持使用vue、react开发小程序、h5、react native，但是使用taro能快速开发小程序及h5等应用，但是在taro场景下的vue开发的小程序，缺陷是目前并没有直接代码转化或者打包成app的办法，需要人工书写代码进行转化，对于同时需要小程序和app的用户，增加了开发时间成本。


技术实现要素：

5.发明目的：本发明的目的在于解决现有技术中存在的不足，提供将taro小程序代码转化成app的方法，解决了使用vue开发taro小程序不支持app的问题，实现小程序代码二次转换成app软件，从而避免分别开发浪费软件开发人员的时间及成本。
6.技术方案：本发明的一种将taro小程序代码转化成app的方法，包括以下步骤：
7.步骤s1、使用命令行工具taro cli生成taro前端工程，且框架选择vue或react；
8.步骤s2、安装项目依赖并添加xview js sdk依赖库；
9.步骤s3、编写taro前端页面代码，运行项目到小程序端，使用小程序开发者工具进行预览；
10.步骤s4、进行到原生api交互时，直接调用xview js sdk提供的api方法，并修改通用对象名，就能实现小程序和app端兼容；
11.比如调用拨打电话时：将taro原有的taro.makephonecall(phonenumber)，修改为xview.makephonecall(phonenumber)；
12.步骤s5、当小程序端调试完成后，再进行app端调试，若安装项目暂时不考虑小程序端，则直接进行app端打包调试，即直接转步骤s6；
13.步骤s6、生成app打包资源并进行app端打包，修改taro编译配置，将app打包资源生成目录改为www，小程序保留taro默认设置dist，这样开发阶段可以同时调试两个端，互不影响；
14.步骤s7、访问xpack在线打包系统，创建app端应用，并上传应用logo和www打包资源，选择应用所需的原生组件，进行app端打包安装测试；
15.步骤s8、app端测试无误后，将打包系统生成的apk和ipa安装包文件，发布到相应
应用市场。
16.进一步地，当所述步骤s1中taro小程序未接入xview js sdk，则根据平台类型自动编译并替换taro交互代码，如果是app端，则替换taro原有api为xview js sdk原生交互代码。
17.进一步地，所述步骤s2的具体方法为：
18.s2.1、使用visual studio code导入创建好的taro工程；
19.s2.2、导入xview js sdk依赖库相关文件。
20.进一步地，所述步骤s4中涉及到原生api交互时具体操作如下：
21.s4.1、打开页面taro-app/src/pages/index/index.vue，template内添加代码，
22.s4.2、执行命令进行小程序打包预览：
23.开发阶段执行：npm run dev:weapp；
24.发布阶段执行：npm build dev:weapp；
25.s4.3、使用小程序开发工具导入打包好的dist小程序工程；
26.s4.4、使用小程序开发工具预览所需调试功能。
27.进一步地，所述步骤s7通过xpack在线打包系统打包的具体方法为：
28.s7.1、登录打包系统xpack并创建app应用；
29.s7.2、上传www.zip打包资源到app应用内；
30.s7.3、点击打包界面的打包按钮；
31.s7.4、打包成功后即可看到app下载二维码和安装包下载链接；
32.s7.5、安装app到手机进行测试。
33.进一步地，所述步骤s7中还可基于xpack-cli命令行工具使用一行命令完成前端和app打包操作。
34.有益效果：对比传统的app与小程序需要分开发，浪费软件工程人员的时间，本发明将小程序代码二次转化直接成app，大量节约开发时间。实现将小程序快速生成app上线部署。
35.与现有技术相比，本发明具有以下优点：
36.(1)本发明中前端使用taro框架进行开发，将原生app部分使用封装好的xview native sdk，web端和原生端交互使用xview js sdk，前端人员只需编写js交互代码，即可调用丰富的原生功能模块。
37.(2)本发明提供xpack在线打包系统，通过操作简单的web界面(或命令行工具cli)，即可生成app安装包和下载二维码(android和ios)，让app测试和发布变得简单方便；使得即使在没有原生开发人员的情况下，也能快速生成和发布app应用，因为开发人员无需关心原生代码和原生开发环境，这对不熟悉app的开发人员来说，能很大地降低app开发门槛。
附图说明
38.图1为本发明的整体流程示意图；
39.图2为本发明中的模块结构示意图；
40.图3为实施例中创建taro工程命令示意图；
41.图4为实施例中直接调用xview js sdk示意图；
42.图5为实施例中使用微信开发者工具预览调试拨打电话功能示意图；
43.图6为实施例中最后安装app到手机进行测试示意图。
具体实施方式
44.下面对本发明技术方案进行详细说明，但是本发明的保护范围不局限于所述实施例。
45.本发明的一种将taro小程序代码转化成app的方法，解决了现有技术中使用vue开发taro小程序不支持app的问题，如图1和图2所示，具体方法为：
46.步骤s1、使用命令行工具taro cli生成taro前端工程，框架选择vue或react；
47.s1.1、安装node环境(》＝12.0.0)
48.s1.2、使用npm或者yarn全局安装@tarojs/cli，或者直接使用npx；
49.#使用npm安装cli；
50.$npm install-g@tarojs/cli；
51.#or使用yarn安装cli；
52.$yarn global add@tarojs/cli；
53.#or安装了cnpm，使用cnpm安装cli；
54.$cnpm install-g@tarojs/cli；
55.s1.3、安装visual studio code；
56.s1.4、创建taro前端工程；
57.如图3所示，本实施例中终端下执行创建taro工程命令：taro init taro-app步骤s2、安装项目依赖并添加xview js sdk依赖库；
58.s2.1、使用visual studio code导入创建好的taro工程；
59.s2.2、导入xview js sdk依赖库相关文件；
60.步骤s3、编写taro前端页面代码，运行项目到小程序端，使用小程序开发者工具进行预览步骤s4、涉及到原生api交互时，直接调用xview js sdk提供的api方法；
61.比如调用拨打电话方法时，将taro原有taro.makephonecall(phonenumber)修改为xview.makephonecall(phonenumber)，只需修改通用对象名，就能实现小程序和app端兼容；
62.s4.1打开页面taro-app/src/pages/index/index.vue，template内添加代码，如图4所示，本实施例仅以拨打电话功能进行测试，实际场景还会涉及到很多原生功能模块，此处提供的xview native sdk和xview js sdk不仅封装了常用的小程序功能模块，还包括第三方sdk，如微信、支付宝、极光、友盟、高德、百度、声网等主流常用sdk，并且还在不断新增完善。
63.s4.2执行命令进行小程序打包预览：
64.开发阶段执行：npm run dev:weapp；
65.发布阶段执行：npm build dev:weapp；
66.s4.3使用微信开发者工具导入打包好的dist小程序工程；
67.s4.4使用微信开发者工具预览调试拨打电话功能，如图5所示；
68.步骤s5、当小程序端调试完成后，再进行app端调试，若项目暂时不考虑小程序端，则直接进行app端打包调试，转跳步骤s6；
69.步骤s6、生成app打包资源并进行app端打包，修改taro编译配置，将app打包资源生成目录改为www，小程序保留taro默认设置dist，这样开发阶段可以同时调试两个端，互不影响；
70.s6.1、修改taro-app/config/index.js配置，添加如下代码：
71.outputroot:`${process.env.taro_env＝＝＝"h5"？"www":"dist"}`,
72.s6.2、执行命令生成app打包资源；
73.npm run build:h5；
74.s6.3、打完包后压缩www资源为www.zip包；
75.步骤s7、访问xpack在线打包系统，创建app应用，并上传应用logo和www打包资源，选择应用所需的原生组件，进行app打包安装测试。
76.此步骤中，开发阶段也可直接打内网在线包，方便app实时调试；除web页面方式打包，本发明还可基于xpack-cli命令行工具，通过一行命令完成前端和app打包操作。
77.s7.1登录打包系统并创建app应用；
78.此处仅演示在线打包系统打包生成app应用，实际场景下我们还提供了命令行工具cli进行打包，前端工程只需简单配置原生打包应用的appid，即可通过命令行直接打包app，让打包app操作变得更加方便快捷。
79.s7.2上传www.zip打包资源到app应用内；
80.s7.3点击打包界面的打包按钮；
81.s7.4打包成功后即可看到app下载二维码和安装包下载链接；
82.s7.5安装app到手机进行测试，如图6所示；
83.步骤s8、app测试无误后，将打包系统生成的apk和ipa安装包文件，发布到各个应用市场。
84.实际应用中，当后期有app端需求时，只需按步骤s6等后续步骤进行操作，完成app端打包测试即可。
85.本发明考虑到另一种情况，即：若taro小程序已经开发好，且没有接入xview js sdk，想要直接转成app，必须进行必要的重构，至少要重构原生api调用的代码，为此本发明在taro编译期，根据平台类型，自动编译并替换taro交互代码，如果是app端，则替换taro原有api为xview js sdk原生交互代码。
86.通过上述实施例可以看出，通过本发明技术方案开发taro应用时，由于所有的taro官方api或小程序api都经过二次封装并进行代码隔离，开发人员无需担心官方api变更后，会导致应用大面积重构，而只需修改二次封装代码即可完成更新；并且开发人员可再进行一层封装，把常用api列举出来，更稳定和高效。
87.综上所述，本发明能够将基于taro开发的小程序快速生成app，并提代相应工具；与现有技术方案对比，本发明学习成本和上手难度更低，熟悉taro小程序的开发人员能够快速上手app端开发，也能将现有的taro小程序快速转换成app。