Обсуждение опыта разработки мини-программы WeChat "Paipai Secondhand"

внешний интерфейс Апплет WeChat
Обсуждение опыта разработки мини-программы WeChat "Paipai Secondhand"

За последние две недели все, должно быть, видели выпуск JD.com подержанной торговой платформы Paipai.Новости, "Пайпай секондхенд"APPТакже официально запущен. в то же времянасТакже полным ходом идет разработка апплета WeChat «Paipai Secondhand». Весь процесс был болезненным и счастливым, испытывая боль от добычи ямы и радость после прыжка из ямы.

Введение в проект

«Paipai» в основном имеет три основных направления деятельности: переработка, производство продуктов премиум-класса и личные незанятые операции. JD.com «объединит ресурсы обратной цепочки поставок, такие как переработка, тестирование, переработка и продажи, с идеей работы на основе платформы и будет производить качественные бывшие в употреблении товары». способствует продвижению продукта и непосредственно сталкивается с пользователями., чтобы помочь своему собственному бизнесу и другим преимуществам. Затем компания решила запустить версию апплета WeChat «Paipai Secondhand».

Основные страницы мини-программ WeChat:

  • Пайп Хоум
  • Домашняя страница группы Paipai
  • Страница перепродажи в один клик
  • Страница выпуска продукта
  • страница сведений о продукте
  • Страница сведений о заказе
  • Мой (опубликовать, продать, любимый)

Открываем апплет и смотрим видео работы:

Video Playerзагрузить файл

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

Предварительное исследование проекта

До этого проекта у нас был опыт работы с несколькими небольшими программами, поэтому, когда проект начался, мы приняли подход «предпринимательского бизнеса», чтобы подтолкнуть детскую обувь для бизнеса к подаче заявок на квалификацию, от которой заранее зависят небольшие программы, такие как : небольшой номер учетной записи программы, подача имени, условия оплаты, ежедневные посещения Tencent Maps и т. д.
В то же время, в отличие от мини-программ, которые мы делали в прошлом, этот проект перенесет весь процесс Paipai C2C на платформу мини-программы и реализует опыт транзакций с группой WeChat в качестве оператора связи. В процессе рассмотрения требований мы обычно сталкивались со следующими проблемами и проводили предварительное техническое исследование. Мы объясним результаты предварительного исследования техническими трудностями.

Технологическая архитектура

На основе существующей структуры апплета мы обогатили пользовательские компоненты, добавили базовую библиотеку классов и внедрили в апплет применение SASS и Eslint. Вот лишь несколько моментов:

  1. Из-за ограничения небольшого размера пакета программы (размер пакета во время разработки ограничен 2M); мы также оптимизировали ресурсы статического изображения и разместили большинство значков в CDN, а небольшая программа может напрямую обращаться к сетевым ресурсам. .
  2. Использование SASS не только соответствует нашим существующим методам реконструкции ПК и М-стороны (с ними все знакомы), но и значительно повышает эффективность разработки небольших программ.
  3. Приложение ESLint использует спецификацию кода, которую мы установили для проверки вывода нашего кода.

Кроме того, ввиду ограничения уровня перехода маршрутизации Мини-программы (изначально 5 уровней), мы доработали схему перехода маршрутизации каждого процесса.

Технические трудности

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

Ограничение размера пакета мини-программы

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

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

Во-вторых, перед разработкой мы провели много дискуссий, обобщили общие модули из десятков набросков дизайна и написали много общих компонентов, написали много общедоступных методов обработки данных и извлекли их в класс util;

В-третьих, мы спрайтим и крошим статические ресурсы, а затем публикуем их в CDN.Элементы в апплете, которые зависят от значка, напрямую относятся к сетевым ресурсам.

Проблемы совместимости мини-программ

У апплета есть некоторые известные проблемы совместимости, которые четко указаны в документе, но документ не является исчерпывающим для недавно выпущенного iPhone X. На этот раз мы также протестировали эту модель и разобрались с проблемами, с которыми столкнулись. Я надеюсь, что это может быть полезно для всех.

Во-первых, позвольте мне показать вам картинку, у нее есть две проблемы, позвольте мне представить их одну за другой:

1. После установки border-radius границы элементов в iphoneX отображаются не полностью

Когда вы сталкиваетесь с этой проблемой, вам нужно всего лишь изменить rpx на px. На самом деле такие проблемы бывают не только у апплета.В процессе разработки M-стороны, если используется такая единица, как rem, это неизбежно вызовет это.

2. Настройка вида padding-left в iphoneX имеет отклонение в мобильном телефоне

<view class="com-lab ">
      <span>运费</span>      
</view>
<view class="sel-box">
      分类       
</view>

Этот код очень прост, мы видим, что в плате за доставку стоит тег span, а в классификации нет, при написании wxss мы писали так

.com-lab span{
  padding-left:30rpx;
}
.sel-box{
  padding-left:30rpx
}

В iphoneX произойдет отклонение, как показано выше, и метод модификации также прост.

.com-lab{ padding-left:30rpx; } 
.sel-box{ padding-left:30rpx }

Уберите отступ тега span и измените его на внешний вид, чтобы отклонение пропало, но и первый способ написания правильный в браузере.Почему такое отклонение в ios мобильниках, думаю может оно время компиляции Это вызвано синтаксисом апплета, поэтому постарайтесь свести к минимуму эти различия при рефакторинге страницы.

3. Проблема адаптации iphoneX к нижней рабочей зоне WeChat

Все мы знаем, что после того, как телефон iPhoneX открывает режим челки, появляется понятие безопасной области, и нам нужно поместить весь отображаемый контент в безопасную область, поэтому нам нужно разобраться с черным индикатором Home Indicatorzuo внизу, иначе текст будет заблокирован. Во-первых, различать модели в коде JS.

wx.getSystemInfo({
   success: function(res) { 
        if(res.model.toLowerCase().indexOf('iphone x') != -1) {         
          me.globalData.isIpx = true;
        }
   }
 });

Затем выполните некоторую обработку стилей в wxss.

.fix-ipx-tabbar-bottom {
  bottom: 66rpx;
}
 
.fix-ipx-tabbar-bottom::after {
  content: '';
  position: fixed;
  bottom: 0rpx;
  height: 66rpx;
  width: 100%;
  background: #FFF;
}

Этот способ обработки не сложен.Ключ в том, что нам нужно знать, что есть такая проблема с мобильным телефоном iphoneX, поэтому, будет ли домашний мобильный телефон иметь новую форму в будущем, мы также можем использовать этот метод, чтобы справиться с этим, это просто и эффективно Это хорошо.

4. wx.showModal щелкните слой маски, чтобы вызвать OK, за текстом подсказки в ios есть белый фон.

Поскольку модальное окно является API-интерфейсом апплета, записи в стиле модификации пока нет Мы напрямую повторно используем написанный нами компонент ModalDialog и заменяем этот метод.

Дефекты в существующих компонентах апплета

1, вопросы совместимости ввода текста в iOS
Video Playerзагрузить файл

Обычно используемые теги для ввода текста — это не что иное, как input и textarea.Когда мы использовали эти два тега для редактирования текста, мы столкнулись с 3 проблемами под ios.Они:

  1. Когда на странице есть маскирующий слой, текстовое содержимое текстовой области не может быть замаскировано.
  2. В системе ios измените текстовое содержимое в текстовой области или вводе.Если вы измените его в тексте, курсор перейдет в конец.
  3. В системе ios текстовая область добавит отступ, и мы не можем удалить этот отступ, независимо от того, как мы используем элемент управления стилем.

Возьмем в качестве примера описание продукта. В нем используется тег ввода текста textarea. Ниже приведен фрагмент кода wxml:

 <view class="des-msg">
    <span>描述</span>
     <textarea bindinput="charactersDesc"
               class="{{desshow == 1 ? 'shows' : 'hidden'}} {{postData.devicesType == 2 ? 'iosText' : 'andText'}}"
               name="charactersDesc" 
               maxlength="1001"
               placeholder="描述一下商品吧"
               value="{{postData.charactersDesc}}" />
 </view>

Вопрос 1. Наше решение состоит в том, чтобы добавить класс с именем «показывает» при создании маскирующего слоя, чтобы метка скрывалась, а не исчезала. Если мы используем wx:if="{{}}" этот тег будет удален, если содержимое текстовой области не обновляется синхронно при изменении содержимого текстовой области, postData.charactersDesc генерируется перед содержимым этого тега генерируется.

Некоторые люди, написавшие это, должны подумать, почему мы не обновляем postData.charactersDesc синхронно во время модификации контента? Это из-за описания вопроса 2, который вызовет ошибку в системе ios. Поэтому мы скрываем, а не удаляем этот тег.

Вопрос 2: Нам нужно записать содержимое, введенное пользователем.Записанное содержимое хранится в characterDesc, а значение textarea также использует characterDesc, что вызывает эту ошибку, а событие, которое я связываю в textarea, — это bindinput вместо bindblur. вы думаете, что если вы используете bindblur, проблем не будет.

Идеал прекрасен, но реальность жестока.Система ios очень недружественная и доставила нам эту беду.При тестировании на реальной машине мы обнаружили, что текстовая область не теряла фокус при наборе текста на маленькой клавиатуре, а консоль .log не останавливал печать. Другими словами, каждый ввод будет запускать bindblur, и мы запутались, когда видим здесь. Что касается решения этой проблемы, я создал новый tempCharactersDesc в данных для хранения вашего измененного контента для других целей. Например, повторный рендеринг этикетки.

Вопрос 3: В этом вопросе мы можем выбирать разные классы только путем оценки модели по {{postData.devicesType == 2 ? 'iosText' : 'andText'}}.

//终端数据类型
wx.getSystemInfo({
    success: function(res) {
        let types = 0;
        if (res.system.split(' ')[0] == "iOS") {
            types = 2;
        }
        if (res.system.split(' ')[0] == "Android") {
            types = 1;
        }
        $that.setData({
            ['postData.devicesType']: types
        })
    }
})

2. Быстрые клики по странице могут повторяться
Video Playerзагрузить файл

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

Зарегистрируйте глобальную функцию через App() в app.js, а затем вызовите этот метод, если он включает запуск переходов, чтобы предотвратить повторные щелчки. Ниже приведен конкретный метод обработки.

globalLastTapTime:0,
preventMoreTap:function(e){
      var globaTime = this.globalLastTapTime;
      var time = e.timeStamp;
      if(Math.abs(time-globaTime) < 500 && globaTime != 0) {
        this.globalLastTapTime = time; 
        return true;
      } else{
        this.globalLastTapTime = time; 
        return false;
      }     
 }

Метод вызова:

let app = getApp();
Page({
   xxx:function(e){
     if(app.preventMoreTap(e)) {
        return ;
     }
     //跳转
   }
})

3. Страница заблокирована после многократного прыжка

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

Используя navigationTo для перехода по страницам, вы можете перейти только 10 раз, и на 11-й раз ответа не будет. На странице redirectTo при нажатии кнопки «Назад» в левом верхнем углу возвращаемая страница больше не является страницей публикации, а является другой страницей.

Прежде всего, давайте возьмем сценарий: когда мы используем navigationTo для перехода, переходим со страницы выпуска на страницу категории, выбираем категорию со страницы категории и возвращаемся на страницу выпуска, повторяем несколько раз подряд и находим, что страница не движется. Это связано с тем, что navigationTo выполняет переход назад и добавляет информацию о текущей странице к маршруту, затем переходит к странице и помещает пропущенную страницу в маршрут.В это время, используя функцию getCurrentPages(), мы можем получить массив с длина массива равна 2. Когда эта длина становится равной 5, страница не может быть перепрыгнута.

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

Если мы используем метод navigationBack, мы обнаружим, что мы не можем передавать параметры при переходе на страницу, но, очевидно, это хорошая идея. Нам нужно только решить проблему передачи параметров. Есть 3 способа передать параметры апплета. :

  1. Передайте URL-адрес через navigationTo или redirectTo
  2. Поместите измененные параметры в кеш, а затем обновите кеш. Этот метод явно не годится, в кеше будет несколько параметров.
  3. Получите объект массива через getCurrentPages(), чтобы получить последовательность предыдущей страницы, а затем используйте метод setData()

var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
    classId: id,
    classifyName2: className,
    classTags: classtags
})
wx.navigateBack()

Таким образом, третья идея передачи параметров является лучшей. Таким образом, реализуется переключение между двумя страницами, а нажатие кнопки возврата в левом верхнем углу также позволяет вернуться из категории на страницу выпуска продукта. Стоит отметить, что для использования третьего метода нам нужно определить pages[pages.length - 2];

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

Когда я написал эту проблему, мое настроение сложно. О картине этого куска Апплет предоставляет нам cooverimage, Previewimage, GetImageInfo позволяет вам выбрать изображение, предварительный просмотр изображения и иметь метод загрузки для загрузки. Во-первых, один пример загрузки изображения:

wx.chooseImage({
    count:1,
    sizeType : ['compressed'],
    success : function(res) {
            let tempFilePaths = res.tempFilePaths;
            wx.uploadFile({
            url : xxx,
            filePath:tempFilePaths[0] ,
            name: 'xzInputFile',
            formData: {
                'user': 'test'
            },
            success: obj.success,
            fail:obj.fail
        })
 
})

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

При пакетной загрузке мы думаем о загрузке изображений, которые необходимо загрузить, с помощью цикла for:

wx.chooseImage({
    count:12,
    sizeType : ['compressed'],
    success : function(res) {
            let tempFilePaths = res.tempFilePaths;
            for(let i = 0,index ; src = tempFilePaths[i]){
                wx.uploadFile({
                url : xxx,
                filePath:tempFilePaths[0] ,
                name: 'xxx',
                formData: {
                  'user': 'test'
                },
                success: obj.success,
                fail:obj.fail
                })
            }
           
 
})

Здесь писать проблематично, мы используем цикл for, uploadFile может обращаться к серверу в течение 0,001 мс, в результате получается цикл 5 раз, а фактическое количество обращений к серверу меньше 5 раз. Мы изменили этот код и добавили функцию задержки setTimeout, которая позволяет эффективно избегать быстрых запросов к серверу.

wx.chooseImage({
    count:12,
    sizeType : ['compressed'],
    success : function(res) {
            let tempFilePaths = res.tempFilePaths;
            for(let i = 0,index ; src = tempFilePaths[i]){
               setTimeout(function(){ 
                  wx.uploadFile({
                    url : xxx,
                    filePath:tempFilePaths[0] ,
                    name: 'xxx',
                    formData: {
                      'user': 'test'
                    },
                    success: obj.success,
                    fail:obj.fail
                 })
             },1000)
 
            }    
})

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

Ямы, с которыми мы сталкиваемся в наши дни

1. Всегда не удается загрузить изображение, и сеть заблокирована.

Когда все наши компоненты упакованы, превью не вызывает проблем, а картинка находится в пререлизе, у которого всегда есть проблемы с ошибкой загрузки, которая не добавляется в UPLOADFILE легитимное доменное имя без добавления легального доменного имени. . Если вы столкнулись с up или запросили данные, сначала проверьте наше доменное имя.

2. Данные диапазона не были загружены, и событие привязки средства выбора

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

<picker bindchange="bindPickerChange" value="{{index}}" range-key="logisticsName" range="{{logisticsArray}}" >
      <view class="picker">
        <label>快递公司:</label>
        <span>{{logisticsArray[index].logisticsName}}</span>
      </view>
</picker>

Свойство Range имеет тип Array или Object Array, а значение по умолчанию — []. Тип свойства Range-key — String , Когда диапазон представляет собой массив объектов, значение ключа в объекте задается ключом диапазона в качестве отображаемого содержимого селектора. Свойство Value имеет тип Number и значение по умолчанию равно 0. Значение Value указывает, какое число в диапазоне выбрано (в соответствии со значением индекса). bindchange используется для привязки событий к средству выбора.При изменении значения запускается событие изменения. event.detail = {значение: значение}.

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

data: {
    logisticsArray: [{logisticsCode: "", logisticsName: "请选择快递公司"}]
}
var _self = this;
wx.request({
  url: 'getLogisticsArray', //仅为示例,并非真实的接口地址
  data: {},
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    if (res.success) {
        var logisticsCompany = _self.data.logisticsArray.concat(res.data);
        _self.setData({
            logisticsArray: logisticsCompany
        })
    }
  }
})

Зоркий глаз, вы заметили какие-либо проблемы? Когда я подумал, что все идет по плану, одноклассники-испытатели сделали для меня скриншот следующей картинки. Когда данные интерфейса не возвращаются, перейдите к сборщику bindChange. Будет только один, пожалуйста, выберите курьерскую компанию, а других не будет. То есть пользовательская операция должна быть после возврата данных, что зависит от скорости возврата интерфейса.

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

Однако наглые пользователи этого не делают. Тогда я буду наглым один раз, я не показываю, что он делает. Как только вы определились со своей идеей, проанализируйте ее. Изначально был начальный логистический массив длиной 1. После возврата данных длина > 1. Изменение этого направления требует сотрудничества с файлом wxml.

<view wx:if = “{{logisticsArray.length > 1}}”>
    <picker></picker>
</view>
<view wx:else>
    <image src=”loading.png0”></image>
</view>

Это очень просто реализовать, в основном небольшое изменение инерционного мышления. Это не только решает проблему, но и гарантирует пользовательский опыт.

3. OnReachBottom и onPullDownRefresh выполняются одновременно
Video Playerзагрузить файл

На странице списка, когда выполняется onPullDownRefresh (обновление раскрывающегося списка), запускается onReachBottom (обработчик событий нижнего уровня страницы вверх), используемый для разбиения по страницам, что приводит к конфликту. И мы можем разрешить этот конфликт, добавив параметр

onReachBottom: function () {
    // 到页面底部时,请求列表
    if (!this.data.noMoreData && !this.data.isPullDown) {
        this.setData({
            currentPage: ++this.data.currentPage
        });
        this.getCollectList(this.data.currentPage);
    }
}

4. Проблема формата открытых данных компонентов

Строго говоря, это не дефект компонента, а дефект документации.

//错误的写法
<open-data type="groupName" open-gid="xxxxxx"></open-data>
//正确的写法
<open-data type="groupName" open-gid="xxxxxx"/>

5. Стиль трех белых точек по умолчанию не отображается, если потянуть вниз, чтобы обновить

Поскольку цвет фона страницы также белый, три точки не видны. Первый метод заключается в изменении цвета фона, но он сильно влияет на текущий стиль; второй метод заключается в добавлении «backgroundTextStyle»: «dark» в файл json, соответствующий странице, которая была добавлена ​​в вытягивающую строку. обновите страницу вниз, и вы увидите три белые точки.

Компоненты мини-программы, которые мы разработали

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

Компоненты Toast и ModalDailog

Методы showToast и showModalDialog, предоставляемые апплетом, не могут удовлетворить наши потребности из-за стиля оформления, и они поддерживают только отображение нескольких символов (в тесте на совместимость с ipx мы также обнаружили проблему белого фона текста), поэтому мы использовали свои собственные упакованные компоненты.

Компоненты создаются и используются следующим образом.

<template name="confirm">
  <view class="jdc-confirm">
    <view class="jdc-confirm__content">
      .
      .
      .
    </view>
  </view>
</template>

Ссылка этого шаблона

<import src="../template/template.wxml" />
<template is="toast" wx:if="{{toastShow}}" data="{{...toastData}}"></template>

Контроль в JS.

data: {
    confirmData: {
            visible: false,
            title: '',
            message: 'xxxx',               
            leftTxt: 'xxx',
            rightTxt: 'xxx'
        }
    },   
    submit:function(){
        ......
    },
    cancel:function(){
        ......
    }
}

Мы построили многоразовое всплывающее окно с помощью простого шаблона, решив тем самым проблему нативного всплывающего окна небольших программ.

Предлагайте альтернативы для бизнеса

Целевая страница — как вызвать приложение

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

Конечно, мы можем сказать бизнесу, что этот апплет не может быть реализован, до свидания! Но мы — технология, и поиск решений — конечная цель. Если вы не можете активировать приложение, вы также можете попытаться указать ссылку на приложение, верно? Но апплет не поддерживает внешние ссылки, поэтому наше решение — предоставить пользователю QR-код на целевой странице, предлагающий пользователю сохранить и отсканировать код для загрузки.

Это не умный и слишком рискованный план, но решение может вызвать целевую страницу APP.

Изучение будущего развития малых процедур

Некоторые идеи для будущего развития небольших программ
1. Интеграция средств разработки
В этой разработке мы постепенно использовали SASS, ESlint и другие инструменты для помощи в разработке.В будущем мы будем интегрировать больше инструментов, таких как использование css-sprite для интеграции изображений спрайтов для обработки изображений, чтобы повысить эффективность нашей разработки.
2. Реализуйте набор подходящих вам UI и компонентов
Мы извлечем более общие компоненты и методы, а также завершим пользовательский интерфейс и компоненты, подходящие для стиля нашей компании, которые будут применяться к большему количеству будущих мини-программ.
Конечно, еще многое предстоит сделать, мы будем продолжать усердно работать и находить более интересные реализации~

Окончательное впечатление

Цзя Хуйбинь: Только через опыт ты поймешь.

s s: Сто футов до вершины, сделайте еще один шаг, а затем «войти» было вложено 10 слоев.

Доброта подобна воде: практика приносит истинное знание.

fishsif: Я надеюсь, что инструменты разработчика WeChat будут становиться все лучше и лучше. .

hanyuxinting: Продолжайте петь по пути апплета~~

Студенты начальной школы: пишите и играют в небольшие программы. Исследуйте разные продукты.

Линь Руфэн: Боль и счастье, если ты дашь мне еще один шанс, мне станет лучше.

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

Соредактор группы разработки мини-программы JDC (Линь Жуфэн, ханьюсиньтин, фишиф, Шаншан Руошуй, ученики начальной школы, с.с., Цзя Хуйбинь).