0610 微信小程序 (image组件 template自定义组件 wk:if 条件渲染)

1..image组件:加载图像用的,比较简单

   <image src="项目内图所存放的相对路径"></image> 

   或

   <image src="来自于互联网的图片文件"></image> 

 

 

2  template 自定义组件:非常有用的自定义组件,可以将一组系统组件设置好布局,变量后定义成一个模板块,便于直接调用.

   2.1 定义方式:

   <template name="组件名">

        自定义的内容 

   </template> 

 

  2.2 代码栗子

  //-----------wxml内容----//

      <template name = "mbcs">  //创建一个名为mbcs的模板

 

       <view class="flex item">   //模板内容可以使用定义的wxss样式

               <view class="itme-left">                      //模板内容可以使用定义的wxss样式

                 <image src="../images/wechatHL.png"></image>     //模板内加载了一个图像

                <view ><text >{{fs}}</text></view>     //模板使用了一个fs的绑定变量

<view ><text >{{fs2}}</text></view>   //模板使用了一个fs2的绑定变量
                </view>

         </view>

</template> //结束定义

       //开始使用定义好的模板

<template is="mbsc" data="{{...arrzdy}}"></template>  // is关键字指定要定义的模板别名   data关键字进行模板绑定的变量调用  {{... 表示后续变量名以数组模式要展开   arrzdy 为要使用定义好的数组变量}}

       

 

   //-----------以下为当前页js文件内容--用来定义绑定的数据--//

     var parmar={

       data:{

          arrzdy:{fs:"111b",fs1:"222c"} ,  //fs的值111b 等都会在模板应用展开后被调用出来

              } ,

                      }

       Page(parmar); 

   //栗子全部结束     

 

3 条件渲染 wk:if     wk:elif   wk:else

    3.1结构如下:  //以下代码在当前页的wxml文件中

    <组件  wk:if="判断条件1">为真时的内容</组件>

    <组件  wk:elif="判断条件2">为真时的内容</组件>

   <组件  wk:else="判断条件3">为真时的内容</组件>

    3.2 举个栗子1

               <view wx:if="{{boolean==true}}">   //绑定变了boolean为真时 会渲染 view class="bg_black" 组件

    <view class="bg_black"></view>

</view>

<view wx:elif="{{boolean==false}}">  //绑定变了boolean为假时 会渲染 <view class="bg_red"> 组件

    <view class="bg_red"></view>

</view>

<view wx:else>                                    //以上都不符合是 会渲染 <view class="bg_red"> 组件

    <view class="bg_red"></view>

</view>

      3.3 举个栗子2

       <view wx:if="{{length > 5}}"> 1 </view>   //绑定变变量length>5时 会渲染1的值出来
< view wx:elif="{{length > 2}}"> 2 </view>

< view   wx:else> 3 </view>