Обзор

Относительно простой всплывающий виджет WeChat, собранный мной, предназначен в основном для того, чтобы научить вас использовать и понимать виджеты WeChat.Поскольку апплет WeChat очень мало знакомит с компонентами, поэтому я поделюсь с вами своим пониманием.

Введение

Я полагаю, что каждый столкнется с ситуацией, когда некая функция используется несколько раз при разработке небольшой программы, например всплывающего окна. В это время первое, о чем все думают, это компонентная разработка, которая заключается в том, чтобы инкапсулировать всплывающее окно в компонент, а затем вызывать его везде, где он используется.Да, кажется, что у всех есть идеи, но как это реализовать . Может быть, вы пойдете на официальные документы, но официальные документы WeChat не очень понятны, поэтому очень больно писать. Сегодня буду со всеми разрабатывать компонент WeChat, сидите, старый водитель поедет.

Две конкретные реализации

Сначала мы реализуем простой компонент всплывающего окна, детали которого следующие:

1. Создайте новую папку компонентов для хранения наших компонентов, в которой хранятся компоненты, которые мы используем, всплывающее окно «Что мы собираемся делать сегодня», создайте всплывающее окно новой папки для хранения наших шаблонов компонентов, щелкните правой кнопкой мыши и выберите «Новый компонент». компонент будет сгенерирован автоматически Шаблон wxss, wxml, json, js, как показано на рисунке

2. Мы можем написать некоторые стили и макеты компонентов, которые аналогичны написанию страниц, поэтому я не буду говорить больше, просто выложу код напрямую:

popup.wxml

<view class="wx-popup" hidden="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
      <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
    </view>
  </view>
</view>

popup.wxss

/* component/popup.wxss */
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.wx-popup-title {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid red;
}

.wx-popup-con {
  margin: 60rpx 10rpx;
  text-align: center;
}

.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.wx-popup-btn text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 88rpx;
  border: 2rpx solid #ccc;
  border-radius: 88rpx;
}

Стиль и макет и макет написаны, следующее, что нужно представить, это

Конструктор компонентов

Конструктор компонента можно использовать для определения компонентов.При вызове конструктора компонента можно указать свойства, данные и методы компонента.

Tips:

• ComponentКомпоненты, созданные конструктором, также могут использоваться как страницы.
• использоватьthis.dataВнутренние данные и значения свойств можно получить, но не изменять их напрямую, используйтеsetDataИсправлять.
• Функции жизненного цикла нельзя передавать в методах компонентаthisдоступ к.
• Имена атрибутов не должны начинаться с данных, т. е. не называть их.dataXyzЭта форма, поскольку в WXMLdata-xyz=""будет обрабатываться как набор данных узла, а не как свойство компонента.
• Когда компонент определен и используется, ни имя свойства компонента, ни поле данных не могут конфликтовать друг с другом (хотя они находятся в разных разделах определения).

После того, как компонент введен, это самый важный js.

popup.js:

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 弹窗取消按钮文字
    btn_no: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    btn_ok: {
      type: String,
      value: '确定'
    } 
  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _error () {
      //触发取消回调
      this.triggerEvent("error")
    },
    _success () {
      //触发成功回调
      this.triggerEvent("success");
    }
  }
})

Выше будет использоватьсяtriggerEvent Давайте представим это:

Когда пользовательские компоненты инициируют события, вам нужно использоватьtriggerEventметод, указав имя события, объект сведений и параметры события.

Варианты запуска событий включают в себя:

Теперь компонент всплывающего окна инкапсулирован, и следующим шагом будет его вызов.

При вызове необходимо создать новый файл json на вызывающей странице.В файле json необходимо настроить использование компонентов для ссылки на компонент.Смотрите код:

index.json

{
  "usingComponents": {
    "popup": "/component/popup/popup"
  }
}

Теперь в основном завершено, все, что вам нужно, это процитировать его на главной странице.

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button bindtap="showPopup"> 点我 </button>
  </view>
  <popup id='popup' 
      title='小组件' 
      content='学会了吗' 
      btn_no='没有' 
      btn_ok='学会了'
      bind:error="_error"  
      bind:success="_success">
  </popup>
</view>

Настройка index.js плюс событие клика

//index.js
//获取应用实例
const app = getApp()

Page({
  onReady: function () {
    //获得popup组件
    this.popup = this.selectComponent("#popup");
  },

  showPopup() {
    this.popup.showPopup();
  },

  //取消事件
  _error() {
    console.log('你点击了取消');
    this.popup.hidePopup();
  },
  //确认事件
  _success() {
    console.log('你点击了确定');
    this.popup.hidePopup();
  }
})

Компонент всплывающего окна завершен, посмотрите на эффект: