1..image组件:加载图像用的,比较简单
<image src="项目内图所存放的相对路径"></image>
或
<image src="来自于互联网的图片文件"></image>
2 template 自定义组件:非常有用的自定义组件,可以将一组系统组件设置好布局,变量后定义成一个模板块,便于直接调用.
2.1 定义方式:
<template name="组件名">
自定义的内容
</template>
2.2 代码栗子
//-----------wxml内容----//
<template name = "mbcs"> //创建一个名为mbcs的模板
<view ><text >{
{fs2}}</text></view> //模板使用了一个fs2的绑定变量 </view>//开始使用定义好的模板
<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>