Заметки

// class создаёт класс
class Home {
    // метод конструктора класса
  constructor () {

  }

    // пользовательский метод класса
  getBannerData () {
      ...
  }

}
// чтобы использовать этот класс во внешнем коде, нужно экспортировать его
export {Home};

// 1. сначала импортируем этот класс home-mode.js это имя моего файла класса
import {Home} from 'home-model.js';
// 2. создаём экземпляр класса home из home-model
var home = new Home();
// 3. вызываем
Page({
    onLoad: function () {
        // вызов метода
        home.getBannerData(() => {
            ....
        })
    }
})

// 1. импортируем класс
import {Base} from '../../utils/base.js'

// 2. наследуем класс
class Home extends Base {

  constructor () {
    // если есть конструктор, необходимо вызвать конструктор базового класса
    super();
  }

  // 3. вызов метода базового класса
  getBannerData() {
      // просто добавляем this перед именем метода
      this.request()
  }
}

export {Home};

// 1. utils/base.js создание нового файла base.js в utils
// 2. новый файл config.js для хранения общих данных или информации о конфигурации

// 3. импорт класса Config из config.js
import {Config} from 'config.js'

// 2. создание базового класса Base
class Base {
    // конструктор
  constructor() {
      // получение общей информации об URL из класса информации о конфигурации
    this.baseRequestUrl = Config.restUrl;
  }

  /**
   * Запрос инкапсулируется
   */
  request (params) {
    // объединение URL
    var url = this.baseRequestUrl + params.url;

    // 判断, если тип не передан, по умолчанию используется GET
    if (!params.type) {
      params.type = 'GET'
    }

    // вызов API WeChat
    wx.request({
      url: url,
      data: params.data,
      method: params.type,
      header: {
        'content-type':'application/json',
        'token': wx.getStorageSync('token')
      },
      success: res => {
        // функция определения, существует ли она, и вызов
        // обратный вызов функции возврата информации
        params.sCallback&&params.sCallback(res.data);
      },
      fail: err => {
        console.log(err);
      }
    })
  }
}

export {Base};

// шаблон
// добавить name для уникальности при вызове, на самом деле это не отличается от написания HTML
<template name="products">
    <view class="products-box">
        
    </view>
</template>

<!-- импортировать файл шаблона -->
<import src="../tpls/products/products-tpl.wxml" />

<view>
    <!-- использовать шаблон так же, как определение, просто измените имя на is -->
    <!-- передать данные в шаблон -->
    <!-- метод именования настраивается -->
    <!-- ключ products, значение productsArr -->
    <template is="products" data="{{products:productsArr}}"></template>
</view>

<swiper indicator-dots="true" autoplay="true" class="swiper">
    <block wx:for="{{bannerArr}}" wx:key="index">
      <!-- связывание событий, bindtap связывает событие, затем следует имя метода -->
      <!-- передача данных data- начинается с -->
      <!-- почему WeChat требует этого, в любом случае это делается таким образом -->
      <swiper-item data-id="{{item.key_word}}" bindtap="onProductsItemTap">
        .....
      </swiper-item>
    </block>
  </swiper>

Page({
  /**
   * событие клика баннера
   * event имеет встроенные переменные
   */
  onProductsItemTap: function (event) {
    // id хранится в event.currentTarget.dataset.id
    // все переданные данные находятся в event.currentTarget.dataset, данные передаются без data
    // здесь я сделал небольшую инкапсуляцию для повышения степени повторного использования и поместил её в базовый класс
    // getDataSet(event,key) {
    // return event.currentTarget.dataset[key];
    //}
    var id = home.getDataSet(event,"id");

    // вызвать интерфейс
    // url - это адрес страницы, которую вы хотите перейти
    // можно передать параметры на эту страницу через url
    wx.navigateTo({
      url: '../product/product?id=' + id,
    });
  }
})

Page({

  /**
   * жизненный цикл функции -- мониторинг загрузки страницы
   * это options является постоянной
   */
  onLoad: function (options) {
    // передаётся как имя, какое.что
    var id = options.id;
    console.log(id)
  }
})

/**
   * функция жизненного цикла -- мониторинг первого рендеринга страницы
   */
  onReady: function () {
    // динамически устанавливаем заголовок навигации
    wx.setNavigationBarTitle({
      title: this.data.name
    })
  }