How to use WeChat mini program WXS

The content of this article is about how to use the WeChat applet WXS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A few days ago a classmate asked me Does the WeChat applet support pipeline filters?
Students who have used angular or vue should be able to use filter in their projects, but it is not supported in small programs. But there are some solutions
But I just care about whether WXS can implement filter and what else can it do? With this question, I re-read the official WXS of the WeChat mini program.

Here is a simple example:

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

The above example can output the hello world page. When you finish reading the official documentation, you will find that the applet The functions of the scripting language are very tricky, for example, it only supports es5 syntax, does not support external introduction of js, etc. But I still look forward to it supporting more capabilities in the future.

Let’s go to the main topic and explore the questions about the article title

1. Use WXS to implement filter

The front end usually has a The requirement is to convert the timestamp transmitted from the background into dates of different specifications and then display them. The past practice was to wrap the data with a function and then output it to the page. Just like the first method mentioned in the article mentioned earlier, some people consider performance issues and think that loop processing in js is more performance-intensive (I will not comment on this, after all, I have not really tested it)
Examples of date formatting are already available in the previously mentioned article. Here I will give a relatively simple example. In the projects I have developed, the Internet image address returned by the background is usually a relative address, which means that in order to display the image, a configured domain name prefix must be added. I usually traverse the data after getting it, and add prefixes to the pictures that need to be displayed on the front end. But with WXS, we can do this:

<wxs>
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image></image>

In the above example, you can see that the entire process is basically similar to the way of custom filtering in frameworks such as vue.

2. What else can WXS do

In fact, many times, we don’t understand that WXS can do more conditional rendering. Please look at the following example:

<wxs>
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '该专栏暂时没有活动';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '该专栏暂时没有资讯';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '没有相关的话题哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你还没有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你还没有报名任何活动哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你还没有收藏任何活动哦';
        break;
      default:
        break;
    }
    if (type === 'image') {
      return imgUrl;
    } else {
      return content;
    }
  }
  module.exports.getData = getData;
</wxs>
<template>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

In the above example, I used the function function of WXS to help me make conditional judgments and get the corresponding template output. Its function is an empty data display page. Maybe you will ask what are the benefits of writing like this?
Then I can tell you that it is easy to expand. For example, if a new page needs a corresponding empty data template, then just add one more case to the switch statement. Moreover, if the logic is written in WXML, the code will be very complicated and difficult to understand.
Understanding this, you will find that any operation that requires some logical judgment on WXML can be replaced by WXS.
In other words, during development, we can all use the functions of WXS to help us clearly and effectively process some views rendered on WXML.

3. Thoughts (extension)

1. For WXS that needs to be made into filter form, it is best to write it in a .wxs file. When it needs to be used, directly in the corresponding WXML Just quote.

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<wxs></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2. To reference other wxs file modules in the .wxs module, you can use the require function, but you cannot reference other js file modules.

Reference for this article: Basic Tutorial on WeChat Mini Program Development https://www.html.cn/study/20.html

The above is the detailed content of How to use WeChat mini program WXS. For more information, please follow other related articles on the PHP Chinese website!