Mpvue applet

After a period of project establishment, investigation, company bosses, according to the selected technology development costs, as well as the terminal code maintenance and so on comprehensive consideration decided to use the business mpvue to develop small applications, WeChat public issue of project is chosen vue framework for development and it has been run online, because small program does not support dom manipulation, Unable to fully compatible with the code of the public account, so our small program side using MPvue to modify the original project.

Mpvue framework construction

Applets are divided into global configuration and page configuration. Global configuration is configured in app.json## Global install vUE - CLI
$ npm install --global vue-cli

Create a new project based on the MPvue-QuickStart template
$ vue init mpvue/mpvue-quickstart my-project

# install dependencies
$ cd my-project
$ npm install
## Start build
$ npm run dev
Copy the code

Mpvue documentation link

Base: In wechat developer tools, NPM run build is required to import the WX folder in the dist file directory, and then NPM run dev can hot update the development project

routing

Because of the configuration problem of the applets, MPvue does not support router configuration like vue, and can only use the page configuration of the applets

Base: After a new file is added, you need to build it again and start the service. Otherwise, debugging will not work

component

The functionality of the component is basically supported, which is one of the nice advantages of using MPvue to improve development efficiency, but there are a few points to note: 1 import ** from **. Import files must be suffixed when importing components. vue does not render pages after importing components. Some components are not supported such as dynamic components, custom render, and

string templates, etc. (I didn’t use much of this in my project and didn’t practice it.) The reason is simple, because the applet precompiles WXML. Mpvue component documentation
=”text>

Page hopping and parameter passing

Because there is no routing file problem, the page jump can only be operated using the native Api of the applet. The applet provides his set of rules, and I have used only two so far. 1 redirectTo: Closes the current page and switches to an application page. However, jumping to tabbar pages is not allowed, and other page stacks are destroyed

    wx.redirectTo({
        url: `/pages/${type}/main? roomId=${this.roomId}`})Copy the code

2 navigateTo: Leave the current page and go to a page in the app. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applets is up to ten layers.

    wx.navigateTo({
        url: `/pages/${type}/main? roomId=${this.roomId}`})Copy the code
    {
      "navigationBarTitleText": "Home page"."disableSwipeBack": true
    }
Copy the code

3. Accept page path parameters. Add the default option object of onLoad method to the page to receive the page path parameters.

    onLoad(option) {
        this.roomId=option.roomId
    }
Copy the code

Applets route documents

The filter filter

Because the applet does not support DOM operation, MPVUE cannot integrate the filter function of Vue, and many data operations can only operate and process data in the callback function after requesting data according to business requirements