Вводное руководство по платформе апплетов Meituan mpvue

внешний интерфейс Командная строка Vue.js mpvue

Вводное руководство по платформе апплетов Meituan mpvue

Я написал это самРуководство по приседаниям на платформе Meituan в формате mpvue, Это вышло из-под контроля.Сегодня я воспользуюсь выходными, чтобы написать простой вводный урок для mpvue (без друзей).Этот урок только для новичков, и старые птицы не должны распыляться.

Кроме того, я также сделал простой проект для этой статьи.Если вам лень создавать проект детской обуви с нуля, вы можете перейти непосредственно к моемуgithubклонировать на локальный, После установки зависимостей можно разрабатывать прямо на этой основе без какой-либо настройки. Если вы считаете этот проект полезным, Кстати, дайте мне звезду, ваша поддержка - моя самая большая мотивация, спасибо!

Что ж, давайте перейдем к теме, прежде всего, позвольте мне процитировать официальное введение mpvue от Meituan.

mpvue — это фреймворк для разработки небольших программ с использованием Vue.js. Фреймворк основан на ядре Vue.js, mpvue модифицирует Vue.js. Реализация среды выполнения и компилятора , чтобы он мог работать в среде апплета, тем самым предоставляя весь набор возможностей разработки Vue.js для разработки апплета.

Основные характеристики

Используя mpvue для разработки апплета, вы получите следующие возможности, основанные на технологической системе апплета:

  1. Полноценные возможности компонентной разработки: улучшите возможность повторного использования кода
  2. Полный опыт развития Vue.js
  3. Удобное решение для управления данными Vuex: легко создавать сложные приложения
  4. Механизм быстрой сборки веб-пакета: настраиваемая стратегия сборки, горячая перезагрузка на этапе разработки
  5. Поддержка использования внешних зависимостей npm
  6. Быстро инициализируйте проекты с помощью инструмента командной строки Vue.js vue-cli
  7. Возможность преобразования кода H5 и компиляции в объектный код апплета

Лучший способ научиться - это сделать.Мы запустим демонстрационный проект голыми руками, чтобы увидеть, так ли он хорош, как сказал официальный представитель. Если у вас есть опыт разработки Vue, я думаю, вы будете хорошо знакомы с этим процессом, и вам даже не нужно устанавливать другие инструменты. Создайте проект напрямую с vue-cli.Если у вас не установлен vue-cli, то вам нужно сначала запустить команду

npm install --g vue-cli

После установки vue-cli мы можем запустить команду для автоматической сборки проекта (во время процесса вас спросят, хотите ли вы использовать некоторые инструменты/плагины, Пожалуйста, выберите y или n в соответствии с вашей реальной ситуацией.Для тех, кто не знает, что выбрать y или n, выберите n)

vue init mpvue/mpvue-quickstart test-wxapp

Затем заходим в созданный нами проект и устанавливаем зависимости

cd test-wxapp
npm i

Наконец, запустите нашу службу разработки

npm run dev

Проект запущен.В это время мы открываем инструмент разработчика WeChat, выбираем апплет, а затем создаем новый.Заполняем каталог проекта. в каталоге нашего проектаdistсодержаниеtest-wxapp/dist, вы можете увидеть эффект

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

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
    pages: ['pages/logs/main', '^pages/index/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
}

здесьconfigСодержимое под полем представляет собой глобальную конфигурацию всего апплета, среди которыхpagesэто маршрут страницы,windowЭто некоторая конфигурация страницы (большинство из которых — конфигурация верхней панели) , эти конфигурации в конечном итоге будут упакованы в собственный апплетapp.json, если вы не разбираетесь в этих конфигурациях, рекомендуется посмотреть документацию по мини-программе WeChat, которая здесь повторяться не будет.

Давайте положим/src/pagesпоследующийcounterа такжеlogsДве папки удалены, осталась только однаindex, Кстати/src/componentsВсе файлы в папке также удаляются. тогда поставь/src/main.jsвнутриconfig.pagesЛишние маршруты в нем также удаляются, оставляя только один['^pages/index/main']Чтоб теперь только одна индексная страница,

тогда мы открываем/src/pages/index/index.vueМы удаляем лишний код внутри и оставляем только базовый скелет

<template>
  <div class="container">
       我是首页
  </div>
</template>

<script>

export default {
  data () {
    return { }
  },
  methods: {},

  created () {}
}
</script>

<style scoped>

</style>

tip /src/utils/index.jsЭто общедоступная библиотека функций, в ней есть только простая функция форматирования даты, вы можете удалить ее, если она вам не нужна.

Пока что с чистым и пустым проектом все в порядке, теперь давайте оптимизируем некоторые античеловеческие вещи, присущие WeChat.

1. Для начала используйте компонент mptoast вместо официально предоставляемого wx.showToast.Про неудобства wx.showToast говорить не буду.Ключ в том,что ямки все равно есть Базовая библиотека апплета относительно невелика.Как ни настроишь, к всплывающему окну всегда будет добавлен хук.Иногда хочется проверить всплывающее сообщение об ошибке. Серьезно вводите пользователей в заблуждение, еще есть ограничение на количество слов, а иконка с иконкой не может превышать 7 слов, вы говорите, вы говорите о 7 словах достаточно, Тогда давайте посмотрим на mptoast, согласноОфициальное введениеmptoast имеет такие характеристики, как легкий вес, меньшая конфигурация, меньшая избыточность, простота использования и широкие возможности настройки.

Мы представим и настроим его из npm в соответствии с официальным введением

npm i vuex
npm i mptoast -D

Добавьте следующий код в основной файл конфигурации проекта (обычно находится в src/main.js)

import mpvueToastRegistry from 'mptoast/registry'
mpvueToastRegistry(Vue)

На странице, где вам нужно всплывающее окно, импортируйте компонент, зарегистрируйте его, а затем добавьте зарегистрированный вами компонент на страницу, вы можете вызвать this.$mptoast() в js, ниже приведен простой пример

<template>
  <div>
    <-- 省略其他代码 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>

Это довольно просто использовать

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

Поэтому после создания базового проекта первое, что нам нужно сделать, — это использовать wx.request для инкапсуляции метода асинхронного запроса на основе обещаний. Давайте взглянем на официальный пример кода wx.request.

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

Видно, что в каждом запросе приходится отправлять много вещей, и на этих вещах меньше внимания.Вероятно, что для проекта, Большинство из них исправлены, так что не является ли это излишним?

Совет: Дополнительные параметры wx.request см.Официальная документация WeChat

Давайте проанализируем его. Первый параметр — это URL-адрес, то есть адрес, который мы запрашивали. Каждый раз он должен быть разным, но разница должна заключаться только в последней части URL-адреса. Расположение имени интерфейса другое, а прежние адреса серверов в основном совпадают, напримерhttp://www.abc.com/api/member/loginДля всех интерфейсов одного проекта адрес сервераhttp://www.abc.com/api/Должно быть то же самое, разница только в интерфейсном имени мачехиmember/login, Затем мы можем разделить URL на服务器地址 + 接口名称, Это также облегчило бы онлайн позже при переключении адреса сервера.

Второй параметр — это запрашиваемый параметр, который каждый раз должен быть разным, поэтому мы не будем его изменять (на самом деле в практических приложениях Часто возможно, что каждый интерфейс должен нести токен, мы также можем добавить его здесь, но мы не будем здесь углубляться)

Третий параметр — это заголовок запроса, который в общем-то одинаков в одном и том же проекте, поэтому пишем его насмерть. Есть еще один параметрmethodметод запроса, Поскольку используется значение GET по умолчанию, оно не указано здесь. Нам нужно установить его здесь. Из-за текущего режима разделения большинство из них теперь являются запросами POST, поэтому мы также записываем его как метод: «POST»

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

// 假设以下代码在 `/src/utils/requestMethod.js`

let serverPath = 'http://www.abc.com/api/'
export function post(url,body) {
    return new Promise((resolve,reject) => {
        wx.request({
              url: serverPath + url    // 拼接完整的url
              data: body
              method:'POST',
              header: {
                  'content-type': 'application/json'
              },
              success(res) {
                resolve(res.data)  // 把返回的数据传出去
              },
              fail(ret) {
                reject(ret)   // 把错误信息传出去
              }
            })
    })
}

С таким пакетом мы можем импортировать указанный выше файл в другое место, а затем использовать функцию post для запроса

import {post} from '/src/utils/requestMethod.js'
// 需要注意的是，这行代码必须要在async修饰的函数里面才能正确调用
let res = await post('member/login',{name:myname})

Если вы считаете, что каждый раз импортировать этот файл очень хлопотно, то его можно и на прототип (прототип) Vue (mpvue) повесить, открываем/src/main.jsфайл, а затем добавьте в него следующий код

import {post} from '/src/utils/requestMethod.js'
Vue.prototype.$post = post

Таким образом, мы можем напрямую использовать this.$post() для вызова всех экземпляров Vue (mpvue), всего одной строки кода,

// 这行代码同样需要在async修饰的函数里面才能正确调用
let res = await this.$post('member/login',{name:myname})

как насчет этого? Удобнее, чем оригинал?

Конечно, после запуска вы все равно можете столкнуться с различными проблемами.Здесь я сделал некоторые резюме проблем, с которыми я столкнулся.Руководство по приседаниям на платформе Meituan в формате mpvue, Надеюсь, это поможет вам, а такжеофициальная документацияэто тоже очень хорошо

Категории