最近在看小程序文档整理下简单的语法场景
<!--index.wxml-->
<!-- 模板导入 -->
<!-- 于此对应的还有 include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置 -->
<import src="../temp.wxml" />
<view class="container">
<view>首页</view>
<!-- 花括号和引号之间如果有空格,将最终被解析成为字符串 -->
<view>{{deviceInfo.system}}</view>
<van-toast id="van-toast" />
<van-button type="primary" bind:click="goNext">跳转</van-button>
<!-- 组件属性 注意如果是:关键字(需要在双引号之内) 特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值-->
<view id="item-{{id}}" data-id=‘{{id}}‘ bindtap=‘getCustomProperties‘>点击我获取自定义属性</view>
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{true}}"> </checkbox>
<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 加减运算 3+5+d 4+d-->
<view> {{a + b}} + {{c}} + d </view>
<view> {{2 + 2}} + d </view>
<!-- 双层循环使用 wx:for-item 可以指定数组当前元素的变量名, 使用 wx:for-index 可以指定数组当前下标的变量名 -->
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this">
<text> {{i}} * {{j}} = {{i * j}}</text>
</view>
</view>
<!-- wx:for 渲染一个包含多节点的结构块 -->
<!-- 如不提供 wx:key(建议每个wx:for写上wx:key),会报一个 warning *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字 -->
<block wx:for="{{[4, 5, 6]}}" wx:key="*this">
<view> {{index}}---{{item}}--节点 </view>
</block>
<!-- 模板语法 -->
<template is="a" data="{{...item}}" />
<template is="b" data="{{...item}}" />
<!-- wx:if 条件渲染语法的使用 -->
<view wx:if="{{5 > 6}}"> 1 </view>
<view wx:elif="{{5 > 2}}"> 5 </view>
<view wx:else> 3 </view>
</view>
data: {
id: 0,
flag: true,
a: 1,
b:2,
c:5,
// 模板数据
item: {
index: 0,
msg: ‘this is a template‘,
time: ‘2016-09-15‘
},
deviceInfo: {},
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)
},
getCustomProperties(e){
console.log(e.currentTarget.id,‘组件属性(比如id=xx)获取‘)
console.log(e.currentTarget.dataset.id,‘自定义属性(data-xxx)获取‘)
},
<!--pages/temp.wxml-->
<!-- 模板a name字段区分模板 -->
<template name="a">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<!-- 模板b name字段区分模板 -->
<template name="b">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
页面传参 取参
goNext(){
wx.navigateTo({
url: "../test/test?id=12"
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options,‘options.xx就可以获取上一个页面带过来的参数‘)
},
原创未经允许不得转载!!!转载请注明出处~谢谢合作;