OSCHINA-MIRROR/didiopensource-mpx

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

Официальный сайт и документация

Приглашаем посетить официальный сайт Mpx по адресу https://mpxjs.cn, где вы найдёте документацию, которая поможет вам использовать Mpx для создания кроссплатформенных мини-приложений.

Последние обновления

Была открыта исходная версия мобильной базовой библиотеки компонентов Mpx Cube UI (https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html). Подробнее можно узнать здесь.
Вышла версия Mpx 2.9, в которой появились атомарные классы, SSR и оптимизация размера сборки. Подробности доступны здесь, а руководство по миграции — здесь. Также были обновлены соответствующие руководства и справочные документы API.

Введение

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

Mpx обладает следующими функциями:

реактивность данных (присвоение значений, watch, computed);
композиционный API;
улучшенный синтаксис шаблонов (динамические компоненты, привязка стилей и классов, встроенные функции событий, двусторонняя привязка, refs);
исключительная производительность (оптимизация производительности во время выполнения, оптимизация размера пакета, размер фреймворка во время выполнения составляет 14 КБ);
эффективная и мощная компиляция и сборка (на основе webpack 5, поддержка постоянного кэширования, совместимость с экосистемой webpack, совместимость с нативными мини-программами, полная поддержка вывода пакетов в сценариях npm, эффективная отладка);
разработка однофайловых компонентов;
постепенное внедрение и поддержка нативных компонентов;
управление состоянием (Vuex, поддержка нескольких экземпляров Store);
межкомандная разработка (пакеты);
логический рефакторинг (миксины);
периферийные возможности (fetch, усиленные API, mock, webview-bridge);
поддержка фреймворков;
расширенная многоплатформенность (поддержка разработки для WeChat, Alipay, Baidu, QQ, Toutiao, мини-программ);
кроссплатформенная компиляция (один код для вывода на WeChat, Alipay, Baidu, ByteDance, QQ, Jingdong, быстрые приложения (web) и веб-платформы);
поддержка TypeScript (полная поддержка типов на основе ThisType);
интернационализация I18n;
модульное тестирование;
E2E-тестирование;
атомарные классы;
SSR;
решения для рендеринга во время выполнения;
кросс-терминальный вывод RN (скоро появится).

Быстрый старт

# Установить инструмент Mpx CLI
npm i -g @mpxjs/cli

# Инициализировать проект
mpx create mpx-project

# Перейти в каталог проекта
cd mpx-project

# Установить зависимости
npm i

# Разработка
npm run serve

# Производство
npm run build

Откройте проект с помощью инструмента разработчика мини-программ, чтобы просмотреть эффект в папке dist соответствующего каталога платформы.

Пример использования

<template>
  <!--Динамический стиль-->
  <view class="container" wx:style="{{dynamicStyle}}">
    <!--Привязка данных-->
    <view class="title">{{title}}</view>
    <!--Связывание вычисляемых свойств и данных-->
    <view class="title">{{reversedTitle}}</view>
    <view class="list">
      <!--Цикл рендеринга, динамические имена классов, обработка событий с передачей параметров-->
      <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
            bindtap="handleTap(index)">
        <view>{{item.content}}</view>
        <!--Циклическая внутренняя двусторонняя привязка данных-->
        <input type="text" wx:model="{{list[index].content}}"/>
      </view>
    </view>
    <!--Получение экземпляра пользовательского компонента, двусторонняя привязка, настраиваемые атрибуты двусторонней привязки и события-->
    <custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
    <!--Динамические компоненты, is принимает строку имени компонента, используемые компоненты должны быть зарегистрированы в json, глобальная регистрация также действует-->
    <component is="{{current}}"></component>
    <!--Отображение/скрытие dom-->
    <view class="bottom" wx:show="{{showBottom}}">
      <!--Шаблонная условная компиляция, __mpx_mode__ — это переменная среды, внедренная фреймворком, шаблоны с ложными условиями не будут генерироваться в dist-->
      <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view> ```
<view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
    </view>
  </view>
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      // 动态样式和类名也可以使用computed返回
      dynamicStyle: {
        fontSize: '16px',
        color: 'red'
      },
      title: 'hello world',
      list: [
        {
          content: '全军出击',
          id: 0,
          active: false
        },
        {
          content: '猥琐发育，别浪',
          id: 1,
          active: false
        }
      ],
      customInfo: {
        title: 'test',
        content: 'test content'
      },
      current: 'com-a',
      showBottom: false
    },
    computed: {
      reversedTitle () {
        return this.title.split('').reverse().join('')
      }
    },
    watch: {
      title: {
        handler (val, oldVal) {
          console.log(val, oldVal)
        },
        immediate: true
      }
    },
    handleTap (index) {
      // 处理函数直接通过参数获取当前点击的index，清晰简洁.
      this.list[index].active = !this.list[index].active
    },
    onReady () {
      setTimeout(() => {
        // 更新数据，同时关联的计算属性reversedTitle也会更新
        this.title = '你好，世界'
        // 此时动态组件会从com-a切换为com-b
        this.current = 'com-b'
      }, 1000)
    }
  })
</script>

<script type="application/json">
  {
    "usingComponents": {
      "custom-input": "../components/custom-input",
      "com-a": "../components/com-a",
      "com-b": "../components/com-b"
    }
  }
</script>

<style lang="stylus">
  .container
    position absolute
    width 100%
</style>

Пример использования фреймворка Mpx для разработки и тестирования программного обеспечения.

В данном примере используется фреймворк Mpx для создания приложения с использованием языка JavaScript. В приложении используются компоненты, которые можно повторно использовать в других приложениях. Также в приложении есть динамические стили и классы, которые могут быть изменены во время выполнения программы.

Приложение имеет следующие функции:

изменение стиля и класса элементов;
обработка событий нажатия на элементы списка;
обновление данных и связанных с ними вычисляемых свойств;
переключение между компонентами.

Также в примере описывается дизайн фреймворка Mpx, который отличается от других фреймворков для разработки мобильных приложений. Фреймворк Mpx использует синтаксис и технологии, доступные в среде разработки для мобильных приложений, и расширяет их возможности. Это позволяет разработчикам создавать приложения с более высокой производительностью и лучшим опытом разработки. Разработка команды

Основная команда:

hiyuki,
Blackgan3,
anotherso1a,
CommanderXL,
yandadaFreedom,
wangxiaokou,
OnlyProbie,
pagnkelly,
thuman,
theniceangel,
dolymood.

Внешние вкладчики:

sky-admin,
pkingwa,
httpsxiao,
lsycxyj,
okxiaoliang4,
tangminFE,
codepan,
zqjimlove,
xuehebinglan,
zhaoyiming0803,
ctxrr,
JanssenZhang,
heiye9,
lj0812,
SuperHuangXu,
twtylkmrh,
NineSwordsMonster.

Успешные кейсы

Мини-программы WeChat

Название	Описание
滴滴出行	Приложение для поиска и заказа такси.
彗星英语	Приложение для изучения английского языка.
番薯借阅	Приложение для аренды книг.
疫查查应用	Приложение для проверки статуса вакцинации от COVID-19.
小桔养车	Приложение для ухода за автомобилем.
学而思直播课	Приложение для онлайн-обучения.
小猴启蒙课	Приложение с обучающими материалами для детей.
科创书店	Приложение книжного магазина.

Больше примеров, если вы также используете Mpx Framework для разработки небольших программ и хотите поделиться с другими, пожалуйста, заполните этот вопрос.

Общение

Предоставьте способы общения в WeChat Group / QQ Group

Добавьте помощника MPX в группу ожидания приглашения

微信

Сканирование кода для входа в QQ группу

|QQ|