1. 程式人生 > >小程式page的js中呼叫新的js類物件

小程式page的js中呼叫新的js類物件

在小程式開發工具中新建的page如下,並建立home-model類物件的js檔案

在home-model.js中的類大致結構如下,注意一下兩點

  1. 引入其他的js類使用import 關鍵字
  2. 要想讓其他物件可以使用這個類要用exprot關鍵字
import {Base} from '../../utils/base.js';

class Home extends Base{
    constructor(){
        super();
    }
};

export {Home};

要想在home.js中呼叫,實現呼叫如下:

import { Home } from 'home-model.js';
var home = new Home(); //例項化 首頁 物件
Page({
    data: {
        loadingHidden: false
    },
    onLoad: function () {
        this._loadData();
    },

    /*載入所有資料*/
    _loadData:function(callback){
        var that = this;

        // 獲得bannar資訊
        home.getBannerData((data) => {
            that.setData({
                bannerArr: data,
            });
        });

        /*獲取主題資訊*/
        home.getThemeData((data) => {
            that.setData({
                themeArr: data,
                loadingHidden: true
            });
        });

        /*獲取單品資訊*/
        home.getProductorData((data) => {
            that.setData({
                productsArr: data
            });
            callback&&callback();
        });
    },

    /*跳轉到商品詳情*/
    onProductsItemTap: function (event) {
        var id = home.getDataSet(event, 'id');
        wx.navigateTo({
            url: '../product/product?id=' + id
        })
    },

    /*跳轉到主題列表*/
    onThemesItemTap: function (event) {
        var id = home.getDataSet(event, 'id');
        var name = home.getDataSet(event, 'name');
        wx.navigateTo({
            url: '../theme/theme?id=' + id+'&name='+ name
        })
    },

    /*下拉重新整理頁面*/
    onPullDownRefresh: function(){
        this._loadData(()=>{
            wx.stopPullDownRefresh()
        });
    },

})