Слияние кода завершено, страница обновится автоматически
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 обладает следующими функциями:
# Установить инструмент 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 использует синтаксис и технологии, доступные в среде разработки для мобильных приложений, и расширяет их возможности. Это позволяет разработчикам создавать приложения с более высокой производительностью и лучшим опытом разработки. Разработка команды
Основная команда:
Внешние вкладчики:
Успешные кейсы
Мини-программы WeChat
| Название | Описание |
|---|---|
| 滴滴出行 | Приложение для поиска и заказа такси. |
| 彗星英语 | Приложение для изучения английского языка. |
| 番薯借阅 | Приложение для аренды книг. |
| 疫查查应用 | Приложение для проверки статуса вакцинации от COVID-19. |
| 小桔养车 | Приложение для ухода за автомобилем. |
| 学而思直播课 | Приложение для онлайн-обучения. |
| 小猴启蒙课 | Приложение с обучающими материалами для детей. |
| 科创书店 | Приложение книжного магазина. |
В тексте запроса присутствуют изображения, которые не удалось перевести. | Три акции «Шнур Lite» | «Учись и думай», предпочтительный курс |
| :---: | :---: |
| «Три акции Шнур Lite» | «Учись и думай», предпочтительный курс |
| | |
| В додзё | «Три акции, шнур Lite» | «Учись и думай», предпочтительный курс |
| | | |
| Пищевое наслаждение | Медно-безопасный врач | Меднобезопасное обучение | Вихревая облачная машина |
| | | | |
| Магазин имеет дело с бизнесом | Цветочная свинка, вождение автомобиля | Апельсиновое сердце, предпочтительное | Маленький Эр, метание дротиков |
| | | | |
| Официальная микро-торговая площадка Shunxin | Диди, выход | Хан, официальный Pro |
| | | | |
| Окружение | Цин Цзю, велосипед | Диди, ветер, автомобиль | Диди, замена водителя | Новая замена водителя Цинь Цзю | Бейбэй, узнай звук |
| | | | | |
| Другие платформы для небольших программ: |
| Диди, выход (Alipay) | Маленькая свинка, зарядка (Alipay) | Только встреча, QQ | Карманный документ, фотография (Baidu) | Только встреча (Baidu) | Только встреча (Byte) |
| Диди, выход (Alipay) | Маленькая свинка, зарядка (Alipay) | Только встреча, QQ | Карманный документ, фотография (Baidu) | Только встреча (Baidu) | Только встреча (Byte) |
Больше примеров, если вы также используете Mpx Framework для разработки небольших программ и хотите поделиться с другими, пожалуйста, заполните этот вопрос.
Предоставьте способы общения в WeChat Group / QQ Group
| 微信 |
|---|
|QQ|
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )