// class 构建一个类
class Home{
    // 类的构造函数
  constructor () {

  }

    // 自定义的类内部方法
  getBannerData () {
      ...
  }

}
//外部想要使用这个类就需要向export抛出这个类
export {Home};

// 1.首先引入这个类 home-mode.js这个是我的类文件名
import {Home} from 'home-model.js';
// 2.实例化 home-model 的home类
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  创建utils 新疆base基类文件
// 2. 新建 config.js 用来储存公共数据或配置信息

// 3. 引入配置类
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
    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>
    <!-- 使用模版和定义一样只是吧name改为is就可以了 -->
    <!-- data给模版传递数据 -->
    <!-- 做一个对象传递过去使用起来会方便一点，方法名自定义 -->
    <!-- key为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-开头后面自定义名字 -->
      <!-- 没有为什么微信规定的反正就这么干 -->
      <swiper-item data-id="{{item.key_word}}" bindtap="onProductsItemTap">
        .....
      </swiper-item>
    </block>
  </swiper>

Page({
  /**
   * banner点击事件
   * 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({

  /**
   * 生命周期函数--监听页面加载
   * 就是在跳转后的页面js文件中， onload 里面获取
   * options是自带的常量
   */
  onLoad: function (options) {
    // 传的是命名什么就.什么
    var id = options.id;
    console.log(id)
  }
})

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 动态设置导航栏
    wx.setNavigationBarTitle({
      title: this.data.name
    })
  }

/**
   * 页面拉到底部
   */
  onReachBottom: function () {
    
  }