微信小程序中基础入门

一、数据绑定

1.数据绑定的基本原则

① 在data中定义数据（在.js文件）

 

② 在wxml中使用数据

 

2.Mustache语法的格式

把data中的数据绑定到页面中进行渲染，使用MUstache语法（双大括号，可以理解为vue中的插值表达式）

3.Mustache语法的主要应用场景如下：

① 绑定内容

② 绑定属性

③ 运算（三元运算，算术运算等）

4.动态绑定属性（注：无需：）

 

 二、事件绑定

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

常用事件：

 事件对象的属性列表：

当事件回调触发的时候，会收到一个事件对象event，他的属性如下：

 bindtap语法格式：

 三、事件传参与数据同步

1.在事件处理函数中为data中的数据赋值

通过调用this.setData（dataObject）方法，可以给页面data中的数据重新赋值。

//wxml内容
<button type="primary" bindtap="btnCount">点击+1</button>
//.js文件内容
data: {
    count:0
  },
  
btnCount(){
this.setData({
  count:this.data.count+1
})
},

2.事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，最终可以通过event.target.dataset.参数名 即可获取到具体参数值。

<!-- wxml内容 data-自定义属性名 不加{{}}传的是字符串 -->
<button type="primary" bindtap="btnCount" data-info="{{2}}">点击传参</button>
//.js内容
data: {
    count:0
  },
  
btnCount(e){
this.setData({
  count:this.data.count+e.target.dataset.info
})
},

 3.bindinput的语法格式

<!-- wxml内容 -->
<input type="text" bindinput="getValue"/>

//.js文件 
//实时拿到输入框值
getValue(e){
console.log(e.detail.value);
},

实现输入框和data之间的数据同步

<!-- wxml内容 第二步 -->
<input value="{{info}}" type="text" bindinput="getValue"/>
/* .wxss文件 第三步 */
input{
  border:1px solid black;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

//.js  第一步
 data: {
    info:"你好"
  },
  
//第四步
getValue(e){
this.setData({
  info:e.detail.value
})
},

四、条件渲染

1.wx:if="{{属性名}}"，wx:elif和wx:else

<view wx:if="{{type===1}}">
  A
</view>
<view wx:elif="{{type===2}}">
  B
</view>
<view wx:else>
  C
</view>


data: {
   type:1
  },

2.结合<block>使用wx:if

如果要一次性控制多个组件的显示与隐藏，可以使用此标签，将多个组件包起来，并在标签上使用wx:if控制属性（注：<block>不是一个组件，只是一个包裹容器，不会再页面上有任何渲染）

<block wx:if="{{false}}">
  <view>
    A
  </view>
  <view>
    B
  </view>
</block>

3.hidden

在小程序中，直接使用hidden="{{flag}}",也能控制属性的显示与隐藏

4.wx:if与hidden对比

① 运行方式不同

wx:if：动态的创建和移除元素，控制元素的显示与隐藏

hidden：以（display：none/block）控制元素的显示与隐藏

② 使用建议

频繁切换时，使用hidden

控制条件复杂时，建议wx:if

五、列表渲染

<view wx:for="{{arr}}">
  index为{{index}}，item为{{item}}
</view>


  data: {
    arr:["苹果","香蕉","橘子"]
  },

1.手动指定索引和当前项变量名

使用wx:for-index可以指定当前项的索引的变量名

使用wx:for-item可以指定当前项的变量名

<view wx:for="{{arr}}" wx:for-index="inx" wx:for-item="name">
  index为{{inx}}，item为{{name}}
</view>

2.wx：key的使用

类似于vue列表渲染中的:key,小程序渲染的列表也建议指定唯一key值，从而提高渲染效率

<view wx:for="{{list}}" wx:key="id">
  {{item.name}}
</view>


 list:[
      {id:1,name:"张三"},
      {id:2,name:"李四"},
      {id:3,name:"王二"},
    ]

六、rpx介绍

1.什么是rpx尺寸单位

rpx是微信小程序独有的，用来解决屏适配的尺寸单位。

2.rpx的实现原理

rpx的实现原理非常简单：鉴于不同的设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有的设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

① 在较小的设备上，1rpx所代表的宽度较小。

② 在较大的设备上，1rpx所代表的宽度较大。

七、样式导入

使用wxss提供的@import语法，可以导入外联的样式表。

1.@import的语法格式

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

1.定义类名
<view class="username" wx:for="{{list}}" wx:key="id">
  {{item.name}}
</view>

2.新建一个以.wxss为后缀公共文件，并写入样式
.username{
  color:red;
}

3.在自带的.wxss文件导入
@import "../list/common/common.wxss";

2.全局样式

定义在app.wxss中的样式为全局样式，作用于每一个页面。

首先在app.json定义一个新的文件
  "pages/test/test",

在新文件.wxml中和list文件的.wxml中写入内容
<view>123</view>

最后在app.wxss文件定义样式
view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: aqua;
}

2.局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

注意：

① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。

② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。