小程序 模板语法
小程序学习笔记
数据绑定
普通写法
wxml代码
<view> {{string}} </view>
<view> {{number}} </view>
<view> {{Boolean}} </view>
<view> {{customise.Sname}} </view> <view> {{customise.Snumber}} </view> <view> {{customise.Sdeterrence}} </view>
<view data-num="{{number}}"> 自定义属性 </view>
<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代码
<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代码
<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": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000000", "navigationBarTitleText": "史迪奇的博客", "navigationBarTextStyle": "white", "enablePullDownRefresh": true }, "sitemaplocation": "sitemap.json" }
|
组件属性
用处: 定义小程序所有页面的顶部背景颜色, 文字颜色等等
{ "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000000", "navigationBarTitleText": "史迪奇的博客", "navigationBarTextStyle": "white", "enablePullDownRefresh": true }, "sitemaplocation": "sitemap.json" }
|
作者: 我叫史迪奇
本文来自于:
https://sdq3.link/Applet-WXML.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议