欢迎来到这个夏天 来杯冰镇啤酒吧
Welcome to clear ocean water, To clear ocean water.

小程序 模板语法

小程序学习笔记

数据绑定

普通写法

wxml代码

<!-- text 相当于 span标签 行内元素 不会换行 -->
<!-- view 相当于 div标签 块级元素 会换行 -->
<!-- checkbox 相当于 复选框标签 -->

<!-- 字符串类型 -->
<view> {{string}} </view>

<!-- 数字number类型 -->
<view> {{number}} </view>

<!-- 布尔Boolean类型 -->
<view> {{Boolean}} </view>

<!-- 对象objeact类型 -->
<view> {{customise.Sname}} </view>
<view> {{customise.Snumber}} </view>
<view> {{customise.Sdeterrence}} </view>

<!-- 在标签的属性中使用 -->
<view data-num="{{number}}"> 自定义属性 </view>

<!-- 使用布尔类型充当属性 checked -->
<view>
<checkbox checked="{{Schecked}}"></checkbox>
</view>

js代码

Page({
data:{
string: "我叫史迪奇",
number: 333,
Boolean: false,

customise: {
Sname: "史迪奇",
Snumber: 626,
Sdeterrence: true
},
Schecked: false
}
})

运算

表达式

<!-- 数字运算 -->
<view> {{3-2}} </view>

<!-- 字符串拼接 -->
<view> {{"s"+"d"+"q"}} </view>

<!-- 逻辑运算 -->
<view> {{11%2===0 ? '偶数' : "奇数"}} </view>

列表循环

wxml代码

<!-- wx.for="{{数组或者对象}}" -->
<!-- wx.for-item="循环项的名称" -->
<!-- wx.for-index="循环项的索引" -->
<!-- wx.key="唯一的值" 用来提高列表渲染性能 -->
<!-- wx.kry 绑定普通字符串时 该字符串名称是循环数组中的的对象唯一属性 -->
<!-- wx:key = "*this" 表示该数组为普通数组 *this表示循环项 -->

<!-- wx.for-item="item" wx:for-index="index" 数组嵌套循环 注意: 绑定名称不能崇名 -->
<view wx:for="{{list}}"
wx.for-item="item"
wx:for-index="index"
wx:key="id" >
索引:{{index}}
值:{{item.name}}
</view>

js代码

Page({
data:{
string: "我叫史迪奇",
number: 333,
Boolean: false,

customise: {
Sname: "史迪奇",
Snumber: 626,
Sdeterrence: true
},
Schecked: false,
list:[
{
id:6,
name:"鲁本"
},
{
id:2,
name:"625实验品"
},
{
id:5,
name:"Reuben"
}
]
}
})

对象循环

wxml代码

<!-- wx.for="{{对象}}" wx.for-item="对象的值(key)"  wx:for-index="对象的属性(value)" -->

<view wx:for="{{customise}}"
wx.for-item="value"
wx:for-index="kry"
wx:key="Snumber" >
索引:{{key}}
值:{{value}}
</view>

js代码

Page({
data:{
string: "我叫史迪奇",
number: 333,
Boolean: false,

customise: {
Sname: "史迪奇",
Snumber: 626,
Sdeterrence: true
},
Schecked: false,
]
}
})

语句

组件属性

用处: 定义小程序所有页面的顶部背景颜色, 文字颜色等等

// 该字段用来表明子页面的
{
// 页面
"window": {
// 下拉 loading 的样式
"backgroundTextStyle": "light",
// 导航栏背景颜色
"navigationBarBackgroundColor": "#000000",
// 导航栏标题文字内容
"navigationBarTitleText": "史迪奇的博客",
// 导航栏标题颜色
"navigationBarTextStyle": "white",
// 下拉刷新
"enablePullDownRefresh": true
},
"sitemaplocation": "sitemap.json"
}

组件属性

用处: 定义小程序所有页面的顶部背景颜色, 文字颜色等等

// 该字段用来表明子页面的
{
// 页面
"window": {
// 下拉 loading 的样式
"backgroundTextStyle": "light",
// 导航栏背景颜色
"navigationBarBackgroundColor": "#000000",
// 导航栏标题文字内容
"navigationBarTitleText": "史迪奇的博客",
// 导航栏标题颜色
"navigationBarTextStyle": "white",
// 下拉刷新
"enablePullDownRefresh": true
},
"sitemaplocation": "sitemap.json"
}