hongjun
这是666计划的第43篇笔记
本微信小程序是极客时间“9小时搞定微信小程序开发”系列的笔记。
微信小程序开发框架--基本构成
image
wxml是描述内容
wxss是描述样式
wxs是对wxml之上的增强
WXML语法
image
<view class='classname' data-name="A">
Helloworld
<view>Hello China</view>
</view>
效果：
image
WXML特性1： 数据绑定
数据绑定的意思是， 可以在页面动态显示数据， 传递变量值。
index.wxml
<view>
<text>{{message}}</text>
</view>
index.js
Page({
data: {
message: "Hello, world"
}
})
WXML特性2： 列表渲染
index.wxml:
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}: {{item.name}}</view>
</block>
</view>
index.js:
Page({
data: {
items: [
{name: "商品A"},
{ name: "商品B"},
{ name: "商品C"},
{ name: "商品D"},
{ name: "商品E"}
]
}
})
WXML特性3： 条件渲染
index.wxml:
<view>
今天吃什么？
</view>
<view wx:if="{{condition === 1}}"> 饺子 </view>
<view wx:elif="{{condition === 2}}"> 米饭 </view>
<view wx:else> 面食 </view>
index.js
Page({
data: {
condition: Math.floor(Math.random()*3+1)
}
})
效果：
image
hidden 和ifelse的区别
hidden初始化消耗较大， 所以适合后期的频繁切换
ifelse有切换消耗， 适合非频繁切换
WXML特性4： 模板与模板引用
作用： 复用页面元素
index.wxml:
<template name="tempItem">
<view>
<view>收件人： {{name}}</view>
<view>phone： {{phone}}</view>
<view>地址： {{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
<!--
这里的... 用法， 是es6的一个扩展运算符语法，可以将对象或数组进行解构赋值
>
wxml也可以不用三个点解构方式：
<template name="tempItem">
<view>
<view>收件人： {{item.name}}</view>
<view>phone： {{item.phone}}</view>
<view>地址： {{item.address}}</view>
</view>
</template>
<template is="tempItem" data="{{item}}"></template>
index.js
Page({
data: {
item: {
name: "张三",
phone: "19988999999",
address: "中国"
}
}
})
模板引用 import
index.wxml:
<import src="a.wxml"></import>
<template is="a"></template>
a.wxml:
<import src="b.wxml"/>
<template name="a">
This is a.wxml
</template>
<!-- 引用了b， 但是b显示不出来， 只显示a， 避免了死循环>
<template is="b"> </template>
b.wxml:
<template name="b">
this is b.wxml
</template>
理解： 微信小程序对import做了限制， 只能引用明确的template is的模板， 嵌套的内容不予理会。
模板引用之include
就是简单的copy代码过来。 和include自身的含义一致。
网友评论