(6).bindinput的语法格式
- 绑定Input
在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:
- 通过 bindinput,可以为文本框输入事件。
- 在页面的.js文件中定义事件处理函数。
e.detail.value拿到文本框的值
list.wxml
<!--pages/list/list.wxml--> <input bindinput="InputHandler" />
list.js
// 定义文本框的事件处理函数 InputHandler(e){ console.log(e) console.log(e.detail.value) },
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world', ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46', random: Math.random()*10, count:0 }, // 定义文本框的事件处理函数 InputHandler(e){ console.log(e) console.log(e.detail.value) }, })
event获取前端传递过来的值
2. 实现文本框和data之间的数据同步
实现步骤:
- 定义数据
Page({ data: { msg:'你好' }, })
- 渲染结构
<!--pages/list/list.wxml--> <input bindinput="InputHandler" value="{{msg}}"/>
- 美化样式
input{ border: 1px solid red; margin: 5px; padding: 5px; }
- 绑定input事件处理函数
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { msg:'你好' }, // 定义文本框的事件处理函数 InputHandler(e){ console.log('event',e) console.log('this',this) this.setData({ msg:e.detail.value }) console.log(this.data.msg) }, })
3.WXML模板语法- (条件渲染)
(1).wx:if初步介绍
在小程序中，使用 wx:if="{{flag}}"来判断是否需要渲染该代码块。
也可以使用wx:elif和wx:else来添加else判断。
lists.wxml
<!--pages/list/list.wxml--> <view wx:if="{{type==1}}">男</view> <view wx:elif="{{type==2}}">女</view> <view wx:else>保密</view>
lists.js
// pages/list/list.js Page({ data: { type:3 }, })
(2).结合block标签使用 wx:if
如果要一次控制多个组件的展示与隐藏，可以使用一个block标签将多个组件包装起来，并在block标签上使用wx:if控制属性。注意block并不是一个组件，他只是一个包裹性质的容器，不会再页面中做任何渲染。
換個説法就是說 不會占用我們的空間位置。
<!--pages/list/list.wxml--> <block wx:if="{{true}}"> <view>男</view> <view>女</view> <view>保密</view> </block>
(3).hidden初步使用
在小程序中，直接使用 hidden="{{flag}}"也能控制元素的演示与隐藏。
<!--pages/list/list.wxml--> <view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>
(4).wx:if与hidden的对比
- 运行方式不同:
- wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏。(移除)
- hidden以切换样式的方式 (display: none/block),控制元素的显示与隐藏(类似于 v-show)
- 使用建议
- 频繁的切换时，建议使用hidden
- 控制条件比较复杂，可以使用 wx:if
4.WXML模板语法 - (列表渲染)
(1).wx:for基本使用
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。
<!--pages/list/list.wxml--> <view wx:for="{{arr1}}"> 索引: {{index}},item值是:{{item}} </view>
默认情况下，当前循环项的索引用index表示；当前循环项用item表示。
(2).手动指定索引和当前项的变量名
- 使用
wx:for-index可以指定循环项的索引的变量名。 - 使用
wx:for-item可以指定当前项的变量名。
假如说制定完名字之后，下面的数据一定要使用命名之后的名字。否则为空
<!--pages/list/list.wxml--> <view wx:for="{{arr1}}" wx:for-index="Index" wx:for-item="Item"> 索引: {{Index}},item值是:{{Item}} </view>
(3). wx:key的使用
类似于Vue列表渲染中的 : key,小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的Key值，从而提升渲染的效率。
list.wxml
<!--pages/list/list.wxml--> <view wx:for="{{arr}}" wx:key="id"> {{item.id}} - {{item.name}} </view>
lists.js
Page({ /** * 页面的初始数据 */ data: { arr:[ {id:'001',name:'小明'}, {id:'002',name:'小红'}, {id:'003',name:'小黑'}, ] }, }]
5.WXSS模板样式-(RPX)
(1).什么是WXSS
WXSS是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。CSS与WXSS的关系是交集。WXSS扩展的特性是:
rpx 尺寸单位@impory 样式导入
(2).什么是rpx尺寸单位
rpx(resonsive pixel) 是微信小程序独有的，用来解决屏幕适配的尺寸单位。
小程序在不同的设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
- rpx与px之间的单位换算
在iphone6上，屏幕的宽度为375px,共有750个物理像素点，等分为750rpx。
750rpx=375px=750物理像素点 1px=0.5px=1物理像素点
在开发小程序的额时候，设计师可以用iphone6作为视觉稿的标准
6.WXSS 模板样式 - (Import)
使用WXSS通过的 @import 语法，可以导入外联的样式表。
(1).@import 的语法格式
@import后根需要导入的外联样式表的绝对路径，用 ; 表示语句结束。
commons/common.wxss
/* 定义一个公共样式表 */ .username{ color: red; }
lists.wxss 引入外部样式，但是假如内部也有同名样式的话，就会覆盖掉外部的
@import "/commons/conmon.wxss" .username{ color: aqua; }
lists.wxml
<!--pages/list/list.wxml--> <view> <text class="username">{{msg}}</text> </view>
7.WXSS模板样式-(CSS)
(1).全局样式
定义在app.wxss中的样式为全局样式，作用域每一个页面。
app.wxss: 我们给全局view标签设置一个样式
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } view{ padding: 10rpx; margin: 10rpx; background-color: aquamarine; }
test.wxml
<!--pages/test/test.wxml--> <text>pages/test/test.wxml</text> <view> hello jsxs </view>
(2).局部样式
在页面的 .wxss文件中定义的样式为局部样式，只作用于当前页面。
假如一个页面又存在全局样式和局部样式的时候，那么局部样式就会覆盖掉全局样式。当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式
8.全局配置- (导航栏和tabBar)
(1).全局配置文件及常用的配置项
小程序根目录下的 app.json文件时小程序的全局配置文件。常用的配置项如下:
pges
- 记录当前小程序所有页面的存放路径
window
- 全局设置小程序窗口的外观
tabBar
- 设置小程序底部的 tabBar效果
style
- 使用使用新版的组件样式
