Usage scenarios

The MPVUE framework is mixed with the native applet development framework

Practice background

The project started to fully use MPVUE development, but after going online, it found that there was a problem with the two-way binding of a form page (the page changed, but the value did not change). After trying a variety of ways, it was still not solved, so I used the native applet framework to replace it

The basic idea

Thanks to the better subcontracting mechanism of small programs, you only need to move the package (folder) of the information page developed with the native framework to the corresponding directory, and then modify the path of the pages in the packaged app.json page. The principle is relatively simple, the main solution is the cumbersome process. Each change requires moving folders, modifying JSON, and modifying the page devServer hot update is basically in a disabled state, which is very annoying!

solution

MPVue uses Webpack to compile and package, which is very powerful, so we use Webpack to solve the problem

  • Create a new MPVUE project
  • Add the route in app.json (as with normal mpvue, there are files in the local directory, so there will be no error when routing is configured.) In addition, ESLint will normally be enabled. The syntax of applets is not the same as Vue, which will report errors, so you can add it to the native page’s JS header/* eslint-disable */)
  • Install the FileManagerPlugin webpack plugin, which can move/copy/add/delete files or directories, see fileManager-webpack-plugin
  • Modify the webpack.base.conf configuration to introduce a plug-invar FileManagerPlugin = require('filemanager-webpack-plugin');Add the following configuration to your 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: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: delete: Info is the package that writes the page native. Info-cell is the custom component used by Info. You can modify it according to the actual situation

  • It can be developed normally later (support hot update)