关于小程序:mpvue与原生小程序框架混用实践

56次阅读

共计 1235 个字符,预计需要花费 4 分钟才能阅读完成。

应用场景

mpvue 框架与原生小程序开发框架混用


实际背景

我的项目开始齐全应用 mpvue 开发,然而上线后发现有个表单页面双向绑定有问题(页面扭转,然而值不扭转),尝试多种形式仍未解决,遂应用原生小程序框架进行替换


基本思路

得益于小程序较好的分包机制,只须要将用原生框架开发的信息页面的包 (文件夹) 挪动到对应目录,而后批改打包后 app.json 中 pages 页面门路即可。原理比较简单,次要解决是流程繁琐的问题。每次改变都须要挪动文件夹,批改 json,且批改页面 devServer 热更新根本处于残废状态,不胜其烦!


解决思路

mpvue 应用 webpack 编译打包,性能非常弱小,所以就应用 webpack 来解决

  • 新建 mpvue 我的项目
  • 将原生编写包放入和失常 mpvue 页面雷同目录(src/pages),并在 app.json 增加路由(和失常 mpvue 一样,本地目录有文件,所以配置路由后不会报错。另外,个别状况下会开启 eslint,小程序语法和 vue 不一样,会报错,所以能够在原生页面 js 文件头减少/* eslint-disable */
  • 装置 FileManagerPlugin webpack 插件,该插件能够挪动 / 复制 / 新增 / 删除等文件或目录,参考 filemanager-webpack-plugin
  • 批改 webpack.base.conf 配置,引入插件var FileManagerPlugin = require('filemanager-webpack-plugin');,在 plugins 减少如下配置
new FileManagerPlugin({  
  onEnd: {  
    delete: [path.resolve(config.build.assetsRoot, './pages/info'),  
 path.resolve(config.build.assetsRoot, './components/info-cell'),  
 ],  
 copy: [  
      {source: path.resolve(__dirname, '../src/pages/info'),  
 destination: path.resolve(config.build.assetsRoot, './pages/info')  
      },  
 {source: path.resolve(__dirname, '../src/components/info-cell'),  
 destination: path.resolve(config.build.assetsRoot, './components/info-cell')  
      }  
    ]  
  }  
})

其中:delete是删除无用目录(因为咱们将原生编写的包放在了 src/pages 目录下,所以启动或打包时也会将这个打包编译,咱们原本就是用原生小程序编写的,所以不须要这个),copy是将原生小程序目录拷贝到 dist 对应目录
注:info 是原生编写页面的包,info-cell 是 info 应用的自定义组件,各位依据理论状况批改

  • 当前就能够失常开发了(反对热更新)

正文完
 0