Yilong WeChat アプレット フレームワーク コンポーネントのサンプル コード

私はオンライン旅行業界に所属しているため、OTA の業界動向についてより懸念しています。少し前に eLong の WeChat ミニ プログラムを調査および体験しましたが、いくつかの欠陥はありますが、ミニ プログラムの アーキテクチャ コンポーネントはまだ残っています。とても良かったので、今日は eLong WeChat ミニ プログラムフレームワークのコンポーネントを簡単に見てみましょう。
まず、Yilong WeChat アプレットのフレームワーク コンポーネントを次の 4 つの部分に分割して分析します。
1. 部分的なコンポーネント
3. 統合されたコンポーネント
4. ネットワーク リクエストの動的効果を見てみましょう。 3 つの写真 写真:
一般に、その
ディレクトリ構造
は次のとおりです: [AppleScript] プレーン テキスト ビューのコピー コード

├── 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

フレームワークの使用手順

フレームワークは、すべての WeChat ネイティブ API をラップします。簡単な制御と拡張機能。
[AppleScript] プレーンテキストビュー コードをコピー

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

[AppleScript] プレーンテキストビュー コードをコピー

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

バックエンド
• インターフェース

  の場合、フレームワークはサービス層の入力管理を提供し、インターフェースは Promise を返します。オブジェクト。

[AppleScript] プレーンテキストでコピーコードを表示

//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] プレーンテキストでコピーコードを表示

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

アプレットは、既存のバックグラウンドとの互換性を維持したい場合は、Cookie メカニズムをサポートしていません。 Cookie 処理の終了 (変更なし)、フレームワークによってシミュレートされた Cookie メカニズムを使用できます。
[AppleScript] プレーンテキストビュー コードをコピー

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

[AppleScript] プレーンテキストビュー コードをコピー

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

Page()
• Function

  はページの登録に使用されます。ページの初期データを指定するオブジェクトパラメータ、ライフサイクル関数、イベント処理関数などを受け取ります。フレームワークは、拡張機能を便利に使用できるようにページを書き換えています。オリジナルのみ ビジネスコードをラッパーでラップするだけです。

[AppleScript] コピー コードをプレーン テキストで表示

//微信小程序原生页面注册形式
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);

グローバルデータ監視、フレームワークはグローバル イベント リスニング メカニズムをサポートしています
[AppleScript] コピー コードをプレーン テキストで表示

//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);

イベント メカニズム、ジャンプページ間でデータを渡すことができます。フレームワークはページ間のデータ転送をサポートし、ジャンプ インターフェイスによって返されるイベント オブジェクトを通じてカスタム イベントを監視することもできます。
[AppleScript] プレーンテキストビューのコピーコード

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

[AppleScript] プレーンテキストビューのコピーコード

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

コンポーネントの使い方

組み込みコンポーネント
フレームワーク書き換えページ

構築方法

、構築済み-in 一部の一般的に使用されるコンポーネント (alert、picker、setLoading など) は、ネイティブの wx.showModal と wx.showToast をそれぞれカプセル化します。カプセル化により、呼び出しパラメーターが構造化され、ビジネスでの使用に便利になります。使用時にページ構造を導入するだけで、直接呼び出すことができます。最初にピッカーをページのプレゼンテーション層構造に導入する必要があり、構成項目は構成要件に従って提供されます。 [AppleScript] プレーンテキストビューのコピーコード

//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;);
    }
});

独立したページコンポーネント
独立したページコンポーネントは、実際には完全なページユニット（js、wxml、wxssで構成される）であり、使用するのは非常に簡単です。関連する js メソッドを導入すると、open コンポーネントを呼び出すだけです (データ交換処理のためにコールバックを渡すことができます)。 --実装原理は、コンポーネントによって提供される js メソッドが新しいページ (api.Navigate.go) を開き、登録されたイベントを通じて対話することです

Behavior

Data[AppleScript] Plain text view copy code

//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);

ページレベルのコンポーネント

框架重写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) {
    }
}

以上がYilong WeChat アプレット フレームワーク コンポーネントのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。