wechat mini program wiki
1.0.0
Ведущее китайское приложение для обмена сообщениями WeChat представило нечто весьма радикальное: мини-программы. Встроенные приложения, которые не требуют загрузки и установки. Откройте, используйте, поделитесь, готово!
Ведутся большие споры – и много кликбейтов – о том, насколько практичны эти приложения... Действительно, инфраструктура, предоставляемая разработчикам, находится только на начальной стадии, все еще ограничена и, честно говоря, немного разочаровывает. Тем не менее, Tencent вкладывает беспрецедентные ресурсы в внедрение этого канала, наращивая темп и открывая возможности для первопроходцев. Мы считаем, что эти хакеры смогут добиться быстрой победы, если осмелятся попробовать.
Есть идеи, какие сервисы вы хотели бы внедрить в WeChat как можно скорее? У вас есть базовые знания Javascript и вы хотите поэкспериментировать с этой платформой? Заблудились в переводе документа Google? Нужен небольшой импульс, чтобы расшифровать, что возможно, а что нет? Здравствуйте и добро пожаловать.
Найти свой путь через официальный документ непросто. На самом деле, чтобы что-то сделать, требуется множество проб и ошибок, некоторые исследования открытого исходного кода и множество предположений. Ты бился головой о стену. Мы поняли.
Наша миссия — помогать творческим предпринимателям создавать отличные технологические продукты. Мы поможем вам сделать маленькие шаги.
Содержимое ниже не является переводом документации и наверняка быстро устареет. Это просто наш вклад, чтобы помочь любому начать работу и быстро создать крутую мини-программу WeChat. Сделайте это сейчас.
Вы работаете над мини-программой? Свяжитесь с нами, если хотите поделиться своей работой, познакомиться с нашей командой, попросить о помощи!
Если вы хотите внести свой вклад, вы можете отправить запрос на включение здесь или оставить нам заявку на shanghai(at)lewagon.com!
Эта оригинальная пьеса была написана выпускниками Le Wagon: Адрианом Пелегри (партия № 30) при поддержке Тибо Женайте (Водитель Китая) и Стефана Дельгадо (партия № 61).
Процесс регистрации действительно сложен, особенно если у вас нет опыта работы в фантастическом китайском административном мире. Процесс проверки WeChat будет долгим. Сохраняйте спокойствие.
От регистрации мини-программы WeChat до выпуска разработки вам в основном необходимо пройти следующие шаги:
Вот список материалов, которые вам понадобятся для регистрации мини-программы как компании:
Мы рекомендуем вам следовать этому подробному руководству на английском языке о том, как зарегистрироваться и создать проект мини-программы: статья Medium или проверить официальную документацию WeChat (последнее обновление: 02.08.2017).
IDE (интегрированная среда разработки) — это набор инструментов программирования для написания приложения. Он состоит из редактора кода, компилятора и отладчика, доступ к которым осуществляется через единый графический интерфейс пользователя.
Загрузите WeChat IDE здесь: Mac, Windows 64, Windows 32.
Вот краткое руководство, которое поможет освоить WeChat IDE и извлечь из нее максимум пользы.
Редактор кода с деревом ваших файлов сбоку и симулятором слева, который отображает предварительный просмотр вашего приложения. 
Вот полный список кнопок для выполнения задач, когда вы находитесь в разработке:
1. Профиль: нажмите на него, чтобы выйти из IDE. 2. Редактирование кода. 3. Отладка/проверка: см. ниже. 4. Информация о проекте: см. ниже. 5. Компилятор: может быть полезен для компиляции приложения, когда автоматическое обновление представления не работает. 
6. Значение сцены 7. Кэш 8. Завершение работы: закройте проект, в котором вы находитесь, и перейдите к другому. 9. Скрыть симулятор. 10. Устройства. Предоставляет список устройств для проверки отклика мини-программы. 11. Вы можете работать: Wi-Fi, 4G, 3G, 2G. 12. Скрыть древовидность. 13. Управляйте файлами: ищите, добавляйте и удаляйте папку или файл.
Отладчик/Инспектор: Этот инструмент является важной частью IDE, он похож на старый добрый Chrome DevTools . 
1. Верхняя панель. Сеть. Эта панель предназначена для отладки проблем с запросами и сокетами или производительности загрузки страниц. Хранилище: позволяет получить доступ ко всем данным, которые есть в вашем кеше. AppData: используется для отображения текущих данных проекта. Вы можете напрямую редактировать данные на панели и просматривать их. Wxml: позволяет вам проверять и редактировать на лету каждый элемент вашей страницы. Датчик: вы можете моделировать местоположение и работу мобильного устройства для отладки определения гравитации.
2. Панель «Источники» На панели «Источники» отображаются файлы сценариев текущего проекта.
3. Консоль Консоль сообщит вам, какие ошибки есть в вашем коде, записывая диагностическую информацию и взаимодействуя с javascript на странице, как ваш console.log(), который вы разместили, и многое другое.
Информация о проекте: на этой странице вы найдете текущие сведения о проекте, такие как ваш AppID, информацию о каталоге и многое другое. Нажав на опцию предварительного просмотра, вы сможете протестировать мини-программу прямо на своем телефоне после сканирования QR-кода.
Примечание. Пока вы тестируете мини-программу на своем телефоне, вы можете включить инструмент отладчика прямо на своем устройстве.
В этом разделе будет представлена структура «быстрого старта», предоставляемого WeChat (шаблон), и основы, необходимые для соблюдения этой структуры.
Загрузите WeChat faststart.zip.
Быстрый старт древовидности:
.
├── app.js
├── app.json
├── app.wxss
├── страниц
│ ├── индекс
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── бревна
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└── утилиты
└── util.js
На индексной странице этого шаблона отображается страница приветствия с информацией текущего профиля пользователя. Щелчок по вашему аватару приведет к перенаправлению на новую страницу с текущими журналами мини-программы.
Мини-программы WeChat начинаются с файлов «приложений» (см. скриншот ниже). Эти файлы являются корневым каталогом мини-программы и входом в вашу мини-программу. (Вот официальная документация WeChat).
app.js — это код сценария, глобальная логика вашей мини-программы. Вы можете настраивать функции жизненного цикла вашего MP и управлять ими, объявлять глобальные переменные или вызывать API.
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json — это глобальная конфигурация всей мини-программы. Вы можете настроить путь к странице MP (мини-программы), стиль окна MP, установить тайм-аут сети и отладить конфигурацию.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}Примечание. Комментарии в файле app.json не допускаются.
app.wxss — это глобальная таблица стилей мини-программы. Здесь вам следует объявить общие правила стиля.
Две страницы краткого руководства WeChat:
Папка Pages — это место, где вы храните или создаете страницы мини-программ. Каждая создаваемая вами страница должна содержать два файла:
Вы можете добавить еще два файла на каждую создаваемую вами страницу:
Файл .json для конфигурации страницы.
Файл .wxss для таблицы стилей вашего интерфейса.
Правило: каждая страница вашей мини-программы может состоять из файлов четырех разных расширений (js; json; wxml; wxss), но должна иметь одно и то же имя.
Дополнительная информация: новая страница всегда будет содержать файл .js и минимум файл .wxml . Расширение файла .json используется на тот случай, если вы хотите переопределить конфигурацию окна на этой конкретной странице. Добавьте .wxss , если хотите добавить таблицу стилей на свою страницу.
Давайте посмотрим, что происходит на каждой странице проекта быстрого запуска.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )Комментарии к фрагменту:
Page() для сбора информации о пользователе.Page() и устанавливает data: для динамической привязки данных к представлению.Tapped перенаправляет текущего пользователя на страницу его журналов.onLoad получает информацию о пользователе и обновляет данные userinfo . Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )Комментарии к фрагменту:
formatTime .Page() и устанавливает data: .onLoad извлекает текущие журналы пользователей из кеша wx.getStorageSync('logs') . Затем визуализируйте журналы в formatTime , который предоставляется требованием util.js. Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}Примечание:
В Utils хранятся импортированные библиотеки , которые могут вам понадобиться где-то еще (в нашем примере в log.js требуется util.js). В приведенном выше фрагменте кода функция formatTime определена в util.js для правильного отображения даты ваших журналов.
На данный момент вы заметили тот факт, что на каждой странице будет два слоя:
Логический уровень (.js): обрабатывает данные и отправляет их на уровень представления, получая при этом события, инициированные с уровня представления.
Уровень представления (.wxml/.wxss): отображает данные, обработанные логическим уровнем, в представлении, одновременно отправляя события слоя представления на логический уровень.
Мы можем разбить жизненный цикл мини-программы на два цикла: цикл приложения и цикл страницы. Жизненный цикл App() — это начальная и конечная точки мини-программы, тогда как жизненный цикл Page() активируется, когда пользователи просматривают мини-программу.
Функция App() используется для регистрации мини-программы. Он принимает объект в качестве параметра, который определяет функции жизненного цикла MP.
Комментарии:
onLaunch и инициализирует МП.onShow .onHide срабатывает, когда текущий пользователь выходит из мини-программы. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) Платформа WeChat предлагает глобальную функцию getApp() , которая является экземпляром App() .
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data getApp() может быть полезна по той простой причине, что вы не можете определить функцию App() внутри функции Page() . Чтобы получить доступ к экземпляру приложения, вы должны вызвать функцию getApp() .
Функция Page() используется для регистрации страницы. В качестве параметра он принимает объект, задающий исходные данные для страницы, функции жизненного цикла, обработчик событий и так далее.
Комментарии:
onLoad .onShow .onShow вызывает onReady для визуализации представления.onShow напрямую отображает представление.onHide срабатывает, когда мини-программа переходит на другую страницу.onUnload вызывается, когда вы покидаете страницу с помощью wx.redirectTo() и wx.navigateBack() . Или когда текущая страница перезапускается, wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
Когда жизненный цикл App() завершен, страница загружается путем первого вызова onLoad и вызывает его только один раз.
Когда мини-программа выполняется из фона (жизненный цикл приложения) на передний план (жизненный цикл страницы), она сначала вызывает функцию App() onShow , а затем вызывает функцию Page() onShow при переключении на передний план.
Рекомендации WeChat:
App() нельзя использовать повторно, ее следует зарегистрировать один раз в app.js.onLaunch , если страница getCurrentPages() еще не создана.getApp() вы можете получить экземпляр App(), но функции жизненного цикла не пытаются вызывать функции App() . Настройка вашей мини-программы проста и предназначена для экономии вашего времени и разочарований при необходимости настройки.
WeChat делит конфигурацию app.json на пять частей:
В этой части мы разберем этот полный пример установки app.json .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} Роль pages в app.json — определить все маршруты вашей мини-программы. Конфигурация этого элемента является обязательной и принимает массив строк . Каждая подпапка и файлы в папке родительских страниц соответствуют пути маршрутизации .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} Совет: Каждый раз, когда вы добавляете путь маршрута к "pages" , IDE автоматически создает папку и файлы, соответствующие только что созданному вами пути.
Платформа WeChat предлагает несколько логик маршрутизации:
Описание режима маршрутизации:
Инициализация: после запуска мини-программы первая страница загружается с помощью функций onLoad и onShow .
Открыть новую страницу: при открытии новой страницы текущая страница скрывается и происходит переход на другую с помощью wx.navigateTo . За сценой первая страница будет скрыта вызовом функции onHide и перейдет через другую страницу, вызвав onLoad и onShow . 
Перенаправление страницы: закройте текущую страницу, вызвав onUnload , и перейдите на страницу в приложении, используя wx.redirectTo , который вызывает функции onLoad и onShow .
Возврат страницы: onUnload текущая страница вызывает функцию onLoad , а затем отображает целевую страницу, вызывая onShow .
Перезагрузка, wx.reLaunch : закрывает все страницы и перезагружает текущую страницу. * Не работает на некоторых устройствах Android.
Переключение вкладок, wx.switchTab : переход с одной страницы tabBar на другую и закрытие или скрытие всех остальных страниц, не являющихся tabBar, с помощью onUnload, onHide и onShow . Откройте для себя все возможные сценарии переключения вкладок.
Переключение вкладок, ограничения навигации:
Рекомендации WeChat:
navigateTo , redirectTo может открыть только страницу без tabBar. - switchTab может открывать и отображать только страницу tabBar. - reLaunch можно использовать для каждой страницы. getCurrentPages() : эта функция используется для получения экземпляра текущего стека страниц. Он задается в виде массива в порядке стека страниц. Первый элемент массива — это первая страница, а последний элемент — текущая страница.
tabBar как следует из названия, — это элемент, который настраивает верхнюю или нижнюю панель вкладок. tabBar — это массив , вмещающий минимум 2 и максимум 5 вкладок.
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}Индикация атрибутов:
При использовании ключа list tabBar требуется объект в каждом элементе массива.
Значения атрибутов List следующие:
Описание атрибутов TabBar: 
Рекомендации WeChat:
tabBar значки не будут отображаться.tabBar составляет 40 КБ, 81 пикселей * 81 пикселей.Пункт «Окно» используется для установки заголовка мини-программы и общего стиля окна.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}Описание атрибутов окна:
| Атрибут | Тип | Значение по умолчанию | Описание |
|---|---|---|---|
| навигацияБарФонЦвет | Шестнадцатеричный цвет | #000000 | Цвет фона панели навигации |
| стиль навигацииBarTextStyle | Нить | white | Цвет заголовка панели навигации, black или white |
| навигацияBarTitleText | Нить | Название панели навигации | |
| стиль навигации | Нить | default | Стиль панели навигации: default или custom . Используйте custom , чтобы настроить стиль панели навигации. |
| фонЦвет | Шестнадцатеричный цвет | #ffffff | Цвет фона приложения. Пример: цвет фона, который вы видите при обновлении, не влияет на цвет элементов <page> . |
| фонТекстСтиль | Нить | dark | Потяните, чтобы обновить стиль текста: dark или light |
| фонЦветВерх | Нить | #ffffff | Цвет фона верхней части окна. Поддерживается только на iOS |
| фонЦветНиз | Нить | #ffffff | Цвет фона нижней части окна. Поддерживается только на iOS |
| включитьPullDownОбновить | логическое значение | false | Включите или отключите pull для обновления всего приложения. |
| onReachBottomDistance | Число | 50 | Установите расстояние от нижней части страницы, на котором должен сработать обратный вызов onReachBottom() . |
| Ориентация страницы | Нить | portrait | Установите поддержку поворота экрана. Поддерживает auto , portrait и landscape . |
Ориентацию приложения по умолчанию можно настроить с помощью pageOrientation in window в файле конфигурации app.json . Этот атрибут поддерживает 3 значения:
auto , чтобы мини-программа могла работать как в портретном, так и в ландшафтном режимах.portrait , чтобы мини-программа отображалась только в портретном режиме.landscape , чтобы мини-программа отображалась только в альбомном режиме. "enablePullDownRefresh": true необходимо настроить в глобальном app.json , как указано выше, а затем вы можете вызвать onPullDownRefresh() на страницах мини-программ.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat предлагает возможность изменить заголовок верхней панели навигации на каждой странице.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )Сетевой тайм-аут может предоставляться в различных сетевых запросах. Вот ссылка на документацию WeChat, если вы хотите пойти дальше.
Вот ссылка на документацию WeChat.
WXML — это язык разметки WeChat, похожий на HTML. Он сочетает в себе базовую библиотеку компонентов и систему событий для создания динамических страниц.
Система событий WeChat ведет себя как классические события Javascript, которые обрабатывают логические ответы на уровень представления.
В таблице ниже перечислены существенные различия, с которыми вы столкнетесь при разработке между WXML/HTML:
Дальнейшие пояснения к <block> :
<block> не является компонентом , это всего лишь элемент упаковки , он не выполняет никакой рендеринг на странице и принимает только свойства управления .
Примечание. Все компоненты и атрибуты написаны строчными буквами.
Платформа мини-программ не позволяет разработчикам использовать DOM для управления элементами WXML. Вместо этого вы обновите слой представления (файл .wxml) с помощью метода привязки данных:
Чтобы соответствовать требованиям WeChat, атрибут data должен быть инициализирован в формате JSON в функции Page() . Метод привязки данных позволяет динамически обновлять данные на уровне представления.
Хорошей практикой является инициализация data в верхней части функции Page() .
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} Динамические data: которые передаются на уровень представления, берутся из атрибутов данных в соответствующей функции Page() .
Синтаксис привязки данных. Привязка данных использует синтаксис Mustache (двойные фигурные скобки) для переноса переменных. Этот синтаксис представляет собой анализ механизма шаблонов без логики. Короче говоря, это очень удобно и просто в использовании!
WeChat предлагает множество возможностей использования привязки данных. У вас есть возможность использовать привязку данных к атрибутам компонентов, свойствам, строковым операциям, арифметическим операциям, пути к данным и массиву.
Свойство wx:for control связывает массив из вашего логического уровня (файл .js), проходит через него и присваивает данные.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) Подобно <view wx:for> вы можете использовать <block wx:for> для рендеринга блока из нескольких строк . (См. блок в таблице WXML выше).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >Более подробную информацию о приведенном выше коде можно найти в этом репозитории Github.
Дополнительные ресурсы:
Подобно wx:for , wx:if используется для определения условного оператора и определения, следует ли отображать блок или нет.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) Если вы хотите отобразить более одного тега в блоке условных операторов, вы можете использовать <block wx:if> .
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > Покопайтесь дальше в документации wx:if WeChat.
Шаблоны позволяют определить фрагменты кода, которые вы хотите использовать несколько раз в разных файлах вашей мини-программы.
Элемент шаблона WXML имеет собственную область действия и может использовать только данные для передачи.
Во-первых, чтобы объявить шаблон, вам необходимо определить его имя.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> В дальнейшем, если вы захотите вызвать шаблон в том же файле, используйте атрибут is и имя шаблона в качестве значения для объявления требуемого шаблона. И не забудьте передать данные в шаблон с помощью атрибута data .
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) Чтобы объявить шаблон, уже определенный в новом файле, сначала необходимо его импортировать.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />Более подробную информацию о документации WeChat можно найти здесь.
Помимо функций инициализации данных и жизненного цикла, платформа позволяет определять функции обработки событий.
Элемент WXML (обработчик событий) запускает событие, а логический уровень связывает обработчик событий для получения объекта события в качестве параметра.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : эта функция обновляет данные внутри логического уровня, которые затем будут отправлены на уровень представления. Функция setData() получает объект в качестве параметра и обновляет значение ключа, используя this.data в качестве пути к данным.
Существует множество видов событий привязки, большинство компонентов имеют собственное определение события привязки.
События привязки компонентов:
bindsubmit для формы.bindinput для ввода.bindscroll для просмотра прокрутки. Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )Классические события привязки:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) Два общих используемых события привязки — bind+event_type и catch+event_type . Событие catch — это событие, предотвращающее всплытие событий.
Концепция всплывающего события: для людей, не использующих Javascript, всплывающее событие может быть определено, когда событие происходит в элементе, вложенном в другой элемент. И родительский узел, и вложенные элементы регистрируются как обработчик событий для этого конкретного события. Родительский узел вложенного элемента должен использовать catch+event_type , что предотвратит распространение события на элементы-предки.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )Чаще всего используется, когда вы вкладываете элементы и не хотите отображать родительский узел привязываемого элемента.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )Вот практические советы по совместному использованию мини-программ. WeChat открывает два способа поделиться мини-программой:
Возможность включить кнопку «Вперед» в раскрывающемся меню , которое появляется при нажатии в правом верхнем углу ... .
Создайте кнопку «Вперед» на странице вашей мини-программы. Это делает процесс обмена более удобным для пользователя.
В обоих вариантах фреймворк автоматически отправит карточку мини-программы со снимком экрана заголовка вашего MP.
Чтобы включить эту кнопку, нам нужно использовать функцию Page() называемую onShareAppMessage .
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,В этой функции вам необходимо определить заголовок , который будет отображаться в верхней части карточки пересылки, и текущий путь к странице . Если вы забудете добавить заголовок, WeChat добавит его по умолчанию (название вашей мини-программы).
Ограничение: Единственное, что вы можете определить в этом случае, — это событие onShareAppMessage . Кнопка «Вперед» будет создана самой платформой .
Эта функция позволяет разработчикам создавать на странице специальную кнопку «Вперед», используя свойство кнопки open-type и его значение 'share' .
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > В отличие от первого случая, нам нужно создать обработчик событий , который запускает функцию onShareAppMessage . Эта функция вызывает wx.showShareMenu и передает withShareTicket в качестве параметра.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) Примечание. В обоих вариантах используется функция Page() , что означает, что вы предоставляете общий доступ к конкретной странице, на которой объявляете эту функцию.
WeChat стремится создать дружественный , эффективный и последовательный пользовательский опыт. Для этого официальная команда дизайнеров WeChat предоставляет репозиторий WeUI. Эта базовая интерфейсная библиотека (WeUI) соответствует встроенному визуальному интерфейсу WeChat. WeUI можно понимать как интерфейсную библиотеку WeChat, похожую на Bootstrap . Он включает в себя большой набор компонентов, таких как кнопка, ячейка, диалоговое окно, прогресс, всплывающее уведомление, статья, таблица действий, значок и многое другое.
Полезные репозитории Github:
Загрузите репозиторий WeUI локально через npm :
npm install weui-wxss
Загруженный код содержит исходный код WeUI и образец мини-программы на основе WeUI.
Откроем образец мини-программы WeUI в WeChat IDE:
Импортируйте стиль WeUI в свой app.wxss , чтобы разрешить использование стиля WeUI в вашей мини-программе:
@import "style/weui.wxss" ;
Более подробную информацию о рекомендациях по проектированию WeChat вы можете найти здесь, в полной документации.
WXSS обладает почти всеми функциями CSS. Таблица стилей, определенная в app.wxss, представляет собой общие правила стиля, указанные на каждой странице. Таблица стилей, определенная на конкретной странице, является локальным стилем, который действует только на текущей странице и, таким образом, перезаписывает те же селекторы, которые используются в app.wxss . WXSS по сравнению с CSS имеет два основных отличия:
WXSS использует в качестве единицы измерения rpx (адаптивный пиксель). Это позволяет настраивать пиксели в соответствии с шириной экрана. Вы можете продолжать использовать классическую единицу px (только не так, как в WeChat). (1rpx = 0.5px ; 1px = 2rpx)
Чтобы импортировать исходящую таблицу стилей, используйте оператор @import , за которым следует относительный путь и ; в конце заявления.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;Платформа WeChat не поддерживает множество стандартных селекторов CSS , таких как каскадный селектор.
Поддерживаемые селекторы:
Рекомендация WeChat:
Фреймворк WeChat предоставляет разработчикам большой набор базовых компонентов, полный список компонентов находится здесь.
<navigator> — это ваша привязка в HTML. Он используется для ссылки с одной страницы на другую. Самый важный атрибут элемента навигатора — open-type .
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >Описание атрибутов навигатора:
Описание значений открытого типа:
Компонент выбора в документации WeChat разделен на три селектора: классический селектор , который используется по умолчанию, селектор времени и селектор даты .
Приведенный ниже вариант использования основан на средстве выбора даты, но логика остается той же для другого средства выбора.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )Атрибуты селектора даты:
Переключатель — это визуальный переключатель с двумя состояниями: включено и выключено.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )Переключить атрибуты:
Тост — это немодальный элемент, используемый для отображения кратких компонентов с автоматически истекающим сроком действия для информирования пользователей.
В приведенном ниже фрагменте кода мы имитируем отправку формы, чтобы показать, как работает и отображается всплывающее уведомление.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >В приведенном выше фрагменте кода мы создали динамическую кнопку для отправки формы . Кнопка анимируется индикатором загрузки при нажатии на нее.
Затем мы показываем всплывающее уведомление, используя API wx.showToast для информирования пользователей.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )Модальное окно позволяет накладывать небольшой элемент на страницу . Основное преимущество модальных окон заключается в том, что они позволяют избежать необходимости использования обычных всплывающих окон или перезагрузок страниц.
Существует пять ситуационных категорий, в которых обычно используются модальные блоки:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )Модальные параметры:
Компонент map — это собственный компонент, у него длинный список атрибутов, мы рассмотрим основные из них. Вот ссылка на документацию WeChat для более подробной информации.
список атрибутов map :
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >Обратитесь к разделу «Службы на основе местоположения» в вики, если вы хотите ознакомиться с услугами на основе местоположения, которые WeChat предлагает через API.
Рекомендации WeChat:
wx.getLocation необходимо указать type как gcj02 Целью этого раздела является объяснение различных шагов, которые необходимо выполнить , если вы хотите сохранить данные вашего приложения и получить данные из базы данных. Мы выбрали Leancloud.cn из-за простоты установки для начинающих.
Сначала немного контекста: пример ниже основан на мини-программе, предназначенной для сбора отзывов через простую форму. Эта мини-программа сохраняет данные, собранные на Leancloud.cn. Мы объясним, как получать и отображать данные, хранящиеся в БД. Чтобы проиллюстрировать этот второй раздел (извлечение данных), мы создали новую страницу, на которой отображаются все отзывы, хранящиеся в Leancloud.
Вот репозиторий Github проекта, использованного для создания этого руководства.
Характеристики:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >Когда структура формы создана, как указано выше, нам нужно создать событие , которое инициируется отправкой формы.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) Локальное хранилище: в bindFormSubmit мы присвоили вводимые пользователем данные локальным переменным с целью проверки возможности локального сбора вводимых пользователем данных формы.
Прежде чем мы начнем установку, если вы находитесь в стадии разработки, внесите в белый список свое доменное имя, установив последний флажок интерфейса проекта в вашей WeChat IDE. Для конкретных нужд отладки вы можете воспользоваться этим руководством по Leancloud.
Чтобы начать настройку Leancloud, сначала создайте учетную запись на Leancloud.
Теперь, когда вы готовы к установке и инициализации Leancloud в своей мини-программе, вы можете следовать их документации, которая позволит вам пройти двухэтапный процесс:
appId и appKey в ваш app.js. // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;Если вы заблудились, обратитесь к репозиторию проекта на Github.
Прежде всего создайте новую папку с именем model и добавьте в нее файл form.js Назовите свой файл в соответствии с типом объекта, который вы хотите сохранить, в данном случае формы. Этот шаг не является обязательным, но позволяет систематизировать ваши файлы.
Давайте создадим объект: в только что созданном файле form.js потребуется av-weapp-min.js , установленный в util.js , и назначим его константе AV . Затем создайте экземпляр объекта Form .
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; Теперь, когда вы создали экземпляр объекта Form , создайте объект формы для инкапсуляции данных на логическом уровне (здесь form.js) и перенаправьте пользователя после отправки формы.
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )Анализ фрагмента кода:
binFormSubmit мы добавили разрешения , которые позволяют LeanCloud читать и записывать через объект, который мы создали, и хотим сохранить.setTimeout , которая инкапсуляет данные в новый объект Form и перенаправляет пользователя при подаче формы. Примечание: setACL(acl) -это встроенное свойство LeanCloud.
До сих пор все сделано в вашей мини-программе, то, что еще предстоит сделать,-это проекция данных, собранных на вашей панели инструментов LeanCloud .
Form в этом экзамене.Проверьте его , чтобы быть уверенным, что собранные данные сохраняются в вашей панели инструментов LeanCloud.
Сначала позвольте мне напомнить вам фон этого раздела. Мы хотим отобразить на новой странице список обзоров, которые мы собрали и сохранились на LeanCloud . Я предполагаю, что вы следили за первым разделом учебника (если вы пропустили его, см. Выше).
Характеристики:
review .Итак, давайте создадим новую страницу обзора и кнопку, которая перенаправляет на страницу обзора . ( Совет: просто добавьте путь маршрута в ваш App.json , Framework создаст новую папку и файлы сама).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >Следующим шагом является извлечение данных, хранящихся на LeanCloud, и отображает их .
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > Выше мы создали блок рендеринга списка с использованием wx:for этого отображения каждый обзор и имя человека, который создает обзор.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )Код фрагмента отрывка:
AV -объект, который содержит хранимые данные.forms .В этом варианте использования мы только что видели, как хранить данные, которые мы собираем локально для LeanCloud и как получать данные, хранящиеся в LeanCloud.
Мы рекомендуем вам прочитать документацию LeanCloud или проверить мини-программу Leantodo, созданную LeanCloud, Github Repository.
Когда вы находитесь в производстве, вы должны настроить доменное имя LeanCloud на платформе WeChat. Следуйте этому учебнику LeanCloud.
Вся информация пользователя , к которой у вас есть доступ через wx.getUserInfo :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) WeChat "QuickStart" (WeChat BoilerPlate) дает вам функцию getUserInfo в файле app.js. Как следует из названия, эта функция предназначена для получения пользовательской информации . Давайте пройдемся через эту функцию шаг за шагом.
Общее описание:
getUserInfo имеет параметр CB , который также является функцией.If блок функции getUserInfo будет пройден, если userInfo из globalData не будет нулевым.userInfo - это null, функция getUserInfo вызывает интерфейс входа в систему. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) Первый случай, userInfo form globalData не является нулевой
Оператор IF Condition направлен на определение того, является ли аргумент CB , чтобы получить getUserInfo , является типом функции, и если это так, он пройдет userInfo .
Как они выясняют, является ли параметр CB функцией?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} Давайте пройдемся через эту функцию onLoad Index.js
onLoad вызывает функцию getUserInfo в экземпляре приложения .userInfo для текущей информации пользователя.userInfo обновлен в globalData в файле app.js.Второй случай, userInfo - это null
userInfo является null getUserInfo функция возвращает оператор else , который вызывает интерфейс входа в систему.getUserInfo вызывается и действует как блок if мы видели выше. Если текущий пользователь уже входит в систему, пользовательская информация назначается globalData через страницу index.js , которая вызывает функцию onLaod . И тогда применяется та же логика.
Мини-программы WeChat имеют механизм кэша в их API. Фактически, каждая мини-программа имеет свое собственное локальное хранилище кеша.
Напоминание: хранилище кеша используется для хранения данных, к которым мы хотим быстро получить доступ. Это сокращает время ожидания пользователей , поскольку запрос удовлетворен от локального кэша , который ближе к клиентам по сравнению с исходным сервером, используемым для запроса вашего DB.
Кэш -хранилище предлагает два вида методов хранения данных в кэше:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage Parameters как JSON, ключ для указания хранимой клавиши и данных, чтобы указать значение ключа для хранения.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync Syntax проще, параметры передаются напрямую. И может получить данные через входящую функцию обратного вызова.
WeChat предоставляет три основных действий на кеш:
wx.setStorage или wx.setStorageSync .wx.getStorage или wx.getStorageSync .wx.clearStorage или wx.clearStorageSync .wx.removeStorage или wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) Вы можете вызвать пользовательский интерфейс сканера клиентского кода , используя API wx.scanCode . Он дает прямой доступ к сканеру WeChat через кнопку CTA с целью сканирования QR -кода.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}WeChat API предоставляет полный набор услуг на основе местоположения:
wx.chooseLocation , чтобы выбрать местоположение, которое вы хотите отобразить.wx.getLocation , чтобы получить текущее местоположение пользователя.wx.openLocation , чтобы отобразить местоположение на их представлении карты .wx.createMapContext чтобы персонализировать вашу карту. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} Выше мы использовали wx.getLocation , чтобы получить текущую позицию пользователя, получая его широту и долготу.
wx.getLocation Дополнительную информацию: если пользователь покидает мини-программу, но отображается поверх своего чата мини-программа, вы можете продолжать вызовать wx.getLocation и поэтому постоянно получить местоположение пользователя.
Отобразите текущее местоположение пользователя на встроенной карте WeChat: вызов API wx.openLocation , позволяет открыть встроенную карту WeChat для отображения местоположения, которую вы получили, из функции listenerBtnGetLocation которую мы создали выше.
Примечание. Вызов API wx.openLocation , перенаправляет пользователя в новое окно карты.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}WeChat Image API предлагает четыре возможности:
wx.chooseImage , чтобы выбрать изображение из вашего альбома или камеры.wx.previewImage для предварительного просмотра изображения перед загрузкой в приложение.wx.getImageInfo для получения информации об изображении (высота, ширина, path, src).wx.saveImageToPhotosAlbum , чтобы сохранить изображение от мини-программы на ваш альбом. В приведенном ниже примере мы создаем функцию, называемую listenerBtnChooseImage , с целью вызовы пользователя альбома или камеры с помощью wx.chooseImage . Затем мы используем wx.getImageInfo для получения информации об изображениях.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )Теперь, когда у нас есть изображение на странице, давайте сохраним изображение от мини-программы в текущий пользовательский альбом, давно постукивая изображение.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )WeChat Network API предлагает общие файлы HTTPS, WebSocket, загрузку и загрузку.
wx.request чтобы сделать стандартный HTTPS -запрос.wx.uploadFile для загрузки файла на назначенный сервер.wx.downloadFile для загрузки файла с назначенного сервера. 
В приведенном ниже примере у нас есть одна функция и один обработчик событий: addNewPost и onPullDownRefresh соответственно, как говорится в их имени, вы сможете добавить новый пост и получить сообщения, используя вызов wx.request .
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )Теперь, когда мы опубликовали, давайте получим и отобразим его на слое представления. Ради простоты мы воспользуемся преимуществами Onpulldownrefresh для перезагрузки новых постов.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) На всех наших мини-программных путях мы столкнулись с вопросами и вопросами, мы хотим поделиться с вами. Если у вас были некоторые проблемы, с которыми вы хотите поделиться, обратитесь на нас.
WeChat позволяет только API, имеющий лицензию ICP, поэтому вы можете забыть об большинстве API, с которыми вы знакомы в западных странах.
Вот каталог API, доступных в Китае, проверьте его.
background-image: свойство Изображения не могут быть получены с помощью CSS background-image: url(../../images/banner.png); . Я знаю, что это ужасно, но мы должны с этим справиться.
Есть два способа обойти это разочарование:
Вы можете использовать изображение CSS background-image: но вы не можете использовать недальновидный путь , вы должны кодировать свое изображение в Base64, а затем передать его на background-image: url(base64 image); . Вот инструмент для кодирования изображений в Base64.
Или вы можете использовать теги <image> и обработать изображения с помощью атрибута <image> тега, как mode . WeChat имеет 13 режимов , 9 режим резки и 4 - режим масштабирования . Вот ссылка на документацию.
RPX означает отзывчивый пиксель , который является единицей мини-программ WeChat. Согласно официальному определению, rpx основан на адаптивной ширине экрана.
Фактически, rpx -блок основан на блоке rem , который означает «root em» . Почему не блок em ?
em единица относительно размер шрифта родителя , что вызывает проблему составления . Устройство rem относительно корневого элемента, который контерактирует проблему составления (обязанность размеров за шрифт).
Однако, чтобы вернуться к блоку rpx , преимущества RPX :
Вы работаете над мини-программой? Обратитесь к нам, если хотите поделиться своей работой, познакомиться с нашей командой, попросить о помощи!
Если вы хотите внести свой вклад, вы можете отправить запрос на привлечение здесь или дать нам крик на Shanghai (AT) Lewagon.com для предложений!
