Wepy + OrivePX Маленькая программа разработки Image Ifformed

внешний интерфейс JavaScript Апплет WeChat Vue.js NPM

предисловие

С момента выпуска апплета прошло больше года.От обещания заменить АПП на тот момент, до недавней реализации функции взаимного прыжка между АПП и апплетом, позиционирование незаметно стало дополнением к ПРИЛОЖЕНИЕ.Вынужденно,как и коллеги,которые удалили приложения Mobike и Meituan в то время и думали,что будут работать только мини-программы,они все установили приложения обратно.Почему? Потому что апплет реализует только некоторые функции оригинального приложения и, наконец, обнаружил, что приложение удобно в использовании.В конце концов, память мобильного телефона в основном составляет 32 г, а приложение не занимает много места.

Технологии бесконечны, жизнь непроста, откройте текст.

стек технологий

Официальная документация апплета WeChat была очень подробной.После нескольких обновлений апплет теперь поддерживает пользовательские компоненты, вводит плагины и внешние ресурсы от других разработчиков, а также имеет набор языков апплета wxs.Согласно официальной документации сказал, что скорость работы на IOS в 2-20 раз выше, чем у JavaScript, а компоненты и API становятся все более и более совершенными.

WePY – это небольшая платформа для разработки программных компонентов, разработанная командой Tencent. Первое обновление было выпущено 2016.11.23, что было раньше времени выпуска небольшой программы 2017.1.9. После того, как ее использовал большой парень, которому нравится Vue, он обнаружил, что эта штука недостаточно крута для разработки, и она даже не поддерживает компоненты.Тогда большой парень собрал группу людей и сказал, братья, давайте сделаем фреймворк, чтобы каждый мог использовать класс The Vue метод разработки заключается в разработке небольших программ, и тогда вы должны понимать.Если вы знаете Vue, это займет несколько минут, чтобы начать работу.Он поддерживает передачу значений свойств компонентов, настраиваемые события, распределенное повторное использование компонентов Mixin и вычисляемые функции свойств.Вычисляется, шаблон слот для раздачи контента и т. д.

Weappx — это инфраструктура управления состоянием для небольших программ. Можно использовать как wepy, так и нативные апплеты. API похож на Dva и Vuex, но намного проще, чем два. Dva сократила количество API до 6, что больше Для начала всего 4 API.Хотя API мало,как фреймворк управления состоянием,есть все необходимые функции.Разрабатывать довольно круто.Для подробного ознакомления обращайтесь к документации.Звезда,тем больше чем 50 звезд weappx - это немного потрепанно.Если вы используете детскую обувь, которая, по вашему мнению, довольно хороша, вы должны пометить их все и морально поддержать автора.

Встреченная яма и точки развития

1. Повторяющийся тег вложен на два уровня и выше, и значение передается от компонента к самому компоненту.

Эта проблема на самом деле является ошибкой wepy.Многие люди упоминали о проблемах на github.Официальный не дал объяснения.После их собственного исследования есть два решения:

  1. Шаблон шаблона вместо чистых компонентов с небольшой программой для родных

Цикл второго уровня в подкомпоненте принимает этот метод записи и напрямую использует шаблон

<template wx:key="{{index}}" wx:for="{{item.giftBoxs}}" wx:for-item="giftBoxsItem" data="{{...giftBoxsItem}}" is="indexMoItem"></template>

Разместите этот шаблон на главной странице

<import src="../../components/giftIndex/indexMoItem.wxml"/>

В конечном итоге Wepy упакует код компонента, на который указывает ссылка, на главную страницу, так что вы сможете добавить шаблон на главную страницу.

  1. Первый способ может решить эту проблему и сэкономить количество кода, но это смесь wepy и нативных апплетов, а другое решение найдено позже

Чтобы значение было передано во втором слое цикла, оберните слой тегом Repeat.

<repeat for="{{ [item] }}" key="item.orderNo" index="index" item="itemval"> <giftItem :itemval="itemval" ></giftItem> </repeat>

Я уже ответил на него в Проблемах wepy, и старому железу понравилось, что должно помочь ему решить эту проблему

2. Передайте значение, подобное Object.key, дочернему компоненту.

нормальное проходное значение

// 数据
 data = {
    textMsg1: 'text1',
    textMsg2: {
      text: 'text2'
    },
  }
 // 组件
<child :msg="textMsg1"></child>

дисплей интерфейса

Передать значение в объект

<child :msg="textMsg2.text"></child>

дисплей интерфейса

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

<repeat for="{{ [textMsg2.text] }}">
   <child :msg="item"></child>
</repeat>

3. Инструменты для разработки небольших программ замедляют работу

В процессе развития города, поскольку проектные документы получают больше и больше, он обнаружит, что инструменты разработки апплета становятся медленнее и медленнее, и даже прыжок ждет несколько секунд, чтобы перейти на этот раз, на этот раз вам нужно Чтобы упаковать апплет. ДОКУМЕНТА DIST-папка Удалить, затем повторный пакет, она будет очень быстрой, и WAUPY также предоставляет команды, а запуск NPM запустить чистоту непосредственно для достижения того же эффекта.

4. Предварительный просмотр апплета на мобильном телефоне и зависание

Этому может быть много причин.Если вы использовали собственный апплет для разработки проекта ранее, обычной операцией является непосредственное нажатие кнопки предварительного просмотра в инструменте разработки, а затем использование мобильного телефона для сканирования кода для предварительного просмотра. но в процессе использования wepy после использования команды npm run dev это для среды разработки.Код в папке dist не сжимается и не оптимизируется, поэтому предварительный просмотр мобильного телефона будет очень медленным.Запуск npm run build сделать предварительный просмотр производственного пакета может решить проблему.

5. Данные обновляются, но вид пользовательского интерфейса не обновляется

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

6. Индивидуальные стили мобильных телефонов беспорядочны

Эта проблема возникает из-за того, что в скаффолдинге wepy нет автодополнения стиля конфигурации, и вам нужно настроить его вручную.Просто добавьте следующий код в wepy.config.js,Адрес плагина

module.exports.plugins = {
    'autoprefixer': {
      filter: /\.wxss$/,
      config: {
        browsers: ['last 11 iOS versions']
      }
    }
  }

7 Через страницу несколько раз с одинаковыми проблемами передачи данных компонентов

Та же самая страница использует тот же компонент несколько раз. Необходимо дать этот компонент другое имя. Этот официальный документ имеет введение.

需要注意的是，WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。

Это связано с компонентным механизмом wepy,

// data
data = {
    textMsg1: 'text1',
    textMsg3: 'text3',
    textMsg2: {
      text: 'text2'
    },
}
// 组件
 <child :msg="textMsg1"></child>
 <child :msg="textMsg3"></child>

Согласно обычной логике конечным результатом отображения должен быть текст1 и текст3, но

Посмотрим на скомпилированный код

 <view class="containers">
    <view>我是子组件</view>
    传递来的数据：{{$child$msg}}
</view>
<view class="containers">
 <view>我是子组件</view>
  传递来的数据：{{$child$msg}}
</view>

В AppData в средствах разработки видим

Я полагаю, вы уже понимаете, что компонент в wepy на самом деле копирует код компонента на импортированную страницу.Имя переменной, используемой в компоненте, изменено на $ + имя компонента + имя переменной.Данные на странице с описанием компонента на самом деле Это объект. Значение атрибута объекта будет покрывать переднюю часть. Процесс рендеринга страницы выглядит примерно следующим образом.

data = {
}
// 渲染第一个组件
data.$child$msg = 'text1'
// 渲染第二个组件
data.$child$msg = 'text3'

Закомментируйте второй компонент, и первый будет отображаться нормально.

Мы даем компоненту другое имя, и дисплей отображается так, как ожидалось.

// 挂载组件
components = {
    child1: Child,
    child2: Child
};

<child1 :msg="textMsg1"></child1>
<child2 :msg="textMsg3"></child2>

// 编译后
<view class="containers">
 <view>我是子组件</view>
  传递来的数据：{{$child1$msg}}
</view>
<view class="containers">
 <view>我是子组件</view>
  传递来的数据：{{$child2$msg}}
</view>

Мы видим, что отображение нормальное, и мы также можем видеть данные при просмотре данных.

8. Ошибка при изменении данных состояния в weappx

В процессе использования weappx данные в состоянии могут быть изменены только в мутациях.Если данные изменены в другом месте, будет сообщено об ошибке, Uncaught (in promise) TypeError: Невозможно назначить только для чтения свойство 'count' объекта '#', это Смысл предложения в том, что счетчик является атрибутом только для чтения и не может быть установлен. Если страница хочет использовать данные из других моделей, лучше всего глубоко клонировать ее, чтобы избежать непреднамеренного изменения данных и вызвать вышеуказанные ошибки.

испытывать чувства

1. Он использует синтаксис, похожий на Vue, который удобен для новичков и позволяет быстро начать работу, но все же требует изучения API апплета.Среда не очень совершенна, и есть много ям, которые нужно заполнить.

2. Используйте структуру управления состоянием для централизованного управления логическим кодом, реализации совместного использования различных состояний страниц и повышения эффективности разработки.

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

4. Много импортированных библиотек, из-за чего объем проекта получается слишком большим

Суммировать

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

Категории