❤️小程序入门基础(一)❤️
事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
事件的使用方式
- 在组件中绑定一个事件处理函数。
如bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
- 在相应的Page定义中写上相应的事件处理函数,参数是event。
- 在小程序中vue中携带参数的方式会在小程序中报错,必须通过, data-自定义属性名 =“参数”
- 通过 函数内自带的event事件源来获取, data-自定义属性名 =“参数” 传递过来的参数
- 最好自定义属性名为小写,默认最好event中转换为小写获取
- data-back-color 默认event里自动转换为驼峰命名
Page({tapName: function(event) {console.log(event)}
})
修改data中内容 : this.setData({
属性: 要改变的值
}) 用来改变小程序data中的属性值
在小程序中所有事件都是 bind开头
WXML语法
数据绑定
wxml
<view> {{ message }} </view>
wx的js
Page({data: {message: 'Hello 靓仔!'}
})
组件属性(需要在双引号之内)
<view id="item-{{mess}}"> </view>
Page({data: {mess:"2"}
})
wx:If控制属性
<view wx:if="{{flag}}"> </view>
Page({data: {flag: true}
})
Boolean值决定
true:boolean 类型的 true,代表真值。
false: boolean 类型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked=“false”,其计算结果是一个字符串,转成 boolean 类型后代表真值
运算
可以在 {{}} 内进行简单的运算,支持的有如下几种方式:
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
Number运算
<view> {{a + b}} + {{c}} + d </view>
Page({data: {a: 1,b: 2,c: 3}
})
view中的内容为 3 + 3 + d
。
逻辑判断
<view wx:if="{{length > 5}}"> </view>
String运算
<view>{{"hello" + name}}</view>
Page({data:{name: 'MINA'}
})
数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({data: {object: {key: 'Hello '},array: ['MINA']}
})
组合
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
数组 Array
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({data: {zero: 0}
})
最终组合成数组[0, 1, 2, 3, 4]
。
对象Object
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2}
})
最终组合成的对象是 {for: 1, bar: 2}
也可以用扩展运算符 ...
来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {c: 3,d: 4}}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}
。
如果对象的 key 和 value 相同,也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar'}
})
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}
。
注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {b: 3,c: 4},a: 5}
})
最终组合成的对象是 {a: 5, b: 3, c: 6}
。
注意: 花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}
</view>
列表渲染
微信 wx:for
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
<view wx:for="{{array}}">{{index}}: {{item.message}}
</view>
Page({data: {array: [{message: 'foo',}, {message: 'bar'}]}
})
使用 wx:for-item
可以指定数组当前元素的变量名,
使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>
wx:for
也可以嵌套,下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view>
</view>
微信 block使用
类似 block wx:if
,也可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>
微信key wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
示例代码:
在开发者工具中预览效果
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({data: {objectArray: [{id: 5, unique: 'unique_5'},{id: 4, unique: 'unique_4'},{id: 3, unique: 'unique_3'},{id: 2, unique: 'unique_2'},{id: 1, unique: 'unique_1'},{id: 0, unique: 'unique_0'},],numberArray: [1, 2, 3, 4]},switch: function(e) {const length = this.data.objectArray.lengthfor (let i = 0; i < length; ++i) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.objectArray[x]this.data.objectArray[x] = this.data.objectArray[y]this.data.objectArray[y] = temp}this.setData({objectArray: this.data.objectArray})},addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},addNumberToFront: function(e){this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}
})
注意:
当 wx:for
的值为字符串时,会将字符串解析成字符串数组
<view wx:for="array">{{item}}
</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">{{item}}
</view>
注意: 花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >{{item}}
</view>
微信wx:if 条件渲染
wx:if
在框架中,使用 wx:if=""
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}"><view> view1 </view><view> view2 </view>
</block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wx:if
vs hidden
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
总结:
学过vue的小伙伴再学习小程序是不so easy ,小程序,入门真的非常简单.高度和咱们的html css等相似学起来也非常丝滑.
大家记得来了点赞评论哦.
❤️小程序入门基础(一)❤️相关推荐
- 微信小程序入门基础教程
准备工作 要开发微信小程序之前,需要做一些准备工作,首先进入https://mp.weixin.qq.com/debug/wxadoc/dev/index.html去下载快速开发源码包 然后再进入ht ...
- ❤️小程序入门基础(二)❤️(个人学习笔记)
基本组件使用 cover-image 基础库 1.4.0 开始支持,低版本需做兼容处理. 覆盖在原生组件之上的图片视图. 目前原生组件均已支持同层渲染,建议使用 image 替代.可覆盖的原生组件同c ...
- 知乎爆赞!4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》,你学废了吗?
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
- 微信小程序零基础入门(上)
目录 第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作 第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
- 【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】
微信小程序入门 文章目录 微信小程序入门 前言 一.小程序的概述 1.小程序简介 2.小程序诞生 3.小程序功能 4.小程序创建步骤 二.小程序的准备工作 1.注册开发者账号 2.小程序信息完善 3. ...
- 小程序真机调试访问不了接口_小程序入门
之前写了一个去水印的小程序,详情可查看「短视频去水印工具小程序版-去水印Pro版」一文,我个人对小程序也是从完全陌生到入门阶段,这篇文章就把入门的过程和遇到的问题记录一下. 一.小程序注册 想要开发小 ...
- 微信小程序入门---01
目录 微信小程序入门 一.小程序简介 二.第一个小程序 二.小程序代码的构成 三.WXML模块 四.WXSS 样式 五.JS 逻辑交互 六.组件 七.API 八.WXML 模板语法 - 数据绑定 九. ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
最新文章
- 分析JDK源码 | Java Object
- IOS中实现设备摇动检测
- web开发中常用的概念
- 柴油机计算机故障,柴油机故障论文,关于6105小型高速柴油机常见故障处理相关参考文献资料-免费论文范文...
- PADS Layout的一个鼠标小技巧
- faster rcnn学习之rpn 的生成
- Win7安装oracle 10 g
- CentOS7.5 Linux搭建全文检索--Solr7.4.0单机服务
- 循环结果添加到集合_Excel VBA 8.4 Python中有集合直接获取唯一值,那Exce中可以吗?...
- 命令端口C++检测本地网络端口占用
- 使用ASP.NET Atlas ItemView控件显示集合中的单个数据
- office2013安装包下载,专业版完整版官方原版
- linux 山东大学 试卷_2020超星尔雅战略管理(山东大学)作业题库
- vs2008 sp1补丁安装到最后一点点的时候,就无法安装下去了 解决方法[转]
- Eclipse官方下载及配置流程
- 利用python进行正球面的大圆航程与横向线航程计算
- bind dlz mysql ptr_bind-dlz结合mysql实现智能DNS
- linux6.5安装中文字体,Linux(CentOS6.5)系统安装Windows字体
- html网页页尾,终于认识网页页尾设计注意技巧
- python 爬取亚马逊评论_用Python爬取了三大相亲软件评论区,结果...
热门文章
- 优信与汽车之家二手车达成合作 将在交易解决方案等方面展开合作
- Unity3d嵌入web网页
- 写树算法的套路框架(摘抄labuladong大神)
- groovy 使用变量值作为 map 的key--需要注意的
- 深入理解 JavaScript 错误和堆栈追踪
- yshon对讲机如何调频率_对讲机频率如何设置?
- 使用CGLib实现动态代理
- 昆明钟英高中2021年高考成绩查询,昆明多所高中高考成绩一览
- (已解决)多卡训练时报错RuntimeError: grad can be implicitly created only for scalar outputs
- 粗读MixMo: Mixing Multiple Inputs for Multiple Outputs via Deep Subnetworks