WeChat applet - packaging element block

Take the BlockComp created in components and the features in pages as an example

features.json

{
    "usingComponents": {
        "if-comp":"/components/IfComp/IfComp",
        "for-comp":"/components/ForComp/ForComp",
        "block-comp":"/components/BlockComp/BlockComp"
    },
    "navigationBarTitleText": "语法特点",
    "navigationBarBackgroundColor": "#FFF",
    "navigationBarTextStyle": "black"
}

features.wxml

<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />
<view>===========空标签=============</view>
<block-comp></block-comp>

BlockComp.wxml

<block wx:for="{
   
   {list}}" wx:key="*this">
    <!-- {
   
   {index}}-{
   
   {item}} -->
    <view>{
   
   {index}}-{
   
   {item}}</view>
</block>

<view>
    <block wx:if="{
   
   {count >= 10}}">两位数：{
   
   {count}}</block>
    <block wx:elif="{
   
   {count >= 5 && count <10}}">个位数(5-9)：{
   
   {count}}</block>
    <block wx:else>个位数(0-5)：{
   
   {count}}</block>
</view>
<text class="btn" bindtap="rand">随机数2</text>

BlockComp.wxss

.btn{
    border: 1px solid #000;
    background: #fafafa;
    padding: 2px 6px;
}

BlockComp.js

Component({
    data:{
        list:["a","b","c"],
        count:0
    },
    methods:{
        rand(){
            this.setData({
                count:Math.floor(Math.random()*15)
            })
        }
    }
})

Block is not a component, it is just a wrapping element that does not do any rendering on the page and only accepts control attributes.

Taking the above for loop traversal as an example, when using view, view the Wxml in the debugger as shown below

When using block, as shown in the figure below

Therefore, I personally feel that using block can help you see the running results more concisely and intuitively on the console. Compared with components such as view, block focuses more on implementing methods such as if judgment and for loop traversal, rather than emphasizing component names.

running result