Проблемы, встречаемые в MPVUE Разработка схемы преобразования апплета и H5

JavaScript Апплет WeChat Ресурсы изображений Vue.js mpvue

  • Структура проекта

  •  |---build
     |---pages.js文件目录
 |---src
     |---component子组件
     |---pages
         |---业务页面
     |---store，vuex储存
     |---utils
         |---请求api.js
         |---format格式化插件，小程序中不能使用vue自带的格式化只能手动修改后台返回的时间戳，价格，订单状态等
         |---request封装fly进行请求响应拦截
         |---wx.js

  • окружение и зависимости

    • less-loader, предоставляет вложенные стили, кто знает, кто использует

    • flyioПредоставляйте запросы для облегчения быстрого преобразования модуля запроса H5 (Flyio предоставляет H5, пакет запроса апплета,Обратитесь к примеру, предоставленному в mpvueНапишите перехватчик, который используется для обработки фонового возврата на страницу перехода в незарегистрированное состояние), и то же самое верно для инкапсуляции wx.request в апплете, но вам нужно сделать axios, чтобы переключиться на h5.

    • Карта ТенсентqqMapПредоставленный reverseGeocoder (wx.getLocation обеспечивает только позиционирование по широте и долготе, и продукт должен получить город после подтверждения позиционирования и выполнить поиск товара в том же городе)

    • Загрузка файла обработки хранилища объектов Alibaba Cloud oss, Удивительно, но Tencent запретила префикс доменного имени oss от Alibaba Cloud, который нельзя настроить в фоновом режиме.Решение состоит в том, чтобы доменное имя использовалось в фоновом режиме в качестве прокси-сервера домена. Кстати, у меня не было этой проблемы, когда я сначала использовал Qiniu Cloud.Если вы сочтете это хлопотным, вы можете использовать Qiniu.

    • Обработка расширенного текста с использованием предоставленного примера mpvuempvue-wxparse, конечно, вы также можете написать свой собственный

  • Проблемы, возникающие в процессе разработки малых программ

    • Использование MPVUE - это очень прохладный процесс, синтаксис Vue в основном используется, но есть несколько проблем, которые нужно внимание.
    • Параметры, передаваемые на странице, аналогичны get request?key=value, а следующая страница получается с использованием $mp.query.key, однако на странице того же типа, например, на странице сведений о продукте, ключ переключается несколько раз, потому что ключ кэша страницы останется прежним, что может варьироваться в зависимости от бизнеса. В отличие от этого, решение, которое я принял, состоит в том, чтобы очистить ключ в onUnload. Хотя документ mpvue официально не рекомендует использовать цикл апплета, страница, которая должна переключать клавишу несколько раз, в настоящее время может быть обработана таким образом.
    • Сначала я планировал делать только небольшие программы, потом нужно было дополнить приложение, нужно было использовать unionId после привязки открытой платформы к апплету, чтобы сделать трехтерминальных пользователей одинаковыми, позиционирование продукта не было сделано хорошо, и структуру таблицы необходимо установить снова. Метод получения заключается в использовании wx.login для получения iv и сеансового ключа для анализа зашифрованных данных.
    • Код проверки изображения должен иметь сеанс, поэтому вы не можете напрямую использовать тег img для отправки запроса на получение, но вам нужно загрузить двоичный файл через адрес запроса на загрузку файла, а затем передать ссылку, чтобы привязать его к img
    • Функция ввода запускает фокус и должна быть сначала установлена: фокус ложный, а затем истинный для фокуса
    • Дочерний компонент не будет запускать цикл OnShow, потому что он будет привязан только один раз, и родительский компонент не может получить это. $children в цикле onshow
    • Апплет не будет очищен в течение 5 минут после закрытия. Некоторые страницы по-прежнему необходимо открывать для обновления. Вы можете включить enablePullDownRefresh: true в main.js, но это будет конфликтовать с выпадающим меню в режиме прокрутки. Можно только выбрать один из двух
    • Мы можем сделать компоненты панели вкладок, вложив прокрутку-представление с помощью swiper.Высота компонента swiper должна быть записана в js, а высота получена через getSystemInfo.Если вы используете эластичный макет flex: 1, это может привести к некоторым старым версии ios не могут удерживать высоту. , если есть больше вложенности, код не будет опубликован
    • По умолчанию родные иконки различных мелких программ белые.Если цвет фона белый, то можно не найти причину почему пропадает загрузочное изображение.Настроить backgroundTextStyle в окне: 'dark'
    • В апплете много зарезервированных слов, которые нужно соблюдать осторожность, чтобы не повторять их.Просмотр вопросов и ответов
    • Первые несколько коммитов для проверки, по-видимому, являются машинными проверками, и исключения кода также могут пройти.
    • watch global vuex будет выполняться на не текущей странице, если взять параметры в $mp, то может сообщить о глобальной ошибке
    • ! ! ! При совместном использовании необходимо обратить внимание на то, чтобы одиночная страница не возвращалась на домашнюю страницу.Можно только нажать на три точки в правом верхнем углу.Если вы не производили никаких операций, рекомендуется привести страницу параметры на домашнюю страницу, а затем перейти на страницу назначения обмена через домашнюю страницу, что будет более естественным. В настоящее время мой проект в основном завершен. Чтобы не влиять на весь процесс, я оцениваю getCurrentPage(). длина>1? на нескольких ключевых страницах, чтобы судить, является ли это первой страницей. Если это первая страница, отображается кнопка для возврата на домашнюю страницу. , действительно беспомощный
    • С точки зрения повторного использования API и функции фильтра, импортированные js будут напрямую копировать весь js каждый раз, когда импорт будет упакован, что повторяется 60 раз на страницах 60. Мы можем поместить эту часть общедоступного js в vendor.js, и только упакуйте его один раз. Размер пакета значительно изменился, измените веб-пакет, см.issue

  • Перейдите к практике h5

    • Требуется замена около 30% апплета и h5.Отрисовка страницы проста, но замена компонентов занимает определенное время.К более сложным относятся следующие общие части проекта Vue.Если есть одна или два проекта Vue, я считаю, что эти части использовались раньше, и эти компоненты могут быть заменены.Просто измените бизнес-логику, используемая структура пользовательского интерфейса - это vux, близкая к weui
      • Для объекта wx мы можем объединить маршрутизатор и vux для инкапсуляции маршрутов, таких как navigationTo, redirectTo, модальные окна и всплывающие уведомления, и настроить wx так, чтобы он указывал на этот файл в webpack.base.conf, чтобы мы могли напрямую использовать объект wx. метод лица без модификации
      /*webpack.base.conf*/
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'wx': resolve('src/utils/wxSimulate.js')
  }
},
/*模拟wx的自己写的wxsimilate.js*/
  import router from '../router'
  import Vue from 'vue'
  import { ConfirmPlugin, ToastPlugin } from 'vux'
  Vue.use(ConfirmPlugin)
  Vue.use(ToastPlugin)
  const wx = {
    navigateTo ({ url }) {
      console.log(url)
      router.push({ path: url })
    },
    redirectTo ({url}) {
      router.replace({ path: url })
    },
    navigateBack () {
      router.go(-1)
    },
    showToast ({title}) {
      Vue.$vux.toast.show({
        // 组件除show外的属性
        text: title
      })
    },
    // 模态框显示
    showModal ({title, content, success}) {
      Vue.$vux.confirm.show({
        title,
        content,
        // 组件除show外的属性
        onConfirm () {
          success && success({confirm: true, cancel: false})
        },
        onCancel () {
          success && success({confirm: false, cancel: true})
        }
      })
    }
  }
  window.wx = wx
  export default wx
      • vue-amap), нечего сказать, API-ориентированное программирование
      • Загрузите вверх и вниз, используяbetterscrollпакет одинкомпонент прокрутки для слота, левая сторона контрольной точки артикула слота
      • rpx использует меньше+flexibleВместо @rpx нужно всего лишь заменить все rpx на @rpx.Кто не понял, можете посмотреть rem связанные
        /*mpvue*/
  <style scoped lang="less">
  #index {padding:100rpx 20rpx 110rpx;}
/*vue*/
  <style scoped lang="less">
  @charset "utf-8";
  @rpx: 117.188rem;
  #index {padding:100/@rpx 20/@rpx 110/@rpx;}
      • Flyio перешел из mpvue в основном без изменений
      • Загрузка Alibaba Cloud oss, упомянутая в mpvue, теперь требует изменения uploadFile в файле конфигурации на FormData в h5 для загрузки файла.
      • Работа функции ввода фокуса различается. В h5 ios не позволяет функции поднимать фокус, и пользователь должен делать это самостоятельно. Android по-прежнему может использовать el.focus().

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

Категории