117.【微信小程序 - 01】（五）-阿里云开发者社区

(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

使用使用新版的组件样式

117.【微信小程序 - 01】（五）