⼩程序
⼩程序
⼀、模板语⾔WXML
模板语⾔：⽂件后缀是.wxml.和HTML类似，主要作⽤：内容展⽰，数据渲染
<!--WXML⾮常类似于HTML-->
<!-- <view><image src="/img/1.jpg"></image></view> -->
<view>
<checkbox checked></checkbox>
</view>
⼆、数据绑定
<!-- 动态数据渲染
1、内容渲染：尖括号中间
2、属性值的数据渲染
3、数据来⾃于配套的.js⽂件中page的data属性的值
4、如果获取data⾥⾯的值，使⽤{{}}插值表达式
5、可以直接获取配套js数据
尖括号中间内容渲染-->
<!-- 1、内容渲染：尖括号中间 -->
<view>
<view>我叫：{{name}}</view>
<view>今年：{{age}}</view>
<view>⽉薪：{{salary}}</view>
<view>爱好：{{likes}}</view>
<view>婚否：{{isMarry==false? "⼤龄青年":"有对象"}}</view>
<view>⼥朋友标准：</view>
<view>{{girl.name}}</view>
<view>{{girl.sala}}</view>
</view>
<!-- 2、属性值的数据渲染
A、常规属性：class、id、name、checked
B、⾃定义属性：-->
<!-- 1、直接写值 -->
<view id="123"></view>
<!-- 2、渲染data⾥⾯的参数作为属性值注意：切记使⽤插值表达式{{}}获取data参数-->
<view id="{{salary}}">动态参数值</view>
<!-- 3、⾃定义数字属性 -->
<view data-num="123"></view>
<view data-str="{{name}}"></view>
<!-- 4、直接写值会默认为字符串类型如果要使⽤boolean，使⽤写法：{{布尔值}} ""和{}之间不能有空格-->
<checkbox checked="{{false}}">复选框</checkbox>
<checkbox checked="false">不写插值</checkbox>
三、逻辑语法
逻辑运算：取值渲染还是逻辑运算都要写在插值表达是中数字运算字符串拼接三元表达式<!-- 数字运算 -->
<view>每⽉总收⼊：{{salary + girl.sala}}</view>
<!-- 字符串拼接 -->
<view>{{name + "===" + girl.name}}</view>
<!-- 三元表达式 -->
<view>{{isMarry == false ? "⼤龄青年":"有对象"}}</view>
四、列表渲染
<!--
for(var i=0;i<10;i++){
只能拿到i下标
}
for(value of arr){
value是数组的值
}
for(key in arr)
wx:for
1、语法：wx:for="{{数组|对象}}"
2、下标：默认名叫index  使⽤加{{}}
3、循环项：默认名叫item  使⽤加{{}}
4、修改下标和循环项的默认名
修改下标：wx:for-index="名"
修改默认循环项：wx:for-item="名"
5、wx:key
A、即使不写也不会出现任何问题，只是调错⽅便
B、为数组制定⼀个唯⼀标识，提升遍历效率
C、写法:  wx:key="index"对于普通数组
wx:key="唯⼀值的属性"  对于对象
wx:key="*this" ⼀般加给数组，this指代数组中遍历出的唯⼀的item
-->
for循环
<view>
<!-- 1、写数字：效果是循环n次  index === item 循环出都是下标值-->
<view wx:for="{{10}}">{{index}} ==== {{item}}</view>
<!-- 循环普通数组 index下标  item是循环项-->
<view wx:for="{{arr}}" wx:key="index">{{index}} ==== {{item}}</view>
<view>=====循环对象=====</view>
<!-- 2、循环对象  index属性名  item属性值
修改下标：wx:for-index="名"
修改默认循环项：wx:for-item="名"
建议：循环对象时⼀定改index和item
-->
<view wx:for="{{girl}}" wx:for-index="key" wx:for-item="value">
{{key}} ==== {{value}}
</view>
<!-- 3、循环对象数组先循环数组，再循环对象 -->
<!-- 外层循环数组 -->
<view>======循环对象数组======</view>
<view wx:for="{{girls}}" wx:for-item="obj">
<!-- 内层循环对象 -->
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value">{{key}} === {{value}}</view>
</view>
<!-- 4、block：写的时候存在，编译的时候不存在 -->
<block wx:for="{{girls}}" wx:for-item="obj" wx:key="*this">
<!-- 内层循环对象 -->
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value" wx:key="age">{{key}} === {{value}}</view>  </block>
</view>
五、共有属性： wx:if|hidden
<!-- 逻辑判断： wx:if|hidden
if(条件表达式){
语句
}else if(条件表达式){
语句
}else{
}
1、条件表达式的结果是true|false
2、条件表达式之间要有顺序
3、if⼀定是只执⾏某⼀个
4、wxif语法:  wx:if="{{条件表达式}}"  wx:elif="{{条件表达式}}"  wx:else
5、w:if⾮常类似于vue的if
原理是根据条件表达式的结果进⾏创建渲染,(通过|true)或销毁页⾯(失败|false)元素
6、弊端：消耗过⼤
可以实现组合判断
>=10000 换⼀个
>=8000  卖⼀个
>=5000  不吃饭
>=3000  再买⼀车
-->
<view>
<view wx:if="{{sum >= 10000}}">换⼀个</view>
<view wx:elif="{{sum >= 8000}}">卖⼀个</view>
<view wx:elif="{{sum >= 5000}}">不吃饭</view>
<view wx:else>再买⼀车</view>
</view>
hidden:
<!-- hidden 隐藏  1、类似于vue的v-show，通过表达式的结果，来设置指定元素的display:none|block
2、基本语法：hidden="{{条件表达式}}" true隐藏  false显⽰
3、默认写法：只写hidden代表隐藏当前元素
false 不隐藏要显⽰  display:block;
true  要隐藏不显⽰  display:none;
-
->写文章的小程序
<view hidden="{{false}}">hidden隐藏测试</view>
两者区别
<!-- wx:if 和 hidden区别
1、wx:if根据条件表达式的结果进⾏创建渲染,(通过|true)或销毁页⾯(失败|false)元素
hidden通过表达式的结果，来设置指定元素的display:none|block 结果是false设置display:block显⽰
2、wx:if创建和销毁，销毁过⼤，hidden是设置display，销毁⼩
频繁切换⽤hidden，切换次数少⽤wx:if
-->
六、样式语法WXSS：
样式语法WXSS和css基本⼀致，例如选择器，样式设置，样式语法的⽂件后缀是.wxss
选择器
注意：‘通配选择器⽆法在⼩程序中使⽤，可以使⽤’
⼩程序组件与事件处理
组件是在 WXML 模板⽂件声明中使⽤的，WXML 的语法和 HTML 语法相似，⼩程序使⽤标签名来引⽤⼀个组件，通常包含开始标签和结束标签，该标签的属性⽤来描述该组件
组件是来构造WXML页⾯结构。组件类似HTML标签，但组件是HTML标签封装版，增加了很多的属性和⽅法
组件分类：1、基础组件(⼩程序⾃带组件) 2、⾃定义组件
<image mode="scaleToFill" src="img.png"></image>
对于⼀些容器组件，其内容可以声明在其开始标签和结束标签之间，也就是我们常说的组件嵌套
<view>
<image mode="scaleToFill" src="img.png"></image>
<view>
<view>1</view>
<view>2</view>
<view>3</view>
</view>
</view>
注意：所有组件名和属性都是⼩写，多个单词会以英⽂横杠 "-" 进⾏连接。
⼀、基础组件
基础组件分为以下⼋⼤类：
（1）、视图容器(View Container)
（2）、基础内容(Basic Content)
（3）、表单(Form)
（4）、导航(Navigation)
（5）、多媒体(Media)
（6）、地图(Map)
（7）、画布(Canvas)
（8）、客服会话
1、 view：代替原来的div标签，块级容器
<view hover-class="h_class">点我试试</view>
2、text:
(1)⽂本标签
(2)只能嵌套text
(3)长按⽂字可以复制(只有该标签有这个功能)
(4)可以对空格回车进⾏编码
space合法性
<!-- 1、长按⽂字复制selectable
2、对⽂本内容进⾏解码decode
-->
<text selectable decode>
text   123 < >
</text>
<!--1、view 块级容器，类似于div标签内部嵌套其他组件的
2、hove-class  当按下是给view增加⼀个样式类增加⼀个class值
具体的样式类的wxss效果还需要设置
3、hover-stay-time 效果持续时间默认400毫秒
4、hover-start-time 点击多久出现效果，默认50毫秒
5、hover-stop-propagation 阻⽌hover-class 冒泡阻⽌当前组件向上进⾏hover-class冒泡
-->
<!-- text  1、类似于span⾏级容器
2、text只能嵌套⾃⾝，不能嵌套其他组件
3、user-select 设置⽂字选择功能默认false
⽤法：1、user-select="{{true}}"    2、user-select
4、space 显⽰连续空格
space="ensp|emsp|nbsp"
5、decode 开启解码转义功能默认false
-->
3、image：mode、lazy-load 与 bindload 属性都是⼗分便捷的实现，可以说经过⼩程序的改造后，这个标签的功能⼤⼤超过了 img 标签。
A、图⽚标签，image组件默认宽度320px,⾼度240px
B、⽀持懒加载
<!-- image
1、封装了img图⽚的组件
2、src图⽚路径建议来⾃于⽹络服务器  oss  七⽜云默认会对图⽚进⾏缩放
3、image ⽆法直接设置⾼度的图⽚本⾝的⾼度就是最根本的
4、mode 进⾏图⽚的缩放和裁剪
scaleToFill默认值
aspectFit 保持纵横⽐缩放长边完全显⽰短边⾃适应
widthFix 缩放模式，宽度不变，⾼度⾃动变化保持原来宽⾼⽐不变
-->
<image  src="img.alicdn/imgextra/i1/6000000006807/O1CN01LUYFBI209eeYxvibd_!!6000000006807-0-octopus.jpg" mode="widthFix"></image>
4、swiper：内置轮播图组件，其中只可放置 swiper-item 组件
<!--  swiper
1、轮播图组件容器
2、内部能且仅能嵌套swiper-item 组件
3、autoplay 是否⾃动切换默认false
4、interval ⾃动切换时间间隔默认5000毫秒
5、circular 是否采衔接滑动默认false
6、swiper容器⾼度不能通过内部的容器给撑起来，只能⾃⼰设置默认宽⾼：100%  150px
设置⾼度公式：  calc(750rpx * 图⽚⾼度 / 图⽚宽度)  750rpx是屏幕宽度
-->
<swiper autoplay interval="5000" circular>
<swiper-item>
<image src="img.alicdn/imgextra/i1/6000000006807/O1CN01LUYFBI209eeYxvibd_!!6000000006807-0-octopus.jpg"></image>
</swiper-item>
<swiper-item>
<image src="img.alicdn/imgextra/i1/6000000001477/O1CN01YK3KnA1MmVcmKVGAC_!
!6000000001477-2-octopus.png"></image>
</swiper-item>
<swiper-item>
<image src="aecpm.alicdn/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></image>
</swiper-item>
</swiper>
5、swiper-item: 仅可放置在 swiper 组件中，宽⾼⾃动设置为 100%。
6、 navigator: 导航组件类似超链接标签。
<!-- navigator
1、导航组件类超链接
2、target 跳转⽬标：self(默认)跳转当前项⽬  miniProgram跳转其他⼩程序
3、url  地址
4、open-type 跳转⽅式默认navigate
navigate保留当前页⾯，跳转到应⽤的某个页⾯，到不能跳转tabBar页⾯，保留页⾯回退
redirect 关闭当前页⾯，跳转到应⽤内的某个页⾯，但是不允许跳转到 tabBar 页⾯。保留页⾯回退
switchTab 跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯
-->
<navigator url="/pages/demo1/demo1" >跳转轮播图</navigator>
<navigator url="/pages/demo1/demo1" open-type="redirect">跳转轮播图1(redirect)</navigator>
<navigator url="/pages/omments/comments" open-type="switchTab">跳转轮播图2(switchTab)</navigator>
7、 button: 按钮组件。
8、 icon：图标组件。组件属性的长度单位默认为 px，2.4.0 起⽀持传⼊单位(rpx/px)。
9、radio 单选组件，可以通过 color 属性来修改颜⾊。
radion-group 组件为单项选择器，内部由多个 radio 组成。
10、checkbox 为多选组件，可以通过 color 属性来修改颜⾊
checkbox-group 为多项选择器，checkbox 需要搭配 checkbox-group ⼀起使⽤，
⼆、⼩程序事件
事件机制是⼀种⾮常典型的通讯⽅式。可以令代码中的不同对象互相传递信息，也可以在应⽤的，不同层⾯进⾏沟通协作。
什么是事件？
(1)事件是视图层到逻辑层的通讯⽅式；
(2)事件可以将⽤户的⾏为反馈到逻辑层进⾏处理；
(3)事件可以绑定在组件上，当达到触发事件，就会执⾏逻辑层中对应的事件处理函数；
(4)事件对象可以携带额外信息，如 id, dataset, touches。
1、⼩程序事件绑定
A、我们为⼀个组件绑定⼀个事件处理函数，通过 bind 关键字来实现。如 bindtap、bindinput、bindchange 等，不同的组件⽀持不同的事件
<!--事件绑定bind-->
<!-- 1、需要给input标签绑定input事件绑定关键字bindinput
2、如何获取输⼊框的值：通过事件源来获取的  e.detail.value
3、把输⼊框的值赋值给data当中
不能直接 1、this.data.num =e.detail.value
2、this.num =e.detail.value
正确写法：this.setData({num:e.detail.value})
4、需要加⼊⼀个点击事件
1、bindtap
2、⽆法在⼩程序当中事件中直接传参
3、通过⾃定义属性的⽅式来传递参数
4、事件源中获取⾃定义属性
-->
<input type="text" bindinput="handInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
注意：1、handleinput 是⾃定义的 index.js ⾥⾃定义的函数，通过属性 bindinput 绑定了该函数
2、handleinput 函数和 data 是平级的；
3、事件绑定函数可以是⼀个数据绑定，如：<input bindinput="{{}}" placeholder="请输⼊姓名："/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。