Проект vue быстро выводит апплет WeChat, Alipay и Baidu.

Байду WeChat Vue.js Alipay Умный апплет
Проект vue быстро выводит апплет WeChat, Alipay и Baidu.

На прошлой неделе был официально выпущен Megalo@0.2.0, который оптимизировал производительность обновления данных и поддерживал программы Baidu Smart Mini. Я был очень взволнован. Это «может» быть первым в сообществе, поддерживающим мини-программы с тремя терминалами одновременно. фреймворк апплета time.vue. Теперь давайте попробуем его эффект.

следуйте документации

официальная документацияПервая частьБыстрый старт, следуйте по следу и постройте мегапроект.

Установить

$ npm install -g @megalo/cli

Построить

$ megalo megalo-yanxuan-demo

Пакет

Возьмите апплет WeChat в качестве входа

$ npm run dev:wechat

На данный момент завершен полный проект мегало, и затем мы начинаем передавать исходный код

перенос предметов weex

Я использовал демонстрационный проект Weex,yanxuan-weex-demo, основанный на переносе, процесс переноса включает в себя удаление и преобразование многих специфичных для weex API.

сетевой запрос

Если взять сетевые запросы в качестве примера, weex — это используемый поток.

let stream = weex.requireModule('stream');
export default {
    methods: {
        GET (api, callback) {
            return stream.fetch({
                method: 'GET',
                type: 'json',
                url: api
            }, callback)
        }
    }
}

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

export default {
    methods: {
        GET (api, callback) {
            let { platform } = this.$mp || {},
                request = ()=>{}
            switch(platform) {
                case 'wechat':
                    request = wx && wx.request
                break;
                case 'alipay':
                    request = my && my.httpRequest
                break;
                case 'swan':
                    request = swan && swan.request
                break;
                default:
                break;
            }
            request && request({
                url: api,
                success: callback
            })
        }
    }
}

Подобно трансформации тостов, сообщений и других компонентов.

компоненты

из-за недели в<recycle-list>,<loading>,<refresh>,<scroller>и другие компоненты не существуют в компоненте апплета, поэтому есть три решения

  1. Настройте компонент vue с тем же именем
  2. Найдите компоненты, доступные для замены апплетом
  3. Если это не сработает, просто сократите спрос.

такие как Weex<slider>компонент, вы можете использовать апплет<swiper>Замена, к счастью, WeChat, Alipay и апплет Baidu все поддерживают.

css

Ширина контейнера Weex по умолчанию (область просмотра) составляет 750 пикселей, а апплет основан на 750 rpx. Поэтому напрямую конвертируйте требуемые px в rpx.

Кроме того, я сам реализовал wpx из 1 пикселя, просто заменил его на px.

Выполните трехтерминальный эффект

Наконец, посмотрите на эффект трансформации. Одновременное выполнение трех терминалов

Эффект лучше, чем ожидалось, без слишком большого количества ошибок адаптации

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

которые можно передать

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

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

Вы можете заменить его.

Ссылаться на

«Официальная документация Мегало» "megalo -- Программное решение NetEase Koala Mini" "Мегало гитхаб"

Стартер:zwwill/blog#29

Автор: Киба

Перепечатка с указанием источника

Категории