微信小程序应用新功能利用uni-app来开发需要怎么实现?

2023-11-25
来源:网络整理

有一个比较大的微信小程序应用。 如果我想使用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 @vue/cli // 创建uni-app创建,选择默认模版 vue create -p dcloudio/uni-preset-vue uniapp-project

创建成功后目录如下:

微信开发平台小程序_微信小程序app开发_微信小应用开发

(3)接下来,打包一个子应用

npm run build:mp-weixin -- --subpackage=sub_uniapp // 或者 yarn build:mp-weixin --subpackage=sub_uniapp

(4)将dist//mp-/下的文件夹复制到原生小程序根目录下。

(5)app.json文件中添加对应的页面路径(也可以配置分包)

优点、缺点及总结:

项目打包后放在原生小程序根目录下,并添加微信小程序的路径。

2、第三方开发者插件具体实现流程请参考文档:

微信小程序app开发_微信开发平台小程序_微信小应用开发

(1)创建原生小程序项目

(2)必须使用命令行创建项目(因为安装的项目没有相关依赖和src目录)

(3)在项目根目录下安装

npx uniapp2wxpack --create

(4)安装完成后,项目目录中会出现以下文件夹

(5)将原生小程序根目录下的所有文件复制到该文件中

(6)然后在/app、json的子包中添加如下子包

微信小程序app开发_微信开发平台小程序_微信小应用开发

(7)运行项目

npm run dev:mp-weixin-pack

(8)运行项目后,会多出一个dist文件夹。 在微信开发工具中,预览并选择这个文件夹dist/dev/mp--pack

注意:

如果原生小程序的根目录已经改变,不再是项目的最外层,则必须配置打包路径:

优点、缺点及总结

使用插件将原生小程序的源码放到项目指定的目录下,集成到一个大项目中。

参考文档:

//艺术…/…

分享