Компоненты мини-программы WeChat и инкапсуляция функций, простое программирование компонентов
На основе инкапсуляции пользовательских компонентов WeChat и простого программирования компонентов. Для получения информации о пользовательских компонентах компонентов обратитесь к API компонентов.
Обратите внимание, что вам необходимо включить функцию преобразования ES6 в ES5 в инструментах разработчика WeChat. Используйте базовую мини-библиотеку выше версии 1.6.3
и обновите WeChat до последней версии.
Если вам нужен набор кодов для разработки апплета WeChat и апплета Alipay, то плагин mpapi может вам помочь (апплет WeChat и плагин, совместимый с API апплета Alipay)
Используйте инструменты разработчика WeChat, чтобы открыть каталог src
.
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents
. // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
}
<!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
Ниже показано простое использование компонента Tab
. Конкретные примеры см. в pages/weapp/tab
внутри проекта. Использование других типов компонентов в основном аналогично этому методу вызова.
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
}
<!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
// tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} )
Плавающее приглашение, компонент Toast, обычно используемый в мобильной разработке, отличается от showToast мини-программы.
title
delay
Время задержки автоматического отключения в миллисекундах, по умолчанию: 1500
hide
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
вкладка
list
active-index
, по умолчанию: 0
theme
, по умолчанию пустой, может быть передан в weapp-tab
или другие пользовательские стили. change
обратный вызов переключения, параметр event
, где event.detail.activeIndex
— текущий выбранный индекс. < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
Выбор города
region
change
обратный вызов переключения, параметр event
, где event.detail.region
— информация о выбранном регионе. < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />
Загрузить больше, без запроса данных, обычно используется со всплывающим списком данных
icon-type
Тип компонента значка апплета, по умолчанию: search
status
текущий статус, дополнительные значения: loading
, nomore
, empty
, данных пока нет, по умолчанию: loading
empty-txt
нет текста запроса данных. По умолчанию:暂无数据
loading-txt
текст запроса на загрузку, по умолчанию:正在加载
nomore-txt
больше не содержит текста подсказки, по умолчанию:没有更多数据了
< weapp-loader status =" {{status}} " />
Всплывающее меню с поддержкой до 12 направлений стрелок, соответствующее большинству сценариев.
list
page-selector
Селектор CSS для самого внешнего контейнера всей страницы, по умолчанию — .page
elem-id
позиционируется в соответствии с идентификатором элементаdir
, необязательные значения tl tc tr rt rc rb bl bc br lt lc lb
, соответственно представляющие 12 комбинированных направлений сверху, справа, снизу, слева, серединыtl
соответствует top-left
tc
соответствует top-center
tr
соответствует top-right
rt
соответствует right-top
rc
соответствует right-center
rb
соответствует right-bottom
bl
соответствует bottom-left
bc
соответствует bottom-center
br
соответствует bottom-right
lt
соответствует left-top
lc
соответствует left-center
lb
соответствует left-bottom
select
обратный вызов для каждого элемента, параметр event
, где event.detail.item
— текущий выбранный элементshow
обратный вызовhide
скрытый обратный вызов < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />
Лучшие советы
title
type
тип подсказки, success
, error
, warn
, по умолчанию: default
delay
Время задержки автоматического отключения в миллисекундах, по умолчанию: 1500
hide
< weapp-toptip type =" {{ type }} " title =" {{ title }} " />
Выбор календаря поддерживает скользящее переключение нескольких месяцев. Нажимайте влево и вправо, чтобы переключать месяцы и переключаться на сегодняшний день.
start-date
началаend-date
окончанияcurrent-date
по умолчанию датаshow
с самого начала, по умолчанию: false
current
по умолчанию отображает первый месяц. Месяц от начальной даты является первым месяцем. По умолчанию: 0
change
функцию обратного вызова выбранной даты, параметр event
, где event.detail.currentDate
— текущая выбранная дата. < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />
Пересылка и совместное использование страниц устраняют сложную настройку каждой страницы, что делает ее более простой и эффективной в использовании. Поддерживаются параметры передачи страниц.
title
url
По умолчанию используется адрес текущей страницы. import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ;
Определение типа, возврат Number
, String
, Boolean
, Array
, Object
, Function
и строк других типов.
value
— это любой параметр, который необходимо оценить import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Date
Разобрать объект в строку URL
urlObject
, объект, который нужно преобразовать в строковый параметр.unEncodeURI
не использует кодировку, encodeURIComponent
используется по умолчанию. import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24
Разберите строку URL-адреса в объект, а не используйте common.param
urlString
адрес, адрес с параметрами URLunDecodeURI
не использует декодирование и по умолчанию использует decodeURIComponent
. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;
Переход по страницам, оптимизированный для предотвращения быстрых щелчков для открытия двух страниц, поддерживает форму объекта для передачи параметров URL-адреса, соответствующих wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch мини-программы соответственно.
url
адрес страницыparams
import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ;
Используйте FontAwesome для значков шрифтов и WeUI для стилей компонентов CSS.
MIT, наслаждайтесь открытым исходным кодом.