Апплет mpvue для сводки веб-практики

внешний интерфейс JavaScript mpvue
Апплет mpvue для сводки веб-практики

представлять

MpvueЭто интерфейсная среда для разработки небольших программ с использованием Vue.js. Фреймворк основан на ядре Vue.js, а среда выполнения и реализация компилятора Vue.js изменены таким образом, чтобы он мог работать в среде апплета, тем самым предоставляя весь набор возможностей разработки Vue.js для разработки апплета, и одновременно усложняя набор кода.Можно использовать в апплетах и ​​в Интернете. Эта статья будетИТ-дом LiteПроцесс веб-преобразования апплета является подсказкой, которая кратко знакомит с основными этапами преобразования и некоторыми вопросами, требующими внимания.

Структура каталогов

Некоторые файлы, не связанные с конвертацией, опущены

├─build
├─config
├─src
│ ├─components
│ ├─pages
│ ├─store
│ ├─styles
│ ├─utils
│ │  ├─api.js
│ │  ├─index.js
│ │  ├─request.js
│ │  └─wx.js
│ ├─App.vue
│ └─main.js
├─package-lock.json
└─package.json

Шаги конверсии

0. Предварительная подготовка

  • Рекомендуется использовать git для управления ветками
  • Старайтесь избегать использования ненужных тегов, специфичных для апплета, таких как текст, изображение и т. д.#9137744
  • Избегайте прямого использования объектов wx, используйтеimport wx from 'wx'Представлен таким образом, чтобы его можно было легко переписать в Интернете.#c3ef6e7 
// src/utils/wx.js
export default wx
  • использоватьflyioВ качестве библиотеки запросов настройте псевдоним, чтобы он указывал на flyio.flyio/dist/npm/wx
  • Создайте новую ветку веб-версии на основе исходной ветки

1. Измените конфигурацию упаковки

  • Он может быть изменен на основе исходной конфигурации, в основном с использованием элементов конфигурации, связанных с входом, целью и загрузчиком.Здесь я напрямую генерирую новый проект через vue-cli, копирую папку сборки, конфигурации и файлы конфигурации eslint, babel и т. д., чтобы заменить исходный Если есть конфигурация, используйте package.json нового проекта и внесите соответствующие изменения.При создании нового проекта старайтесь, чтобы параметры соответствовали исходному проекту.#ece3a76
  • Измените main.js, укажите элемент монтирования, если все пройдет успешно, выполните после этого шагаnpm run devОн уже может работать, если есть ошибка, вы можете решить соответствующую ошибку

2. Настройте маршрутизацию

  • Добавьте vue-router и настройте его соответствующим образом, рекомендуется использовать режим истории#ddf94bc
  • Измените параметры маршрутизации, чтобы получить соответствующий код#b949197
  • Используйте router-link для замены тега, чтобы избежать перезагрузки страницы#eb09297

3. Настройте интерфейс запроса

  • Настройте псевдоним, чтобы указать flyio наflyio/dist/npm/fly
  • В апплете нет междоменной проблемы, но веб должен взаимодействовать с серверной частью, чтобы перенаправить запрос или решить эту проблему другими способами.#f963975

4. Преобразование компонентов апплета и API

  • Нижняя панель навигации, собственная реализация макета#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' }") 资讯
  a.nav-item(href="/pages/quanzi/list")
    img.nav-icon(v-if="$route.name === 'QuanziList'", src="/static/assets/quanzi-active.png")
    img.nav-icon(v-else, src="/static/assets/quanzi.png")
    .nav-title(:class="{ active: $route.name === 'QuanziList' }") 圈子
  • компоненты расширенного текста, реализованные с использованием v-html#1945f3f
  • компонент swiper, используйтеvue-swiper-componentвыполнить#f4a4e1a
  • всплывающие и загрузочные интерфейсы, используйтеvue2-toastвыполнить#cb1d9d3 
// src/utils/wx.js
import Vue from 'vue'

export default {
  showNavigationBarLoading () {
    Vue.prototype.$loading('加载中')
  },
  hideNavigationBarLoading () {
    Vue.prototype.$loading.close()
  },
  showToast ({ title }) {
    Vue.prototype.$toast.center(title)
  }
}
  • Потяните вниз, чтобы обновить, и потяните вверх, чтобы загрузить, используйтеvue-pull-toвыполнить#e23b810 
#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")

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(() => {
        const { current } = this.$refs
        if (!current) return
        this.onPullDownRefresh = current.$options.onPullDownRefresh
        this.onReachBottom = current.$options.onReachBottom
      })
    }
  }
}

5.Webоптимизация

  • использоватьminiresetСбросить стиль браузера по умолчанию Стиль некоторых тегов в апплете по умолчанию отличается от стиля браузера и требует обработки.#e98f5ba
  • представлятьbabel-polyfill, для улучшения совместимости#c184166

поддерживать

После того, как первоначальное преобразование веб-версии завершено, вы можете снова переключиться на основную ветку.Последующие функции и исправления выполняются в основной ветке.После выпуска основной ветки переключитесь на веб-ветвь для операции слияния, что может вызвать небольшое количество конфликтов, но это также будет легче решить.Наконец, вы можете иметь дело с недавно введенными функциями апплета.В целом ремонтопригодность относительно хороша.

Суммировать

Весь процесс конвертации проходит относительно гладко.Основная часть завершается примерно за час.По сравнению с апплетом веб-окружение более открытое,поэтому большая часть api апплета может быть смоделирована различными способами.Ветвление также можно смело использовать различные функции на стороне браузера, но старайтесь не изменять исходный код стилей и скриптов напрямую, чего можно добиться с помощью примесей, тегов новых стилей и т. д., чтобы избежать конфликтов.

Перспектива

  • Унифицированная библиотека пользовательского интерфейса на обоих концах, в настоящее время можно использовать только некоторые простые библиотеки классов css.
  • Улучшенная поддержка маршрутизации. В идеале файл main.js каждой страницы может быть автоматически сгенерирован через файл конфигурации vue-router, а запись может быть настроена. При разработке файла .vue его можно использовать напрямую.this.$route this.$routerа такжеrouter-linkВыполняйте связанные операции, чтобы каждый раз не вносить ручные изменения

прикрепил

  1. Git-репозиторий
  • ИТ-дом Lite:ithome-lite
  • Тип:mpvue
  • Шаблон проекта:mpvue-quickstart
  • Оптимизация конфигурации:mpvue-entry
  • Совместимость с маршрутизацией (используйте с осторожностью):mpvue-router-patch
  • Инструменты упаковки (веб-упаковка уже поддерживается):mpvue-packager
  1. Demo
Категории