UniApp集成微信小程序原生分包

背景

公司用 uniapp 开发了一个微信小程序，采购了第三方一部分功能，第三方提供了一些微信的代码，建议使用分包加载。

项目目录结构

wx-thrid-sdk 即第三方提供的分包代码

├── App.vue
├── wx-thrid-sdk
├── index.html
├── main.js
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── pages.json
├── static
└── uni.scss
1
2
3
4
5
6
7
8
9
10
11
12

实现思路

1. 使用uniapp提供的分包配置方式，配置之后在编译的时候会寻找 wx-thrid-sdk 内的 .vue 文件，但是分包内都是微信的原生代码，所以这里找不到会报错

2. 既然不能在编译的时候做文章，那就只能在编译之后了

查看uniapp官网，支持在根目录下创建 vue.config.js 文件，配置 webpack 的一些编译选项

uni-app官网 vue-config.js

既然支持 webpack， 就可以在 webpack 编译之后，把分包的代码复制到最终生成的代码目录下，并且修改一下生成的微信的 app.json 文件，将分包的配置加入进去即可完成集成。

1. 创建 vue.config.js

module.exports = {
   
	configureWebpack: {
   
		plugins: []
	}
}
1
2
3
4
5
6
7

2. 复制分包的代码到最终生成的代码目录下

使用 copy-webpack-plugin 即可满足我们的需求，安装

npm install copy-webpack-plugin@5.0.0 --save-dev
1

module.exports = {
   
	configureWebpack: {
   
		plugins: [
            new CopyWebpackPlugin([
			    {
   
				    from: path.join(__dirname, 'wx-thrid-sdk'),
				    to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV 
1
2
3
4
5
6
7
8
9