Нет друзей (mpvue), закажи еду на вынос и хорошо поешь в одиночестве

внешний интерфейс JavaScript Vue.js mpvue
Нет друзей (mpvue), закажи еду на вынос и хорошо поешь в одиночестве

Каждый раз, когда я пишу статью, я всегда волнуюсь. Перед лицом успеха мы всегда возлагаем большие надежды и всегда хотим быть нетерпеливыми, чтобы получить плоды победы. Но каждый успех не может прийти к нам легко. Почти каждый раз нам приходится платить большим терпением и усердием, а то и почти параноидальной глупой настойчивостью. С момента запуска программы мини я начал переходить на этот рынок. Это не из-за его популярности, а из-за интереса к обучению, он всегда хочет исследовать новые знания. Именно эта мотивация заставляет меня идти вперед. из моей последней статьи«Didi One Summer, специальный автомобиль мини-программы уже здесь»С момента публикации прошло полмесяца. Встретил много хороших друзей. Они оптимистичны, веселы и остроумны. Относитесь к другим с самым непритязательным энтузиазмом. Они, не колеблясь, добавили блеска моему сбору, ободряли и поправляли меня. также спасибоХуан ИУчитель дал мне возможность взять интервьюМООКзамечательный курс. Возвращаясь к теме, сегодня я предлагаю вам апплет Meituan Takeaway WeChat, разработанный на основе mpvue. Поскольку с момента запуска mpvue прошло всего 3 месяца, я подробно объясню каждую деталь, надеясь помочь вам, кто борется на пути к mpvue. Жарко, давай вместе закажем еду на вынос! !

предисловие

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

Стек технологий, используемый проектом

  • Запрос данных:flyio.js- Кроссплатформенная библиотека HTTP-запросов на основе Promise, которая одновременно поддерживает браузеры, апплеты, Node и Weex. Позволяет максимизировать повторное использование кода на нескольких концах
  • css-прекомпилятор:stylus- Фреймворк предварительной обработки CSS на основе Node.js
  • Источники данных:EasyMock- Предоставление фиктивных данных для тестирования
  • Общая рама:mpvue
  • карта:API карты Tencent

Начальные шаги загрузки

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
  • 3. Инструмент разработки апплета указывает на следующий каталог dist

визуализация

Даже если это описано красивым языком, все равно оно того не стоиткартинаприйти фактически. Давайте наслаждаться едой на вынос Meituan вместе!

index

Искра, созданная mpvue и апплетом (поездка в яму)

При написании мини-программы на вынос Meituan я, как и все, споткнулся. Всегда будут разные проблемы, и я не могу избавиться от метода написания vue и метода написания mpvue. Вскоре после выхода mpvue действительно мало эффективных ресурсов, и нет введения в базовый процесс проекта. Так что я создал эту статью и задумал весь комплекс разработки mpvue через этот завершенный проект. Многие вопросы не могут быть перечислены один за другим, но я постараюсь объяснить наиболее распространенные и часто используемые места. Рад поделиться и помочь сообществу.

1. Инкапсуляция запросов данных в mpvue

Самое главное в написании проекта — это данные, с данными вся страница оживет, а для полива данных потребуется HTTP-запрос. Работа JavaScript в WeChat отличается от работы браузеров. Логика сценария страницы выполняется в JsCore. JsCore не имеет объекта окна, а в JsCore нет объекта XmlhttpRequest, поэтому jquery, zepto и axios не могут участвовать в разработке WeChat. а в это время муха возьмет на себя эту важную задачу.

  • 1. Установите flyio.js

npm install flyio

  • 2. Создайте fly.js в утилите для инкапсуляции
import Vue from 'vue' 
var Fly=require("flyio/dist/npm/wx.js") //wx.js为flyio的微信小程序入口文件
var fly=new Fly(); //创建fly实例
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
    config.headers["X-Tag"]="flyio";  //给所有请求添加自定义header
    return config;
})
//配置请求基地址
fly.config.baseURL="https://www.easy-mock.com/mock/5aded45053796b38dd26e970/"
Vue.prototype.$http=fly  //将fly挂载在vue上供全局使用
export default fly
  • 3. Инкапсулируйте метод getList в main.js в корневом каталоге.Страница, которая использует запрошенные данные, может напрямую вызывать этот метод. Улучшить скорость повторного использования кода
Vue.prototype.getList = function () {
     wx.showLoading({
       title: '加载中',
   })
   this.$http.get('sell#!method=get').then((res)=>{
       this.restaurant = res.data.data.restaurant;  //商家数据
       this.goods = res.data.data.goods; //商品数据
       this.seller = res.data.data.seller; //商家详细数据
       this.ratings= res.data.data.ratings //评论数据
       wx.hideLoading();
     }).catch((e)=>{
     console.log(e)
   })
}

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

2. Подробное объяснение практических функций mpvue

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

mpvue позиционирование и поиск местоположения

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

map
Официально скопированный js находится в разделе utils, здесь следует отметить, что его вывод необходимо изменить на

export default QQMapWX;

Только таким образом его можно использовать на странице, которая используется здесь с API-интерфейсами wx.getLocation() и wx.chooseLocation(), предоставляемыми апплетом WeChat.

 import QQMapWX from "../../utils/map"; //导入刚引入的js
    var qqmapsdk;
    qqmapsdk = new QQMapWX({
    key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ'
    });

mpvue pull-up load pull-down обновление

Реализовать вытягивающую загрузку и подтягивающее обновление апплета mpvue с помощью методов onPullDownRefresh и onReachBottom.

index

// 局部开启下拉刷新,就在文件下的main.js
export default {
  config: {
    "enablePullDownRefresh": true,
  }
}

 onReachBottom() {
        let nextPage = this.page +1; //定义每一页page，下来刷新新的一页+1
        this.page = nextPage  //更新page
        this.$http.get('sell#!method=get').then((res)=>{
        this.restaurant =[...res.data.data.restaurant,...this.restaurant]//请求的新数据，解构出来渲染页面
        }).catch((e)=>{
        console.log(e)
        })
    },
onPullDownRefreash(){
  this.isShow = !this.isShow 
}

Связь второго уровня в mpvue

Идея реализации этой функции:

  • 1 Слева направо: при нажатии на элемент на левой боковой панели получается идентификатор, переносимый элементом, а затем динамически передается прокрутке в поле зрения правой боковой панели, чтобы реализовать движение соответствующего элемента. в правую верхнюю часть боковой панели.

  • 2 Справа налево: вычисляя высоту прокрутки всего правого ползунка и сравнивая расстояние между каждой категорией правого ползунка сверху, получается индекс категории, которая прокручивается вверх. Затем умножьте полученный индекс на высоту элемента в левом ползунке и динамически назначьте его для scrollTop в левом ползунке, чтобы управлять связью левого ползунка.

    index

Обратите внимание на эти моменты: (1) rpx используется в апплете wxss, а значение, полученное scrollTop в js, равно px, поэтому возникает проблема rpx в px. На основе iPhone6 ​​формула преобразования:

// percent 为当前设备1rpx对应的px值
var percent = res.windowWidth / 750;

(2) WeChat поставляется с компонентом пользовательского интерфейса с прокруткой, который связывает события прокрутки с помощью bindscroll="scroll"; динамически управляет пассивной прокруткой левого ползунка с помощью scroll-top="{{scrollTop}}". Код не выкладывается поштучно, а в проекте есть подробные комментарии. точказдесьПроверить

Три, анализ компонентов mpvue, связь компонентов

Завершить проект несложно, но чтобы сделать проект хорошо, требуется бесчисленное количество мыслей. Один из них — чтение документов. Действительно, когда вы снова и снова просматриваете документацию, вы обнаружите, что ее очень легко писать и использовать. Можно щелкнутьvue-документацияПодробнее.

Компонентный анализ

Что такое компонентный анализ? Для mpvue компоненты — это основные единицы, из которых состоит проект. Пока компоненты разделены, проект пишется очень быстро. Для простоты понимания здесь определены два типа компонентов: компоненты страницы и функциональные компоненты. Компонент страницы — это полное отображение адреса веб-страницы, которую вы просматриваете в данный момент, и он будет содержать несколько функциональных компонентов. Мини-программа Meituan Takeaway состоит из множества функциональных компонентов, которые примерно перечислены ниже:

  1. Составляющая рейтинга, обязательные значения реквизита: размер звезд, рейтинг мерчанта
  2. Компонент корзины: необходимые реквизиты: selectFoods, deliveryPrice, minPrice и т. д.
  3. Компонент объявления: каждый проект неизбежно выпускает некоторые объявления или всплывающие окна и извлекает их как компонент.
  4. Компоненты с интервалом разделения: Компоненты могут быть очень большими и иметь много функций, или их может быть мало.Пока они часто используются в проекте, их можно извлечь как компонент.
  5. компонент swiper: Как компонент, карусельная диаграмма может уменьшить груды кода на странице и извлечь его как компонент, который будет легче поддерживать в будущем.

компонент связи

1. Данные между компонентами можно передавать через пропсы, здесь выберите товары -> выберите компоненты -> корзина -> детали заказа, чтобы подробно описать, как данные передаются между компонентами.

  • 1 Выберите компоненты
props: {
      food: {  //接受一个food，代表选择的是哪个商品
          type: Object,
      }
  },
  addCart(event) {
      if(!this.food.count){
          this.$set(this.food, 'count', 1)  //点击事件传递给父组件
          this.food.count = 1; 
      }else{
          this.food.count++  // 商品++
      }
  },
  • 2 корзина
通过props接受一个selectFood，这里把它放入小程序的本地中提供给订单页面
 try {
            wx.setStorageSync('selectFoods', this.selectFoods)
        } catch (e) {   
            console.log(e) 
        }
  • 3 Страница заказа
 try {
    var value = wx.getStorageSync('selectFoods') //拿到存储的数据，使用同步的概念
    if (value) {
      this.isShow = false; // 判断订单也是否有数据，没有数据则用v-show引用一个组件去渲染页面
      this.orderList=value; //数据渲染页面
    }
  } catch (e) {
    console.log(e)
  };

Во-вторых, вызов методов между родительским и дочерним компонентами может быть выполнен черезon,emit

var Event = new Vue();//相当于又new了一个vue实例，Event中含有vue的全部方法
Event.$emit('msg',this.msg);//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置
Event.$on('msg',function(msg){//接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，
要对数据的操})

fitting

сообщение

Есть много вещей, о которых я хочу поговорить.Например, изображения, на которые ссылается апплет mpvue, должны быть помещены в каталог статических файлов, и вычисляется атрибут компонента. И использование vuex в глобальных данных и так далее. Но энергия человека действительно ограничена, я тоже студент третьего курса, я занят поиском компании для стажировки в последнее время, и я также изучаю базовый анализ исходного кода Vue. Все, что может закончиться здесь. Если вам нравятся какие-то из них, вы можете скачать их с моего github и не спеша изучить. Вот адрес моего проектаmpvue Meituan апплет для еды на вынос. Я также надеюсь, что единомышленники могут присоединиться к обсуждению.Если вам что-то непонятно, вы можете прокомментировать меня напрямую или отправить мне qq: 972774037, и я отвечу вам как можно скорее. Я также надеюсь, что это добавит красок моему поиску стажировки. В следующем выпуске будет запущено больше интересных проектов Vue. Следите за мной! ! !

Категории