uni-app和原生小程序进行混合开发

应用场景
原生小程序开发，后续嵌入uniapp开发的页面
参考文章：https://ext.dcloud.net.cn/plugin?id=1560

1. 混合开发必须使用命令行创建uniapp项目（因为hbuildx安装的项目没有相关依赖和src目录）

//环境安装：全局安装vue-cli
npm install -g @vue/cli

//创建uniapp：使用正式版
vue create -p dcloudio/uni-preset-vue my-project
//此时，会提示选择项目模板，建议选择 默认模板 项目模板

2. 在项目根目录，安装uniapp2wxpack

npx uniapp2wxpack --create

3. 安装完uniapp2wxpack之后，项目目录会出现以下文件夹
   
4. 将原生小程序根目录下的所有文件复制到mainWeixinMp文件下
5. 然后在mainWeixinMp/app,json的分包中添加如下分包

// app.json中的subpackages
{
  "subPackages":[{
    "root":"uniSubpackage",
    "pages":[]
  }]
}

6. 运行项目

// 微信小程序开发
npm run dev:mp-weixin-pack

7. 运行完项目会多出dist文件夹，在微信开发中工具中预览选择此文件夹dist/dev/mp-weixin-pack
   
8. 运行h5

npm run dev:h5

⚠️注意

使用scss,需要下载sass-loader，node-sass 版本号不能太高，如果运行失败
可执行如下命令行：

 cnpm install sass-loader@7.3.1 --save-dev;
 cnpm install node-sass@4.12.0 --save-dev

IOS和Android打包
使用命令行打包出来的app-plus，
1.Android 直接使用
2.IOS 压缩后重命名为 __UNI__E044311.wgt

npm run build:app-plus