introduce

Mpvue is a front-end framework for developing applets using vue.js. Based on vue. js core, the framework modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small program, thus introducing a whole set of vue. js development experience for small program development, and making it possible to reuse a set of code in small program and Web simultaneously. This article will take the IT Home Lite applet’s Web conversion process as a clue, and give a brief introduction to the basic steps of conversion and some things to be aware of.

The directory structure

Some files unrelated to the transformation are omitted

├ ─ build ├ ─ config ├ ─ SRC │ ├ ─ components │ ├ ─ pages │ ├ ─ store │ ├ ─ styles │ ├ ─ utils │ │ ├ ─ API. Js │ │ ├ ─ index. The js │ │ ├ ─ request. Js │ │ └ ─ wx. Js │ ├ ─ App. Vue │ └ ─ main. Js ├ ─ package - lock. Json └ ─ package. The jsonCopy the code

The transformation steps

0. Prepare

  • Git is recommended for branch management
  • Avoid unnecessary applet specific tags such as text, image, etc. #9137744
  • Instead of using wX objects directly, useimport wx from 'wx'The introduction of the way, easy to rewrite the Web#c3ef6e7
// src/utils/wx.js
export default wx
Copy the code
  • useflyioAs a request library, configure alias to point to Flyioflyio/dist/npm/wx
  • Create a web-version branch based on the original branch

1. Modify the packing configuration

  • It can be modified on the basis of the original configuration, mainly involving entry, target and loader configuration items. Here I directly generated a new project through VUe-CLI, and copied the build, config folder and configuration files of ESLint and Babel to replace the original configuration. Use the package.json of the new project and modify it accordingly. When creating a new project, the options should be the same as the original project #ece3a76
  • Modify main.js to specify mount elements and, hopefully, execute after this stepnpm run devCan already run up, there is an error to solve the corresponding error can be

2. Configure routes

  • Add vue-router and configure it accordingly, using history mode # ddf94BC is recommended
  • Modify route parameters to obtain the associated code #b949197
  • Replace a tag with router-link to avoid page reloading #eb09297

3. Adjust the request interface

  • Configure alias to point flyio toflyio/dist/npm/fly
  • There is no cross-domain problem in applets, but the Web needs to work with the backend for request forwarding or other means to solve this problem #f963975

4. Convert applets and apis

  • Bottom navigation bar, own layout implementation # 8D6D98B
.nav(v-if="$route.meta.nav") a.nav-item(href="/pages/news/list") img.nav-icon(v-if="$route.name === 'NewsList'", src="/static/assets/news-active.png") img.nav-icon(v-else, src="/static/assets/news.png") .nav-title(:class="{ active: $route.name === 'NewsList'}") info.nav-icon ($if="$route.name === 'NewsList'}") info.nav-icon ($if="$route.name === "NewsList'}" 'QuanziList'", src="/static/assets/quanzi-active.png") img.nav-icon(v-else, SRC = "/ static/assets/quanzi. PNG"). The nav - the title (" class = "{active: $route. The name = = = 'QuanziList'}")Copy the code
  • Rich -text component, using V-HTML implementation # 1945F3F
  • Swiper component, using vue-swiper-component implementation # f4a4E1A
  • Toast and loading interface, using vue2-toast to implement # cb1d9D3
// src/utils/wx.js
import Vue from 'vue'

export default {
  showNavigationBarLoading () {
    Vue.prototype.$loading('Loading')
  },
  hideNavigationBarLoading () {
    Vue.prototype.$loading.close()
  },
  showToast ({ title }) {
    Vue.prototype.$toast.center(title)
  }
}
Copy the code
  • Pull down refresh and pull up load, implementing # e23B810 using vue-pull-to
#app pull-to( ref="scroller", :top-load-method="refresh", :bottom-load-method="loadmore", :is-top-bounce="!! onPullDownRefresh", :is-bottom-bounce="!! onReachBottom", @scroll="saveScrollPosition") keep-alive router-view(ref="current")Copy the code
import PullTo from 'vue-pull-to'
export default {
  name: 'App'.mpType: 'app'.components: {
    PullTo
  },
  data () {
    return {
      onPullDownRefresh: null.onReachBottom: null}},methods: {
    async refresh (loaded) {
      await this.onPullDownRefresh.call(this.$refs.current)
      loaded()
    },
    async loadmore (loaded) {
      await this.onReachBottom.call(this.$refs.current)
      loaded()
    },
    saveScrollPosition (e) {
      const { current } = this.$refs
      current.scrollTop = e.srcElement.scrollTop
    }
  },
  watch: {
    $route () {
      this.$nextTick((a)= > {
        const { current } = this.$refs
        if(! current)return
        this.onPullDownRefresh = current.$options.onPullDownRefresh
        this.onReachBottom = current.$options.onReachBottom
      })
    }
  }
}
Copy the code

5. Web optimization

  • Use miniReset to reset the browser default style. Some tags in the miniprogram default style is different from the browser, also need to deal with #e98f5ba
  • Babel-polyfill is introduced to improve compatibility # C184166

maintenance

After the initial conversion of the Web version is completed, it can switch back to the main branch again, and the subsequent features and bugfix are all carried out in the main branch. After the release of the main branch, it will switch to the Web branch for a merge operation, which may cause a small number of conflicts, but they are also relatively easy to solve. Finally, the newly introduced small program features can be processed, overall maintainability is better

conclusion

The whole conversion process is relatively smooth, the main part of about 1 hours to complete, relative to the small program, the Web environment is more open, so most of the small program API can be simulated through a variety of ways, because it is in two different branches, can also be relieved to use a variety of browser features, However, styles and scripts should not directly modify the original code, but can be implemented through mixin and new style tags to avoid conflicts

Looking forward to

  • Dual – ended unified UI library, so far only a few simple CSS class library
  • Better routing support. Ideally, the main. Js file of each page can be automatically generated through the vue-router configuration file and entry can be configuredthis.$route this.$router 及 router-linkComplete related operations to avoid manual changes

The attached

  1. Git repository
  • IT Home Lite: Ithome-Lite
  • Mpvue: Mpvue
  • Project template: MPvue-Quickstart
  • Configuration optimization: MPvue-entry
  • Route compatibility (use caution) : MPvue-router-patch
  • Packaging tool (support web packaging) : mpvue-packager
  1. Demo
  • IT Home Lite Web Edition: ithome.f-loat.xyz