слухи
Вчера был первый рабочий день, да, это был первый день. В этом году у компании много праздников. Я провел одиннадцать долгих дней без (тянь) беспокойства (бу) без (чжи) беспокойства (чи). Выйдя на работу, я обнаружил, что у меня получилосьпостпраздничный синдром, это серьезное заболевание? Ну, я думаю, это займет неделю, чтобы зажить.
Поэтому программисты, находящиеся в отпуске и на досуге, должны испытывать глубокое чувство вины, за что? Чтобы не заболеть, для чего?
До первого месяца года все в году.Я желаю всем счастливого нового года и желаю всем счастливой старости.
Через некоторое время давайте начнем текст и скажем что-нибудь полезное.
концепция
Апплет — это приложение, которое можно использовать без загрузки и установки, оно реализует мечту о «применимости», и пользователи могут открывать приложение, проводя пальцем по экрану или выполняя поиск.
Его можно понимать как набор приложений, вложенных в WeChat.В отличие от нативных приложений, его не нужно загружать, и это небольшое и легкое приложение.
Подготовка перед разработкой
1,Зарегистрировать аккаунт2,Скачать инструменты разработчика, скачать1.02.1801081Эта версия, последняя версия имеет баги, отладчик при компиляцииWxmlОкно будет пустымpageэтикетка без содержания внутри. Копирование в редакторе также иногда не удается.
3. После регистрации авторизуйтесьПубличная платформа микроканала, найдите в настройках параметры разработки, сохраните appID, он понадобится вам позже при разработке
быстрый старт
1. На данный момент инструменты и идентификаторы доступны, и тогда мы начнем наше путешествие по кодированию. Откройте инструмент разработчика, отсканируйте код для входа в систему, выберите проект апплета, щелкните значок плюса в правом нижнем углу, создайте новый проект, выберите каталог проекта, заполните идентификатор приложения, имя проекта и нажмите «ОК» после написания. .
2. После подтверждения, после открытия по умолчанию, я обнаружил, что какой-то код был создан для нас, о коде мы поговорим позже.
Страница пустая.После открытия отладчика обнаруживается, что на странице есть ошибка следующего вида
Щелкните Подробности в правом верхнем углу, измените конфигурацию, измените базовую библиотеку отладки на 1.9.1, а затем измените不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书Проверьте это, иначе наш запрос должен бытьhttpsда
3. В данный момент в консоли не сообщается об ошибке, страница выглядит следующим образом, нажимаем кнопку, мы видим авторизацию WeChat, нажимаем Разрешить, на странице отобразится наш аватар и никнейм
Структура проекта
Мы в основном смотрим наapp.js,app.json,app.wxssтри файла иpagesвнутри папкиwxml
1,app.jsВ качестве входа апплета в нем есть экземпляр приложения.Каждый апплет имеет только один экземпляр приложения.После запуска апплета запускается функция onLaunch для получения информации о пользователе.
2,app.jsonэто вся глобальная конфигурация апплета,pagesполе для размещения пути ко всем страницам,windowПоле определяет верхний цвет фона и цвет текста всех страниц.Для более подробной настройки, пожалуйста,Нажмите здесь👇
3.app.wxssФайл является общим стилем страницы, поддерживаются только некоторые селекторы CSS.
4.wxmlнаш HTML-файл, часто используемые тегиview,textподожди, это не имеет значенияdiv,span,pКласс меток, мы привыкли называть их компонентами
концепт дизайна
Апплет можно понимать как структуру mvvm, которая разделена на логический уровень и уровень представления.Логический уровень обрабатывает данные и отправляет их на уровень представления, а также принимает обратную связь о событиях от уровня представления.
// pages/test/index.js
Page({
data:{ // 页面的初始数据
text: 'hello world'
},
onLoad(){
console.log('hello')
},
change(){
this.setData({
text:'hello'
})
}
})
использоватьPageФункция для регистрации страницы, получающей параметр Object.
Здесь мы используемonLoadЧтобы контролировать загрузку страницы и определить функцию изменения
И используйте функцию setData, чтобы изменить значение текста
При изменении данных данных необходимо вызвать функцию setData для внесения изменений
// pages/test/index.wxml
<view>{{text}}</view> // 显示hello world
<button bindtap="change">点击更改上面文字</button> // 显示hello
Мы добавили событие клика в компонент кнопки и вызвали функцию изменения.Нажмите 👇 здесь
Параметры передачи события
Иногда нам нужно передать некоторые параметры, когда нам нужно вызвать событие Как передать апплет? К сожалению, апплет нельзя передать напрямую, как в js, часто приходится привязывать переданные данные к элементу события
// index.wxml
<button data-test="哈哈" bindtap="change">点击我</button>
использоватьe.currentTarget.datasetчтобы получить значение
// index.js
change(e){
e.currentTarget.dataset.test // 哈哈
}
Расширение функции setData
1. Измените вложенные многоуровневые данные, Если это жестко закодированный параметр, вы можете использовать кавычки, чтобы заключить параметр
this.setData({
'text.msg': 'hello'
})
Что делать, если значение передано? Очень просто использовать ключ данных с[]скобка
// index.wxml
<button bindtap="change" data-key="text.msg">点击我</button>
// index.js
change(e){
var key = e.currentTarget.dataset.key
this.setData({
key: 'hello' // 数据不会更改
// [key]: 'hello' // 数据会更改
})
}
маршрутизация
Вся маршрутизация страниц в апплете управляется фреймворком.
мы можем использоватьgetCurrnetPagesФункция получает экземпляр текущего стека страниц, возвращает массив, последний элемент — текущая страница
Апплет определяет пять API для навигации и прыжков. Вот два наиболее часто используемых. Подробности см.Нажмите 👇 здесь
1,wx.navigateToСохранить текущую страницу, перейти на страницу в приложении, использоватьwx.navigateBackможно вернуться на исходную страницу
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
2,wx.redirectToЗакрыть текущую страницу и перейти на страницу в приложении
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
Как нам нужно получить параметры вышеуказанной полосы перехода API на странице?
// text.js
Page({
data:{
... // 页面数据
},
onLoad(options){
console.log(options.text) // 121212 获取上个页面带过来的值
}
})
фильтр данных фильтр
если вы использовалиvue,angularрамка, да|Символ трубы точно не чужой.Он используется для конвертации наших данных.Есть ли в апплете фильтр,но этого на самом деле нет.
Но в настоящее время есть два способа добиться фильтрации.
1. При получении данных они изменяются напрямую, что аккуратно и элегантно. 2. Используйте wxs, которые мы представим в конце
WXS
WXS — это набор языков сценариев для небольших программ.Во-первых, это отличный от js язык.Во-вторых, операционная среда и js также изолированы.Wxs не может вызывать функции в js-файлах, а также не может вызывать API небольших программ, в основном используется для улучшения wxml.
Wxs не может использовать синтаксис es6, это не js 😷
Далее давайте реализуем простой фильтр с помощью wxs.
1. Сначала создаемfilter.wxsфайл и напишите следующее
// filter.wxs
var Filter = {
getSatusStr: function(num){
var str = '';
switch (num) {
case 0:
string = '我是0的状态'
break;
case 1:
string = '我是1的状态'
break;
default:
string = '我是默认的状态'
break;
}
return str
}
}
module.exports = {
status: Filter.getSatusStr
}
Используйте index.wxml на том же уровне
<wxs module="filter" src="./filter.wxs"></wxs>
<view wx:for="{{list}}">
<view>{{filter.status(item.status)}}</view>
</view>
Суммировать:
1. КаждыйwxsТеги имеют атрибут модуля
1,wxsможно написать вwxmlвнутри тега wxs и.wxsв файле
2,wxsПредставить другиеwxsфайл, вы можете использовать функцию require для принятия относительных путей
3. Вwxmlиспользовать внешние в тегахwxsфайл, атрибут src является относительным путем
tip
1. Пишите с помощью sasswxssфайл, созданный в каталогеindex.scssфайл, выполняемый в текущем каталогеsass --watch index.scss:index.wxss --style expanded
2,wcssВ файле нельзя использовать локальные изображения, используйте base64, онлайн-изображения илиimage
3. Измените фон страницы, аналогично настройке тела в css, вы можете напрямую установить страницу
4. Не работайте напрямуюthis.data, используйте функцию this.setData, помните, помните