1. 花括号和引号之间如果有空格,将最终被解析成为字符串
<view>
<!-- // 字符串和花括号之间不能有空格,否则会识别失败 -->
<!-- <checkbox class="" value="" checked=" {{ischeck}}" color=""> -->
<checkbox class="" value="" checked="{{**ischeck**}}" color="">
</checkbox>
</view>
2.wx:for
项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名 下标变量名默认为 index; wx:for--index 可以指定数组当前下标的变量名 wx:key ⽤来提⾼数组渲染的性能wx:key 绑定的值 有如下选择 1. string 类型,表⽰ 循环项中的唯⼀属性 如
list: [{
id: 0,
name: "豪1"
},
{
id: 1,
name: "豪2"
},
{
id: 2,
name: "豪3"
},
]
wx:key="id"
view wx:for="{{**list**}}" wx:for-item="item" wx:for-index="index" wx:key="id" style="white-space:pre-wrap">
<!-- 微信小程序<text>和<view>标签并不能让文本自动换行,微信小程序也不支持 <br/>换行 -->
索引:{{**index**}}
姓名:{{**item** **.** **name**}}
</view>
只有一层循环默认情况下可以不写wx:for-item="item" wx:for-index="index" wx:key="id" 是为了提高运行效率
3. 对象循环
wx:for”{{object}}” wx:for-item=”对象的值” wx:for-index=“对象的属性” 循环对象的时候最好把item和index的名称修改一下 wx:for-item=“vlue” wx:for-index=“key”;
4.保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
<view>
<block wx:for="{{ [1,2,3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
</view>
5.渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
6.wx:if 在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
7. hidden
<view hidden="{{condition}}"> True </view>
应用场景:
1.当标签不是频繁地切换显示,优先使用 wx:if 直接把标签从页面中移除
2.当标签被频繁切换显示,优先使用hidden 通过添加样式的方式切换显示, hidden属性不要和样式display一起使用,会被覆盖(hidden本身用到的就是display:none)
8.事件绑定
1.需要给input标签绑定 input事件
绑定关键字 bindinput(bind关键字开头的事件)
2 .如何获取 输入框的值
通过事件源对象来获取
e.detail.value
3 .输入框的值 赋值到 data当中
不能直接
this.data.num=e.detail.value
this.num=e.detail.value
正确的写法
this.setData({
num:e.detail.value
})
4.需要加入一个点击事件
1. bindtap
2.无法在小程序当中的 事件中 直接传参
3. 通过自定义属性的方式来传递参数
data-operation="{{1}}"
4. 事件源中获取 自定义属性
8.image标签
默认宽度为320px,高度240px;
支持懒加载
mode的13种模式:
9.swiper微信轮播图组件
swiper-item
10.navigator(超链接标签)
open-type的有效值
11.尺寸单位
rpx(responsive pixel):可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
12.样式导入
wxss中直接就⽀持,样式导⼊功能。也可以和less中的导⼊混⽤。使⽤@import语句可以导⼊外联样式表,只⽀持相对路径
13.小程序使用less
原⽣⼩程序不⽀持less,其他基于⼩程序的框架⼤体都⽀持,如wepy,mpvue,taro等。但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
1.编辑器是vscode
2.安装插件easy less
3.在vscode的设置中加入如下配置:
"less.compile": {
"compress": false,//是否压缩
"sourceMap": false,//是否生成map文件,有了这个可以在调试台看到less行数
"out": true, // 是否输出css文件,false为不输出
"outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
},
4.在要编写样式的地⽅,新建less⽂件,如index.less,然后正常编辑即可。
14.选择器
⼩程序不⽀持通配符 *