微信小程序(二)-语法学习
语法学习
一 模板语法
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
1.数据代码


// pages/block/block.js 本幢事宜
Page({
/*页面的初始数据*/
data: {
msg:"本幢事宜",
num:10000,
isGirl:false,
person:{
name:"小明",
age:18,
height:168
},
list:[
{
id:0,
name:"小明"
},
{
id:1,
name:"小强"
}
]
}
})
block.js
2.模版代码


<!--pages/block/block.wxml-->
<!-- 1.字符串显示 -->
<view>msg:{{msg}}</view>
<!-- 2.数定类型 -->
<view>num:{{num}}</view>
<!-- 3.布尔值 -->
<view>isGirl:{{isGirl}}</view>
<!-- 4.对象 -->
<view>person:{{person}}</view>
<view>age:{{person.age}}</view>
<!-- 5.在标签的属性中使用,控制台Wxml中查看 -->
<view data-num="{{num}}">自定义属性使用</view>
<!-- 6.使用bool类型充当属性 checked -->
<view>
<!-- 未选中 -->
<view><checkbox >默认未选中</checkbox></view>
<!-- 选中 -->
<view><checkbox checked>默认选中</checkbox></view>
<!-- 改变属性,未选中, 属性写法中不能用空格-->
<view><checkbox checked="{{isGirl}}">改变属性</checkbox></view>
</view>
<view>-------------------------</view>
<!-- 7.运算 ==> 表达示/语句
1.可以在花括号中加入表达式
2.指的是简单的运算(数字运算/字符串拼接/逻辑运算等),
1.数字的加减
2.字符串的拼接
3.三元表达式
3.语句,代码段
1.if else
2.switch
3.do while
4.for
-->
<view>{{1+2}}</view>
<view>{{"1"+"2"}}</view>
<view>-------------------------</view>
<!-- 8.列表循环
1.wx:for="{{数组}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2.wx:key="唯一值",用来提同渲染性能
1.wx:key 绑定一个普通字符串的时候,这个字符串是循环数组中不重复的对象
2.wx:key="*this" 表示是一个普通数组 *this表是是循环项
3.只有一层循环时可以不用写(wx:for-item="item" wx:for-index="index")这两项
-->
<view>列表循环</view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引:{{index+1}}--姓名:{{item.name}}
</view>
<view>-------------------------</view>
<!-- 只有一层循环时可以不用写(wx:for-item="item" wx:for-index="index")这两项-->
<view wx:for="{{list}}"
wx:key="id">
索引:{{index+1}}--姓名:{{item.name}}
</view>
<view>-------------------------</view>
<!-- 9.对象循环
1.wx:for="{{对象}}" wx:for-item="对象的值value" wx:for-index="对象的属性key"
-->
<view>对象循环</view>
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="name">
{{key}}:{{value}}
</view>
<!-- 10.block占位标签写代码时有,渲染时就没有了 -->
<!-- 11.条件渲染 if, else, if else
1.wx:if="{{true/false}}"
wx:elif="{{true/false}}"
wx:else
2.hidden:true隐藏/false为显示
3.使用场景
1.当标签不频繁切换显示优先使用(直接把标签从结构中移除) wx:if
2.当标签频繁切换显示优先使用 hidden
1.通过样式切换显示,display: none;
2.hidden属性不能与样式display一起使用,否则会被覆盖,hidden就不起作用了
-->
<view>-------------------------</view>
<view>条件渲染</view>
<view wx:if="{{true}}">true显示</view>
<view wx:if="{{false}}">false不显示</view>
<view>-------------------------</view>
<view wx:if="{{false}}">false不显示</view>
<view wx:elif="{{false}}">false不显示</view>
<view wx:else>else显示</view>
<view>-------------------------</view>
<view hidden="{{false}}">hidden为true隐藏/false为显示</view>
<view hidden>hidden为true隐藏/false为显示</view>
block.wxml
微信小程序(三)-事件绑定
微信小程序(二)-语法学习的更多相关文章
- 微信小程序开发:学习笔记[2]——WXML模板
微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...
- 图片的URL上传至阿里云OSS操作(微信小程序二维码返回的二进制上传到OSS)
当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作 把url中的图片文件下载到本地(或者上传到私有云中) public String uploadUrlToOss ...
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
- 微信小程序开发:学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- 微信小程序开发:学习笔记[1]——Hello World
微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
随机推荐
- Kubernetes --(k8s)yml 文件
认识yml文件 yaml文件语法 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格. 缩进的空格数目不重要,只要相同层级的元素左侧对齐即可 # 表示注释,从这个字符一直到行尾 ...
- pythonchallenge总述
Pythonchallenge是一个过关式的解谜站点,使用的是经典在线解谜站点Not Pr0n的模式:根据提示找出下一关的网页地址.和Not Pr0n不同的是,在每一关里你都需要编写程序来寻找答案.虽 ...
- xls与csv文件的区别
CSV是文本文件,用记事本就能打开.XLS 是二进制的文件只有用 EXCEL 才能打开:CSV 文件格式只能保存活动工作表中的单元格所显示的文本和数值.XLS 中所有的数据行和字符都将保存.数据列以逗 ...
- HDU - 2328 Corporate Identity(kmp+暴力)
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2328 题意:多组输入,n==0结束.给出n个字符串,求最长公共子串,长度相等则求字典序最小. 题解:(居 ...
- C - Last Digit
Description The function f(n, k) is defined by f(n, k) = 1k + 2k + 3k +...+ nk. If you know the valu ...
- Educational Codeforces Round 91 (Rated for Div. 2) B. Universal Solution (贪心)
题意:石头剪刀布,bot有一串字符,表示他要出什么,你需要事先确定你的出招方案,然后遍历bot的字符串,从\(i\)位置开始跑一个循环,每次跑都要记录你赢的次数贡献给\(sum\),现要求\(\fra ...
- 2.使用jenkins自动构建并发布应用到k8s集群
作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-06-21 14:39:01 星期五 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...
- nextLine()和next()的区别和使用方法
最近在笔试,刷剑指Offer时,都是只需要把方法实现了就行.但是!!!笔试时候会发现,大部分会要求你把main函数也code出来,真是醉了,第一次笔试时候搞的晕乎乎的..... 废话不多说,那么在写输 ...
- unity编辑器扩展学习
扩展编辑器实际上就是在unity菜单栏中添加一些按钮,可以一键执行一些重复性的工作. 一.添加按钮 1.简单使用MenuItem特性 using UnityEngine; using UnityEdi ...
- 深入理解gradle中的task
目录 简介 定义task tasks 集合类 Task 之间的依赖 定义task之间的顺序 给task一些描述 task的条件执行 task rule Finalizer tasks 总结 深入理解g ...