Due to wechat small program technology ecology is relatively closed, resulting in a lot of modern front-end framework a lot of accumulated achievements are not realized (may be realized one by one in the future). Used to modern little programs always feel uncomfortable.

If you need a result, go straight to the final WXS

View Filter

Filter is understood as pipeline processing, you throw me a set of data through various types of pipeline processing to produce new data without affecting the modification of the original data, and finally show to the user.

The existing front-end framework Filter is generally:

 time | dateTime('yyy-mm-dd')
Copy the code

Use | as pipe pass parameters be serialized

Defect:

Up to now, there is no official pipeline implementation for small programs. Here are a few alternatives for you to choose from.

After the request is complete, the return value data is processed once, such as abstracting a _formatListData method to process the return again.

_formatListData(list) { return list.map((item) => { let date = FormatUtil.getDateTime(item.childBirth); item.filterChildBirth = `${date.y}-${date.M}-${date.d}`; return item; }}Copy the code

This approach adds a new field to the source data, filterChildBirth (the original field is childBirth). The final display also shows that filterpet feels in view. Many of the fields that need filter are handled in this way. It is obvious that for some business filters, it is much more difficult to share them.

ES6 get

data : {
  time : 1511748300571
}

 get time (){    
  return FormatUtil.getDate(this.data.time);
}
Copy the code

Through get method to achieve the display of field filtering. Only objects can be manipulated and items in arrays are not.

WXS

The architecture of wechat applets is divided into app-Service and Page-frame, which run on different threads respectively. All the JS you write at development time runs in the app-service thread, and the WXML/WXSS for each page runs in the Page-frame. App-service and Page-frame communicate via the bridge protocol (including setData calls, Canvas directives, and various DOM events) involving message serialization, cross-thread communication, and evaluateJavascript(). The advantage of this architecture is that the business main thread and the display interface are separated so that even if the business main thread is very busy, it does not block user interaction on the Page-frame. A small application can have multiple page-frames (WebViews), and switching between pages is much smoother than SPA. The downside: you can’t call business JS on page-frame. The cost of cross-thread communication is high and is not suitable for scenarios that require frequent communication. Business JS has no direct control over the DOM. Author: LuXiaoFu link: https://www.zhihu.com/question/64322737/answer/223446446

Now that we know what WXS is designed to do, we know what we can do

Ps: Js and WXS cannot reference each other because they are running on different threads. This makes it possible to use common methods in JS and have to be rewritten in WXS (to share filters), causing code redundancy.

Sharing filter through WXS:

  1. First we create a shared filter folder to implement a date formatting

  2. WXS implements date formatting (ES6 syntax is not available)

    var DateFr = { getDate: function (time, splitStr) { if (! time) return ''; var date =getDate(time); var M = date.getMonth() + 1; var y = date.getFullYear(); var d = date.getDate(); if (M < 10) M = "0" + M; if (d < 10) d = "0" + d; if (splitStr) return y +splitStr + M +splitStr+d; else return { y: y, M: M, d: d }; } } module.exports = { getDate: DateFr.getDate }Copy the code

  3. Reference WXS in the business page WXML

    <wxs module="dateFr" src=".. /.. /.. /.. /filter/dateFr.wxs"></wxs>Copy the code

    Use the filter

        <text >{{dateFr.getTime(item.createdAt,':')}}</text>
Copy the code

At the end

WXS basically meets the requirements of filter: 3 service filters are used in shared filter scenarios. 1,3 simple service filters are used in many scenarios. 2 small programs are used in non-array scenarios.