0610 微信小程序 (image组件 template自定义组件)

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

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

   或

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

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

   2.1 定义方式:

   <template name="组件名">

        自定义的内容 

   </template> 

扫描二维码关注公众号，回复： 1550485 查看本文章

  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); 

       

})