Yilong WeChat applet framework component instance code

This article introduces the sample code of the Yilong mini-program framework component because it is in the online tourism industry and is more concerned about the OTA industry dynamics. a while ago, I studied and experienced Yilong's mini-program, despite some shortcomings, the architecture components of the mini-program are still very good. so let's take a look at the components of the mini-program framework.
First, we will analyze the framework components of the Yilong mini program in the following four parts:
1. local components
2. independent components
3. integrated components
4. network requests
Let's take a look at three updates:
In general, the directory structure is as follows:

[AppleScript] view the Copy code in plain text

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

Framework instructions

• The framework encapsulates all native APIs for control and expansion.

[AppleScript] view the Copy code in plain text

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

[AppleScript] view the Copy code in plain text

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

• For backend interfaces, the framework provides service layer entry management. the interface returns a Promise object.

[AppleScript] view the Copy code in plain text

// Demo. jsvar Service = require (".. /utils/service. js "); module. exports = {GetTime: Service ({url: 'https: // xxx. xxx. xxx/api/getserverdate/', params: [], // parameter list method: 'GET', noLoading: true, mockData: function () {// simulate data return new Date () ;}, dataTransform: function (data) {// adaption processing return data ;}})};

[AppleScript] view the Copy code in plain text

// Index. jsvar service = require ('service/Demo'); // framework convention. all backend interfaces must be registered to the corresponding service file var serverDate = service. getTime (/* service configurable parameter list, which indicates the corresponding parameter */). then (function (date) {that. setData ({serverDate: date });});

• Applets do not support the cookie mechanism. to be compatible with existing backend cookie processing (without modification), you can use the cookie mechanism simulated by the framework.

[AppleScript] view the Copy code in plain text

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

[AppleScript] view the Copy code in plain text

// Service. js //... headers ["Cookie"] = Cookie. getAll (); // The user cookie will be sent to the server with the http request //...

• The Page () function is used to register a Page. An object parameter is used to specify the initial data, lifecycle function, and event processing function of the Page. The framework overwrites the Page, which facilitates the use of the extended capability, you only need to wrap the original business code in the package.

[AppleScript] view the Copy code in plain text

// Register the native Page of the applet in the form of Page ({data :{}, onLoad: function (){}}); // framework rewrite registration form var dirname = 'Pages/Index', overwrite = require ('.. /.. /utils/overwrite. js '); (function (require, Page) {// rewrite require, Page ({data :{}, onLoad: function (){}});}) (overwrite. require (require, dirname), overwrite. page );

• GlobalData listening. The framework supports global event listening.

[AppleScript] view the Copy code in plain text

// Index. jsvar dirname = 'Pages/Index', overwrite = require ('.. /.. /utils/overwrite. js '); (function (require, Page) {// Obtain the application instance 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 );

• Event mechanism. data can be transferred during inter-page navigation. The framework supports data transmission between pages and listens to custom events through event objects returned by the jump interface.

[AppleScript] view the Copy code in plain text

// Index page var event = api. navigate. go ({url :'.. /list/Index', params: {name: 'Billy '}); event. on ("listok", function (params) {console. log (params );});

[AppleScript] view the Copy code in plain text

// Http Page ({onLoad: function (data) {if (data. name = 'Billy ') {this. fireEvent ("listok", 'Hello' + data. name );}}});

Component instructions

• Built-in components

The framework overrides the Page constructor method and has built-in common components, such as alert, picker, and setLoading. in the framework, alert and setLoading respectively encapsulate the native wx. showModal, wx. showToast, encapsulation makes the call parameters structured and convenient for business use. you do not need to introduce the page structure for direct calling. picker needs to first introduce the presentation layer structure in the page, pass configuration items as required.

[AppleScript] view the Copy code in plain text

// SetLoadingthis. setLoading (true); // ture/false // picker introduces the presentation layer structure
 
     
          
   
    
{Current }}
       
      
  
 // Picker uses overwrite. picker ({content: "Select sorting", 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 ('cancel')}); // alertoverwrite. alert ({content: 'dialog box. for parameter configuration, see the document description ', cancelText: 'Cancel', bindconfirm: function () {console. log ('confirmed');}, bindcancel: function () {console. log ('cancel ');}});

• Independent page components

The independent page component is actually a complete page unit (composed of js, wxml, and wxss). It is easy to use. by introducing the relevant js method, call to open the component (callback can be passed for data exchange processing ). -- The implementation principle is that the js method provided by the component will open a new page (api. Navigate. go) and interact behavior data by registering events.

[AppleScript] view the Copy code in plain text

// Index. jsvar dirname = 'Pages/externalComponent ', overwrite = require ('.. /.. /utils/overwrite. js'); require ('.. /.. /utils/dateFormat. js '); (function (require, Page) {// Obtain the application instance 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-level components

The framework overrides the Page constructor and supports configuring one or more Page-level components during Page building. The so-called Page-level component is the registration form of the component and the Page is consistent (supports data, onLoad, onReady, onShow, fireEvent, showLoading, and other page-level methods). The implementation principle is to merge all member methods and member attributes of the component and the attached page, and solves the duplicate name conflict, the user does not need to deal with the details of the relationship, just like registering a page to register a component. -- Note that Page-level components cannot use the Page constructor again.

1. introduce the component presentation layer structure

[AppleScript] view the Copy code in plain text

2. introduce component style sheets

[AppleScript] view the Copy code in plain text

/** Introduce the component Style Sheet **/@ import "filter/index. wxss"; page {background: # f4f4f4 ;}

3. inject components when registering the page

[AppleScript] view the Copy code in plain text

/*** Integration component dome */var dirname = 'Pages/internalComponent ', overwrite = require ('.. /.. /utils/overwrite. js '); (function (require, Page) {/* introduce component js */var filter = require ('. /filter/index'); Page ({/*** default data * @ type {Object} */data :{...}, onLoad: function (options) {},}, [{// injection 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) Page-level components *. js ,*. wxml ,*. wxss is composed of registration pages, which are introduced respectively. the js part cannot use the Page to construct [AppleScript] plain text again to view the Copy code ── index. js ── index. wxml ── index. wxss [AppleScript] Copy code in plain text // page-level component js declaration/*** filter */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 }, /*** listen for component loading * @ param {Object} props */onLoad: function (props) {this. setData ({style: props. style})},/*** initialize * @ param {Array} items * @ param {String | Number} selectedIndex */init: function (items, selectedIndex ){}, /*** select * @ param {Object} e */select: function (e ){}}

The above is the details of the sample code of the Yilong mini-program framework component. For more information, see other related articles in the first PHP community!