Beispielcode für die Yilong WeChat-Applet-Framework-Komponente

Da ich in der Online-Reisebranche tätig bin, mache ich mir vor einiger Zeit mehr Sorgen um die Branchentrends von OTAs. Obwohl es einige Mängel in der Architektur gibt des Mini-Programms sind immer noch sehr gut, deshalb werfen wir heute einen kurzen Blick auf die Framework-Komponente des Yilong WeChat Mini-Programms.
Zunächst unterteilen wir die Framework-Komponenten des Yilong WeChat-Applets zur Analyse in die folgenden vier Teile:
1. Lokale Komponenten
2. Unabhängige Komponenten
3. Integrierte Komponenten
4 . Netzwerkanforderung
Schauen Sie sich zunächst drei dynamische Darstellungen an:
Insgesamt ist die Verzeichnisstruktur wie folgt:

[AppleScript] Kopiercode für die Nur-Text-Ansicht

├── README.MD
├── app.js
├── app.json
├── app.wxss
├── components
├── image
├── pages
├── service
└── utils
    ├── api.js
    ├── cookie.js
    ├── data-center.js
    ├── overwrite.js
    ├── page-events.js
    ├── path.js
    ├── promise.js
    └── service.js

Anleitung zur Verwendung des Frameworks

• Das Framework umschließt alle nativen WeChat-APIs für eine einfache Steuerung und Erweiterung.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//index.js
var api = require("./utils/api.js")();
api.login({
    success: function(res) {
        console.log(res);
    }
});

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//index.js
var api = require("./utils/api.js")();
api.login({
    success: function(res) {
        console.log(res);
    }
});

• Für die Backend--Schnittstelle stellt das Framework die Service-Layer-Eintragsverwaltung bereit und die Schnittstelle gibt ein Promise--Objekt zurück.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//demo.js
var Service = require("../utils/service.js");
module.exports = {
    GetTime: Service({
        url: 'https://xxx.xxx.xxx/api/getserverdate/',
        params: [], //参数列表
        method: 'GET',
        noLoading: true,
        mockData: function() { //模拟数据
            return new Date();
        },
        dataTransform: function(data) { //适配处理
            return data;
        }
    })
};

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//index.js
var service = require('service/demo'); //框架约定，所有的后端接口，要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) {
    that.setData({
        serverDate: date
    });
});

• Das Applet unterstützt den Cookie-Mechanismus nicht. Wenn Sie mit der vorhandenen Back-End-Cookie-Verarbeitung kompatibel sein möchten (keine Änderungen), können Sie den vom Framework simulierten Cookie-Mechanismus verwenden.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//index.js
var COOKIE = require('./cookie.js');
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//service.js
//...
headers["Cookie"] = Cookie.getAll(); //用户cookie将随http请求发送至服务器
//...

• Page() Funktion wird zum Registrieren einer Seite verwendet. Akzeptiert einen Objekt-Parameter, der die Anfangsdaten der Seite, die Lebenszyklus--Funktion, die Ereignisverarbeitungs--Funktion usw. angibt. Das Framework hat die Seite neu geschrieben, was macht Das ist praktisch: Mit der Erweiterungsfunktion müssen Sie nur den ursprünglichen Geschäftscode mit einem Wrapper umschließen.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//微信小程序原生页面注册形式
Page({
    data: {},
    onLoad: function() {}
});
//框架重写注册形式
var dirname = 'pages/index',
    overwrite = require('../../utils/overwrite.js');
(function(require, Page) { //重写require、Page
    Page({
        data: {},
        onLoad: function() {}
    });
})(overwrite.require(require, dirname), overwrite.Page);

• GlobalData Listening, das Framework unterstützt globale Event-Listening-Mechanismen

[AppleScript] Code zum Kopieren der Klartextansicht

//index.js
var dirname = 'pages/index',
    overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
    //获取应用实例
    var app = getApp();
    var service = require('service/demo');
    Page({
        data: {
            indate: '',
            indateText: ''
        },
        onLoad: function() {
            this.listenerGlobalData('indate', function(indate) {
                this.data.indate = indate
                this.data.indateText = new Date(indate).format('MM-dd')
            }.bind(this));
        }
    })
})(overwrite.require(require, dirname), overwrite.Page);

• Ereignismechanismus, Sprünge zwischen Seiten können Daten übertragen, das Framework unterstützt die Übertragung von Daten zwischen Seiten, Außerdem können Sie benutzerdefinierte Ereignisse über das von der Sprungschnittstelle zurückgegebene Ereignisobjekt abhören.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//index页面
var event = api.Navigate.go({
    url: '../list/index',
    params: {
        name: 'billy'
    }
});
event.on("listok", function(params) {
    console.log(params);
});

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//http页面
Page({
    onLoad: function(data) {
        if (data.name === 'billy') {
            this.fireEvent("listok", 'hello ' + data.name);
        }
    }
});

Anweisungen zur Komponentenverwendung

• Eingebaute Komponenten

Das Framework schreibt die PageKonstruktormethode neu und verfügt über integrierte einige häufig verwendete Komponenten B. Alert, Picker, SetLoading, Alert und SetLoading, kapseln die nativen Parameter wx.showModal und wx.showToast. Durch die Kapselung werden die Aufrufparameter strukturiert und für den geschäftlichen Gebrauch praktisch. Rufen Sie es einfach direkt auf. In der Präsentationsschichtstruktur müssen Konfigurationselemente entsprechend den Konfigurationsanforderungen bereitgestellt werden.

[AppleScript] Kopiercode für die Nur-Text-Ansicht

//setLoading
this.setLoading(true);//ture/false
//picker 引入表现层结构
<!--index.wxml-->
<view class="container">
    <view class="userinfo">
        <text class="userinfo-nickname">{{current}}</text>
    </view>
    <include src="../../components/base.wxml" />
</view>
//picker 使用
overwrite.picker({
    content: "选择排序",
    init: this.data.sortIndex,
    data: this.data.sortList,
    bindtap: function(id, index) {
        if (that.data.sort != id) {
            that.setData({
                sortIndex: index,
                current: this.data.sortList[index].text
            });
        }
    },
    bindcancel: function() {
        console.log(&#39;cancel&#39;)
    }
});
//alert
overwrite.alert({
    content: &#39;弹框对话框，参数配置详见文档说明&#39;,
    cancelText: &#39;取消&#39;,
    bindconfirm: function() {
        console.log(&#39;确定&#39;);
    },
    bindcancel: function() {
        console.log(&#39;取消&#39;);
    }
});

• Unabhängige Seitenkomponente

Unabhängige Seitenkomponente Tatsächlich handelt es sich um eine vollständige Seiteneinheit (bestehend aus js, wxml und wxss). Sie ist sehr einfach zu verwenden. Führen Sie einfach die entsprechende js-Methode ein und rufen Sie die offene Komponente auf (für die Datenaustauschverarbeitung kann ein Rückruf übergeben werden). --Das Implementierungsprinzip besteht darin, dass die von der Komponente bereitgestellte js-Methode eine neue Seite (api.Navigate.go) öffnet und über registrierte Ereignisse interagiertVerhaltenDaten

[AppleScript] Reiner Text Kopiercode anzeigen

//index.js
var dirname = 'pages/externalComponent',
    overwrite = require('../../utils/overwrite.js');
require('../../utils/dateFormat.js');

(function(require, Page) {
    //获取应用实例
    var app = getApp();
    var CalendarPlugin = require('components/calendar/index');
    Page({
        data: {
            date: {
                indate: new Date().format('yyyy-MM-dd'),
                outdate: new Date(+new Date + 3600000 * 24).format('yyyy-MM-dd')
            }
        },
        openCalendar: function() {
            var that = this;
            CalendarPlugin({
                begin: that.data.date.indate,
                end: that.data.date.outdate
            }, function(res) {
                that.data.date.indate = res.start.format('yyyy-MM-dd');
                that.data.date.outdate = res.end.format('yyyy-MM-dd');
                that.setData({
                    date: that.data.date
                })
            })
        },
        onLoad: function(data) {

        }
    })
})(overwrite.require(require, dirname), overwrite.Page);

• Komponente auf Seitenebene

框架重写Page构造器，支持构建页面时配置一个或多个页面级组件，所谓页面级组件就是该组件的注册形式和页面一致(支持data数据，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等页面级方法)，其实现原理是将组件的所有成员方法和成员属性和依附页面进行合并，并解决了重名冲突，使用者不用关系处理细节，只管像注册一个页面一样注册组件。--需要注意的是页面级别组件不可再次使用Page构造方法。

1、引入组件表现层结构

[AppleScript] 纯文本查看 复制代码

<!--index.wxml-->
<view class="container">
    <view class="userinfo">
        <!--当前页面数据-->
    </view>
    <!--引入组件页面结构-->
    <include src="../../components/base.wxml" />
</view>

2、引入组件样式表

[AppleScript] 纯文本查看 复制代码

/**引入组件样式表**/
@import "filter/index.wxss";
page { background: #f4f4f4; }

3、注册页面时注入组件

[AppleScript] 纯文本查看 复制代码

/**
 * 集成组件dome
 */
var dirname = 'pages/internalComponent',
    overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
    /*引入组件js*/
    var filter = require('./filter/index');
    Page({
        /**
         * 默认数据
         * @type {Object}
         */
        data: {...},
        onLoad: function(options) {},
    }, [{//注入组件
        component: filter,
        instanceName: 'typeFilter',
        props: {
            style: { top: '44px' }
        },
        events: {
            onChange: 'filterChangedCallBack',
            onOpen: 'filterOpenedCallBack',
            onClose: 'filterClosedCallBack'
        }
    }, {
        component: filter,
        instanceName: 'categoryFilter',
        props: {
            style: { top: '44px' }
        },
        events: {
            onChange: 'filterChangedCallBack',
            onOpen: 'filterOpenedCallBack',
            onClose: 'filterClosedCallBack'
        }
    }])
})(overwrite.require(require, dirname), overwrite.Page)页面级组件由*.js、*.wxml、*.wxss组成，分别由注册页面引入，其中js部分不可再次使用Page构造
[AppleScript] 纯文本查看 复制代码
├── index.js
├── index.wxml
└── index.wxss[AppleScript] 纯文本查看 复制代码
//页面级组件js声明
/**
 * 筛选器
 */
var dirname = 'pages/internalComponent/filter',
    api = require('../../../utils/api.js')(dirname)

var bgAnimation = api.createAnimation({
        duration: 200
    }),
    contentAnimation = api.createAnimation({
        duration: 200
    });

module.exports = {
    data: {
        items: [],
        selectedId: '',
        bgAnimation: {},
        contentAnimation: {},
        isOpen: false
    },

    /**
     * 监听组件加载
     * @param  {Object} props
     */
    onLoad: function(props) {
        this.setData({
            style: props.style
        })
    },

    /**
     * 初始化
     * @param  {Array} items
     * @param  {String | Number} selectedIndex
     */
    init: function(items, selectedIndex) {},

    /**
     * 选中
     * @param  {Object} e
     */
    select: function(e) {
    }
}

Das obige ist der detaillierte Inhalt vonBeispielcode für die Yilong WeChat-Applet-Framework-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!