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

duan
使用场景

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使用的自定义组件,各位根据实际情况修改

  • 以后就可以正常开发了(支持热更新)
阅读 2.5k
32 声望
1 粉丝
0 条评论
你知道吗?

32 声望
1 粉丝
宣传栏