быстрая разработка юни-приложения

uni-app
быстрая разработка юни-приложения

первоначальное намерение

Недавно компания собирается разработать апплет для электронной коммерции. Предыдущий mpvue был остановлен и больше не выбирается. Неинтересно быть нативным. Поскольку это вечеринка Vue, команда выбрала uni-app для проверки воды. и использовал его больше недели.Ощущение использования все еще в порядке. Если вы знаете vue, это просто безмозглая разработка.Прочитав эту статью, вы можете начать прямо.

Загрузка подпакета небольшой программы:Связь

Основной принцип реализации:Связь

Uni-App Runtime:

Логический уровень и уровень представления разделены, и связь на стороне, отличной от H5, скомпрометирована.

Когда uni-приложение работает на стороне, отличной от H5,"С точки зрения архитектуры он разделен на две части: логический уровень и уровень представления.". Слой логики отвечает за выполнение бизнес-логики, то есть запуск js-кода, а слой представления отвечает за отрисовку страницы.

Хотя разработчики пишут js и css на странице vue, на самом деле они уже разделены во время компиляции.

Подробный логический слой

Логический уровень выполняется на"В автономном jscore", это не зависит от нативного webview, так что с одной стороны это"Нет проблем с совместимостью браузера", он может запускать код es6 на Android 4.4, с другой стороны, он не может запускать специфичные для браузера js API, такие как window, document, navigator и localstorage.

❝

Механизм js на стороне приложения и апплета uni-app фактически дополняет набор API-интерфейсов JS, обычно используемых на мобильных телефонах в jscore, таких как сканирование кода.

❞

Просмотр сведений о слое

Обычно: h5 и платформы апплетов, а также app-vue, уровень просмотра — webview. Уровень представления app-nvue — это собственное представление, преобразованное на основе weex.

У js uni-app в принципе нет проблем с совместимостью с разными мобильными телефонами (поскольку js движок идет с ним), а css слоя представления будет иметь мобильные браузеры на app-vue."css проблемы с совместимостью". Итак, в сценарии app-vue"Старайтесь не использовать слишком новый синтаксис css", если только вы не планируете поддерживать недорогие машины.

Конечно есть плюсы и минусыПосмотреть детали

создание проекта

два пути

1. Через визуальный интерфейс HBuilderX

Это очень просто использовать из коробки, нет необходимости настраивать nodejs.

После загрузки IDE нажмите «Файл» -> «Создать» -> «Проект» на панели инструментов, выберите шаблон, который вам нравится, и все готово (рекомендуется hello uni-app).

2. Через командную строку vue-cli(Рекомендуется vue-игроками)

Он поддерживается vuecli3.0+, поэтому его необходимо сначала установить.npm install -g @vue/cli  Затем = "Создайте проект:  vue create -p dcloudio/uni-preset-vue my-project

Поставляется с различными сценариями, шоу не хорошо! Таким образом, вы можете устанавливать всевозможные препроцессоры css, сторонние плагины и т. д., которые вы хотите, и все, кто играет в проекты Vue, это понимают.image.png

О поддержке NPM

В проекте cli по умолчанию уже есть package.json. Проект, созданный HBuilderX, не имеет его по умолчанию и должен быть создан с помощью команды инициализации.

О конфигурации страницы

Поместите его так же, как апплет: pages.json

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
  }]
}

спецификация разработки

Для достижения совместимости с несколькими терминалами всесторонне учитываются такие факторы, как скорость компиляции и производительность.uni-appСогласованы следующие спецификации разработки:

  • Метка компонента близка к спецификации апплета (например, базовый вид, текст, изображение) для получения подробной информации.спецификация компонента универсального приложения
  • Возможности интерфейса (JS API) близки к спецификации апплета WeChat, но должны иметь префиксwxзаменитьuni, видетьспецификация интерфейса uni-app
  • "Привязка данных и обработка событий одинаковыVue.jsТехнические характеристики", дополняя жизненный цикл Приложения и страницы
  • Для совместимости с многотерминальной операцией рекомендуется использовать гибкий макет для разработки.

Описание пути к ресурсу

  • @Абсолютный путь и относительный путь в начале будут проверяться правилами преобразования base64.

Введение статических ресурсов в шаблоны 

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

импорт файла js 

/ 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

css вводит статические ресурсы 

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

страница

getCurrentPages()Функция используется для получения экземпляра текущего стека страниц, который задается в порядке стека в виде массива, первый элемент — домашняя страница, а последний элемент — текущая страница. **Лучше распечатать и посмотреть необходимую информацию const pages = **getCurrentPages()

измерительное устройство

uni-appОбщие поддерживаемые единицы CSS включают px, rpx

  • "px"то есть пиксели экрана
  • "rpx — отзывчивый px", динамическая единица, которая адаптируется к ширине экрана. Исходя из ширины экрана 750, 750rpx — это именно ширина экрана. Когда экран становится шире, фактический эффект отображения rpx будет пропорционально увеличен.

Жизненный цикл

ПодробностиСвязь

onLoad Контролировать загрузку страницы, в основном через это, чтобы получить параметры страницыonLoad(option)}{},Ссылаться наПример
onShow Отображение страницы монитора. Запускается каждый раз, когда страница появляется на экране, включая возврат из подчиненной точки страницы для отображения текущей страницы.
onReady Прослушайте завершение первоначального рендеринга страницы. Обратите внимание, что если скорость рендеринга высокая, она будет запущена до того, как страница войдет в анимацию.
onHide Скрытие страницы монитора
onUnload Отслеживание выгрузки страницы

Информационный бюллетень глобальной страницы

Связь

Инициировать глобальное пользовательское событие

uni.$emit(eventName,OBJECT)Дополнительные параметры передаются обратному вызову слушателя. Каштан:uni.$emit('update',{msg:'页面更新'})

Слушайте глобальные пользовательские события

uni.$on(eventName,callback)События могут быть запущены с помощью uni.$emit, и функция обратного вызова получит все дополнительные параметры, переданные в функцию запуска события.

uni.$on('update',function(data){
  console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

"Меры предосторожности"

  • uni.$emit、 uni.$on 、 uni.$once 、uni.$offИнициированные события"Глобальный уровень приложения для любого компонента, страницы, nvue, vue и т. д."
  • При использовании обратите внимание на своевременное уничтожение обработчика событий, например, на странице onLoaduni.$onЗарегистрируйте слушателя внутри onUnloaduni.$offУдалить, или одноразовое событие, использовать напрямуюuni.$onceмонитор

стиль

При использовании компонента uni-app иногда изменение стиля внутреннего компонента недопустимо, вам необходимо использовать/deep/ .xxx { }вступить в силу.

общий режим страницы 

<template>
  <view class="container">  
  
 <view class="user-section">
  <image class="bg" src="/static/user-bg.jpg"></image>
 </view>

 <view class="info-box">
  <text class="username">{{userInfo.nickname || '游客'}}</text>
 </view>
    
  </view>
</template>

// 基本上和vue一摸一样
<script>
import { getMyInfo } from '@/api/my.js'
import { mapState } from 'vuex';
import mixins_share from '@/mixins/share.js'
export default {
  mixins: [mixins_share],
  data() {
    return {
      userInfo: {},
      vipTheme: {
   
      },
    };
  },
  computed: {
    ...mapState(['accessToken'])
  },
  onLoad(option) {
    this.nickName = option.nickName
  },
  onShow() {

  },
  methods: {
    scroll: function(e) {
      console.log(e);
    },
    goOrderList() {
      uni.navigateTo({
        url: '/pages/orderList/list'
      })
    }
  }
};
</script>

// 使用 css插件需要安装
<style lang="scss" scoped>
.mine {
  min-height: 100vh;
  background-color: #f5f5f5;
  .mine-header {
   }
 }
 </style>

Меры предосторожности:

  • Жизненный цикл страницы отдает приоритет использованию набора апплетов,onLoad(option) {}получить параметры,onShow() {}отображается страница.

метод перехода на страницу

Сохранить текущую страницу и перейти на страницу

использоватьuni.navigateBackВы можете вернуться на исходную страницу.

/在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

Примечание: перейти к"tabBar"Страницы можно использовать только"switchTab"Прыгать

Закройте текущую страницу и перейдите на страницу в приложении.

uni.redirectTo(OBJECT)

Перейдите на страницу tabBar и закройте все остальные страницы без tabBar.

uni.switchTab(OBJECT)

Закрыть текущую страницу и вернуться на предыдущую страницу или многоуровневую страницу

uni.navigateBack(OBJECT)доступныйgetCurrentPages()Получите текущий стек страниц и решите, сколько слоев нужно вернуть.

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

Хотите узнать больше? В этот момент я официально начну

кеш данных

Для синхронизации следует +Sync, например:uni.setStorageSync

Данные хранятся в локальном кеше (асинхронный интерфейс)

uni.setStorage(OBJECT)В указанном ключе содержимое, соответствующее исходному ключу, будет перезаписано.

uni.setStorage({
    key: 'storage_key',
    data: JSON.stringify(data), // 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
    success: function () {
        console.log('success');
    }
});

Получить содержимое, соответствующее указанному ключу, асинхронно из локального кеша 

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

Асинхронно удалить указанный ключ 

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

Очистите локальный кэш данных.

uni.clearStorage()

Уведомление:

Хранилище uni-app реализовано по-разному на разных концах:

  • Сторона H5 — это localStorage, и браузер ограничивает размер до 5 МБ, что является концепцией кеша и может быть очищено.
  • Сторона приложения является родной plus.storage, без ограничений по размеру, без кеша, но постоянно
  • У каждого апплета есть собственный API-интерфейс хранилища, а жизненный цикл хранения данных соответствует самому апплету, то есть, если пользователь не удалит его активно или не будет автоматически очищен через определенный период времени, данные всегда доступны.
  • Максимальная длина данных, которую можно сохранить с помощью одного ключа программы WeChat Mini, составляет 1 МБ, а верхний предел хранения всех данных составляет 10 МБ.
  • После преобразования одного фрагмента данных в апплете Alipay в строку максимальная длина строки составляет 200*1024. Для одного и того же пользователя Alipay общий лимит кеша для одного и того же апплета составляет 10 МБ.
  • В документах апплета Baidu, ByteDance не указаны ограничения по размеру

Хотите узнать больше? В этот момент я официально начну

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

Инициируйте сетевой запрос:Введение на официальном сайте 

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});
  • Рекомендуется контролировать объем данных одного сетевого запроса, чтобы он не превышал 50 КБ (относится только к данным json, исключая изображения).Избыточные данные должны быть получены на страницах для улучшения работы приложения.

Загрузить файл (изображение)

uni.uploadFile(OBJECT)

по мере прохождения страницыuni.chooseImageПосле того, как интерфейс получит путь к временному файлу локального ресурса,"Вы можете загружать локальные ресурсы на указанный сервер через этот интерфейс". Кроме того, выберите и загрузите неизображения и видеофайлы для справки:спросите. Когда cloud.net.can/article/355….

uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        uni.uploadFile({
            url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
            }
        });
    }
});

Манипуляции с медиафайламиВведение на официальном сайте

Общие операции интерфейсаВведение на официальном сайте

Другие вспомогательные функцииВведение на официальном сайте

В чем разница между созданием проекта с помощью cli и созданием проекта с помощью визуального интерфейса HBuilderX

Различия компиляторов

  • cliСозданный проект, компилятор устанавливается под проект. И не будет следовать обновлению HBuilderX. Чтобы обновить компилятор, выполнитеnpm update.
  • Проект, созданный визуальным интерфейсом HBuilderX, компилятор находится в каталоге плагинов в каталоге установки HBuilderX, и компилятор будет автоматически обновлен при обновлении HBuilderX.
  • уже использованcliЕсли вы хотите продолжить использование созданного проекта в HBuilderX, вы можете перетащить проект в HBuilderX."Обратите внимание, что если весь проект перетаскивается в HBuilderX, при компиляции используется компилятор проекта. Если каталог src перетаскивается в HBuilderX, берется компилятор из каталога плагинов в каталоге установки HBuilderX.".
  • cliЕсли вы хотите установить less, scss, ts и другие компиляторы, вам нужно вручную установить npm самостоятельно. Недопустима установка в интерфейсе управления плагинами HBuilderX, который работает только с проектом, созданным HBuilderX.

Эпилог

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

  • Если вы знакомы с React и не понимаете Vue.js, рекомендуется Taro;
  • Если вы знакомы с Vue.js, рекомендуется использовать uni-app;
  • Если у вас уже есть код H5, вы просто хотите увеличить платформу апплета WeChat и не предъявляете высоких требований к производительности, вы можете рассмотреть kbone;
  • Если ваш бизнес включает в себя несколько целей, более рекомендуется использовать uni-app;
  • Если вы хотите быстро запустить свой бизнес с помощью бессерверного решения, рекомендуется использовать uni-app.
❝

Этот эпилог взят из рассказа большого парня по соседству: Автор: CHB Ссылка:nuggets.capable/post/684490…

❞

Сначала здесь, и больше обеспокоен поздним обновлением медленно ~

журнал проблем

1. Описание требования: страница апплета является общей с параметром u=userid.Когда другие откроют ее, она впервые перейдет к onLaunch, чтобы получить параметры и сохранить их. Если userid, предоставленный другим человеком, отличается, когда onLaunch в это время не оставлен, как получить параметры?

Решение: миксин в main.js"onLoad"

Vue.mixin({
  onLoad(options){
  // 获取到参数 操作 
  }
}

2. Глобально добавить функцию совместного использования, чтобы каждую страницу можно было совместно использовать в характерном режиме."решение:"

Vue.mixin({
  onShareAppMessage(e) {
    const merchant = this.$store.getters.merchant
    return {
      title: merchant.subName,
      path: `/pages/tabBar/vhome${'?refId='+this.$store.getters.userInfo.uid}`,
      imageUrl: merchant.posterImg
    }
  }
})

В этой статье используетсяmdniceнабор текста

Категории