Компоненты мини-программ WeChat
предисловие
Когда раньше я занимался разработкой небольших программ, то большей головной болью для разработки были заказные компоненты.В то время официальная документация по этому аспекту состояла всего из нескольких предложений, и это был всего лишь мазок, так что было действительно очень и очень больно записывать! !
К счастью, библиотека апплета WeChat стартовала с 1.6.3, а официалы внесли относительно большие изменения в кастомные компоненты.Во-первых, явное ощущение, что документы более полные, чем раньше, и есть леса! (Мини-документация по программе), теперь апплет поддерживает сжатое компонентное программирование, которое может абстрагировать функциональные модули на странице в настраиваемые компоненты для повторного использования на разных страницах, улучшить читаемость вашего собственного кода и снизить стоимость обслуживания вашего собственного кода!
Эта статья научит вас, как реализовывать пользовательские компоненты в небольших программах, не торопитесь~
Реализация
Чтобы сделать пользовательский компонент, мы сначала ставим перед собой небольшую цель.Например, мы реализуем компонент всплывающего окна в WEUI в апплете.Основной рендеринг выглядит следующим образом.
Step1
Мы инициализируем небольшую программу (в данном примере базовый репозиторий 1.7), удаляем образец кода внутри и создаем новыйcomponentsПапка используется для хранения компонентов, которые мы будем использовать в нашей будущей разработке.Сегодня наша цель - реализовать компонент пули.Поэтому мы находимся вcomponentsсоздать новый компонентDialogпапка для хранения наших всплывающих компонентов, вDialogЩелкните правой кнопкой мыши НовыйComponentи назван какdialogПосле этого соответствующийjson wxml wxss js4, которые являются частью пользовательского компонента, структура вашего проекта должна выглядеть так:
Step2
Работа по инициализации компонента готова, и следующим шагом является соответствующая конфигурация компонента.Во-первых, нам нужно объявить пользовательский компонент, то естьdialog.jsonсерединаcomponentполе установлено наtrue:
{
"component": true, // 自定义组件声明
"usingComponents": {} // 可选项，用于引用别的组件
}
Во-вторых, нам нужноdialog.wxmlЗапишите шаблон всплывающего компонента в файл, вdialog.wxssВ файл добавлены стили компонента всплывающего окна, способ их написания аналогичен способу написания страницы, не буду вдаваться в подробности, просто вставлю код~
dialog.wxmlФайлы следующие:
<!--components/Dialog/dialog.wxml-->
<view class='wx_dialog_container' hidden="{{!isShow}}">
<view class='wx-mask'></view>
<view class='wx-dialog'>
<view class='wx-dialog-title'>{{ title }}</view>
<view class='wx-dialog-content'>{{ content }}</view>
<view class='wx-dialog-footer'>
<view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
<view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
</view>
</view>
</view>
dialog.wxssФайлы следующие:
/* components/Dialog/dialog.wxss */
.wx-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
position: fixed;
z-index: 5000;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.wx-dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.wx-dialog-content{
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.wx-dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.wx-dialog-footer::before{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
step3
Структура и стиль компонентов все есть, чего еще не хватает, да, еще чего-то не хватаетjs, Острые одноклассники, возможно, обнаружили, что мы находимся вdialog.wxmlВ файле будет что-то вроде{{ isShow }},{{ title }}Такие переменные шаблона также определяют_cancelEventа также_confirmEventДва метода, конкретная реализация находится вdialog.jsсередина.
dialog.jsЭто конструктор пользовательского компонента, который используется в апплетеComponentСоздан конструктор, вызовComponentКонструктор можно использовать для указания свойств, данных, методов и т. д. пользовательских компонентов.официальная документация
Ниже я объясню использование некоторых свойств в конструкторе с помощью комментариев к коду:
// components/Dialog/dialog.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
// 弹窗标题
title: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个
},
// 弹窗内容
content :{
type : String ,
value : '弹窗内容'
},
// 弹窗取消按钮文字
cancelText :{
type : String ,
value : '取消'
},
// 弹窗确认按钮文字
confirmText :{
type : String ,
value : '确定'
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
// 弹窗显示控制
isShow:false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/*
* 公有方法
*/
//隐藏弹框
hideDialog(){
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showDialog(){
this.setData({
isShow: !this.data.isShow
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent(){
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent(){
//触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
step4
К настоящему времени вы должны были завершить большую часть пользовательского всплывающего компонента, но вы не заметили никаких изменений после сохранения, потому что нам все еще нужноindex.wxmlВнесите его в файл!
Сначала вам нужноindex.jsonИмпортировать компоненты в:
{
"usingComponents": {
"dialog": "/components/Dialog/dialog"
}
}
Тогда мыindex.wxmlВведите его и добавьте некоторые из наших пользовательских значений, как показано ниже.
<!--index.wxml-->
<view class="container">
<dialog id='dialog'
title='我是标题'
content='恭喜你，学会了小程序组件'
cancelText='知道了'
confirm='谢谢你'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent">
</dialog>
<button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>
Что ж, остался еще последний шаг,index.jsКонфигурация, да это тоже очень просто, я просто копирую и вставляю
//index.js
//获取应用实例
const app = getApp()
Page({
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//获得dialog组件
this.dialog = this.selectComponent("#dialog");
},
showDialog(){
this.dialog.showDialog();
},
//取消事件
_cancelEvent(){
console.log('你点击了取消');
this.dialog.hideDialog();
},
//确认事件
_confirmEvent(){
console.log('你点击了确定');
this.dialog.hideDialog();
}
})
Ну вот! Готово!
step5
Давайте проверим это и попробуем:
После нажатия кнопки появится следующий эффект:
Если вы нажмете кнопку Отмена или ОК, мы настроим всплывающее окно на закрытие в событии и распечатаем соответствующую информацию.Что делать после нажатия, зависит от вас, я могу только помочь вам здесь~
Суммировать
Теперь вы в основном освоили навыки разработки пользовательских компонентов в апплете. Как насчет этого? Это здорово? Вы должны поставить себе лайк и позвонить. Вообще говоря, после запуска пользовательских компонентов в мини-программах стало намного удобнее, а для тех, у кого нет возможности получить, поторопиться и научиться, а в дальнейшем использовать компонентную разработку, это будет не так неудобно, приходите. на~
Конкретный код, который я разместил дляgithubвверх, добро пожаловатьissue~