有一个比较大的微信小程序应用。 如果我想使用uni-app开发新功能,应该如何实现? 可行吗? 有什么优点和缺点? uni官方给出的解决方案
方法一:将原生小程序转换为uni-app源码。有各种转换工具,参见
方法二:新建一个uni-app项目,将原生小程序代码转为小程序组件微信小程序app开发,然后集成到uni-app项目中。 uni-app支持使用小程序wxml组件,
方法三:依然保留原生开发的小程序,使用uni-app开发一些新功能
我们需要保留原来的小程序,并做一些新的功能,所以我们必须选择方法三。 方法3也有两种方法,这里分别介绍一下。
1、关于使用分销作为混合分包的功能,具体实现流程请参考文档:
(1) 创建原生小程序项目。 如果您已有一个,则无需创建它。
(2)创建uni-app项目,这里我们通过vue-cli创建
// 安装vue-cli npm install -g /cli // 创建uni-app创建,选择默认模版 vue create -p dcloudio/uni-preset-vue uniapp-project
创建成功后目录如下:
(3)接下来,打包一个子应用
npm run build:mp-weixin -- --subpackage=sub_uniapp // 或者 yarn build:mp-weixin --subpackage=sub_uniapp
(4)将dist//mp-/下的文件夹复制到原生小程序根目录下。
(5)app.json文件中添加对应的页面路径(也可以配置分包)
优点、缺点及总结:
项目打包后放在原生小程序根目录下,并添加微信小程序的路径。
2、第三方开发者插件具体实现流程请参考文档:
(1)创建原生小程序项目
(2)必须使用命令行创建项目(因为安装的项目没有相关依赖和src目录)
(3)在项目根目录下安装
npx uniapp2wxpack --create
(4)安装完成后,项目目录中会出现以下文件夹
(5)将原生小程序根目录下的所有文件复制到该文件中
(6)然后在/app、json的子包中添加如下子包
(7)运行项目
npm run dev:mp-weixin-pack
(8)运行项目后,会多出一个dist文件夹。 在微信开发工具中,预览并选择这个文件夹dist/dev/mp--pack
注意:
如果原生小程序的根目录已经改变,不再是项目的最外层,则必须配置打包路径:
优点、缺点及总结
使用插件将原生小程序的源码放到项目指定的目录下,集成到一个大项目中。
参考文档:
//艺术…/…