руководство по вводу в единое приложение

uni-app

использовать сейчасuni-appВсе больше и больше людей приходят развиваться. Много ли студентов готовы войти в яму?uni-app, но не можете начать? Слишком много контента в документе, не знаете, как его прочитать? Если у вас есть этот вопрос, то я возьму вас в яму с нуляuni-app.

Если эта статья не впустит васuni-app, тогда вы можете перейти на MOOC и посмотреть мой видеоурок, который также является относительно простым вступительным видео.uni-app Быстрый старт за 5 часовСодержание не очень глубокое, это самое основное содержание, желание помочь всем.

Краткое введение в уни-приложение

что такое уни-приложение

  1. uni-appэто использованиеVue.jsДля разработки интерфейсной среды для кроссплатформенных приложений разработчики пишут набор кода, который можно скомпилировать вiOS,Android,H5, мини-программы и другие платформы.Для получения подробной информации щелкните официальную документацию uni-app.
  2. uni-appОн имеет сильное конкурентное преимущество по 6 ключевым показателям, таким как количество кросс-эндов, масштабируемость, производительность, окружающая среда, стоимость обучения и стоимость разработки:
  • Больше кросс-эндов
  • Неограниченные возможности платформы
  • Лучшая производительность
  • Окружающая экология богата
  • низкая стоимость обучения
  • низкая стоимость разработки

Предварительные условия для использования uni-app

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

Если у вас родной апплет сvueЕсли вы этого не сделали, я предлагаю вам потратить некоторое время и взглянуть на их официальную документацию. вернуться к учебеuni-app.

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

Для улучшения кросс-энд разработки см.uni-appЕдиная спецификация:

  • Компоненты страницы, которым мы должны следоватьСпецификация однофайлового компонента Vue (SFC)
  • Теги компонентов близки к спецификации апплета WeChat.
  • Возможности интерфейса (JS API) близки к спецификации апплета WeChat.
  • Привязка данных и обработка событий закрытьVue.jsСпецификация, дополняющая жизненный цикл приложения и страницы
  • Для совместимости с многотерминальной операцией рекомендуется использовать гибкий макет для разработки.

Инструменты разработки

использовать официальныйHBuilderXредактор
Метод визуализации относительно прост,HBuilderXВстроенная связанная среда, из коробки, нет необходимости настраивать node.нажмите, чтобы скачать

Использование Vue.js

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

Мини-программы (WeChat, Alipay, Baidu, Toutiao)

Если мы хотим разрабатывать мини-программы, нам нужно знать спецификации мини-программ для разных платформ. После понимания спецификации нам будет относительно просто разрабатывать.uni-appПомогите нам поставить апплет на разные платформыAPIПочти все encapsulate , просто замените префикс наuniПросто приведите пример:

Мы называем апплет WeChatrequestпросить

wx.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';
    }
});

Мы используемuni-appизrequestпросить

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';
    }
});

Вы заметили что-то другое? поэтому в дополнение к префиксуwxзаменитьuniКроме этого, остальные почти такие же, как исходная спецификация.uni-appЭто позволит максимально сгладить различия между различными платформами мини-программы.

Приложение (ios, андроид)

uni-appсуществуетAppТерминал может не только использовать подавляющее большинство связанных с апплетамиAPI, вы также можете использовать5+APIЭто хорошее дополнение к некоторым функциям, которые не были реализованы в апплете.Связанное Чтение

в то же время,AppвстроенныйweexДвижок, который обеспечивает собственные возможности рендеринга. Повысьте производительность вашего приложения.Связанное Чтение

H5

h5в основном обычныйvueРазвитие не имеет значения, единственная оговорка в том, что некоторыеAPIне может бытьh5Используйте в документе, обратите внимание на описание различий платформ, отмеченное в документе.

Как добиться кросс-энда

Несмотря на то, что это кросс-энд, должны быть случаи, когда он не поддерживается, например, при обнаружении некоторых специфичных для платформыAPIчто делать ?

Не волнуйтесь, эти вопросыuni-appВсе продумано для вас, то есть использовать条件编译.

Условная компиляция

Нажмите на меня, чтобы получить подробную документациюсуществуетCязык, через#ifdef,#ifndefпуть, дляwindows,macразныеosскомпилировать другой кодuni-appСсылаясь на эту идею, дляuni-appПредусмотрены средства условной компиляции, а настройка платформы элегантно завершена в одном проекте.

Условная компиляция реализована с помощью комментариев, а комментарии пишутся по-разному в разных грамматиках.jsиспользовать// 注释,cssиспользовать/* 注释 */,vue/nvueиспользуется в шаблоне<!-- 注释 -->.

Например:

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif


// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif


<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->


/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

/*  #ifdef  APP-PLUS  */
/*  只在 app 中生效  */
.header {
	color:blue
}
<!--  #endif  */

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

  • НетH5Вы не можете использовать собственные объекты браузера, такие какdocument,window,localstorage,cookieд., не использоватьjqueryи т. д. полагаются на структуру этих объектов браузера. Потому что каждое быстрое приложение апплета не поддерживает эти объекты. Отсутствие этих встроенных в браузер объектов не влияет на развитие бизнеса.uniкоторый предоставилapiДостаточно, чтобы заняться бизнесом.
  • uni-appизtagс апплетомtag,иHTMLизtagразные, напримерdivизменить наview,spanизменить наtext,aизменить наnavigator.
Спасибо за просмотр, если вы считаете, что здесь смотреть бесполезно, то вы, наверное, зря потратили 2 минуты времени, извините, приношу вам свои извинения.

ты дляuni-appЕсли у вас есть какие-либо вопросы, пожалуйста, прокомментируйте и ответьте.Если я увижу это, я отвечу вам как можно скорее, спасибо.

Советы: пожалуйста, относитесь к этому рационально, вам это может не нравиться, но не распыляйте. Вопросы можно обсуждать, но к троллям - нулевая терпимость.

Категории