Exemple de code de composant de cadre d'applet Yilong WeChat

Depuis que je suis dans l'industrie du voyage en ligne, je suis plus préoccupé par les tendances de l'industrie des OTA. J'ai étudié et expérimenté le mini-programme WeChat d'eLong il y a quelque temps. Bien qu'il y ait quelques défauts, les composants architecture. du mini programme sont toujours très bons, nous allons donc aujourd'hui jeter un bref coup d'œil au composant Framework du mini programme Yilong WeChat.
Tout d'abord, nous divisons les composants du framework de l'applet Yilong WeChat en quatre parties suivantes pour analyse :
1. Composants locaux
2. Composants indépendants
3. Composants intégrés
4. . Requête réseau
Examinons d'abord trois rendus dynamiques :
Dans l'ensemble, sa structure de répertoires est la suivante :

[AppleScript] Code de copie de la vue texte brut

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

Instructions d'utilisation du framework

• Le framework englobe toutes les API natives WeChat pour un contrôle et une expansion faciles.

[AppleScript] Code de copie de l'affichage en texte brut

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

[AppleScript] Code de copie de l'affichage en texte brut

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

• Pour l'interface backend , le framework assure la gestion des entrées de couche de service, et l'interface renvoie un objet Promise .

[AppleScript] Code de copie de l'affichage en texte brut

//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] Code de copie de l'affichage en texte brut

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

• Le mini programme ne prend pas en charge le mécanisme de cookie. Si vous souhaitez être compatible avec le traitement des cookies back-end existant (aucun changement), vous pouvez utiliser le mécanisme de cookie simulé par le framework.

[AppleScript] Code de copie de l'affichage en texte brut

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

[AppleScript] Code de copie de l'affichage en texte brut

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

• Page() La fonction est utilisée pour enregistrer une page. Accepte un paramètre objet, qui précise les données initiales de la page, la fonction cycle de vie , la fonction de traitement des événements , etc. Le framework a réécrit Page, ce qui rend C'est pratique Grâce à la capacité d'extension, il vous suffit d'envelopper le code commercial d'origine avec un wrapper.

[AppleScript] Code de copie de la vue en texte brut

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

• écoute globalData, le framework prend en charge le mécanisme d'écoute d'événements global

[AppleScript] Code de copie de l'affichage en texte brut

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

• Mécanisme d'événement, les sauts entre les pages peuvent transférer des données, le framework prend en charge le transfert de données entre les pages, et également Vous pouvez écouter des événements personnalisés via l'objet événement renvoyé par l'interface de saut.

[AppleScript] Code de copie de l'affichage en texte brut

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

[AppleScript] Code de copie de l'affichage en texte brut

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

Instructions d'utilisation des composants

• Composants intégrés

Le framework réécrit la méthode de construction Page et intègre certains composants couramment utilisés , tels que alert, picker, setLoading, alert et setLoading encapsulent respectivement les wx.showModal et wx.showToast natifs. L'encapsulation rend les paramètres d'appel structurés et pratiques pour une utilisation professionnelle. Il n'est pas nécessaire d'introduire la structure de la page lors de son utilisation. il suffit de l'appeler directement ; le sélecteur doit d'abord être présenté à la page. Dans la structure de la couche de présentation, les éléments de configuration sont fournis en fonction des exigences de configuration.

[AppleScript] Code de copie de l'affichage en texte brut

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

• Composant de page indépendant

Composant de page indépendant En fait, il s'agit d'une unité de page complète (composée de js, wxml et wxss). Elle est très simple à utiliser. Il suffit d'introduire la méthode js appropriée et d'appeler le composant open (un rappel peut être passé pour le traitement de l'échange de données). --Le principe d'implémentation est que la méthode js fournie par le composant ouvrira une nouvelle page (api.Navigate.go) et interagira via des événements enregistrésComportementDonnées

[AppleScript] Pure Text afficher le code de copie

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

• Composant au niveau de la 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) {
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!