原生小程序基础语法

原生小程序基础语法：

数据绑定

data中定义的数据，在标签的属性中使用

data: {
    num: 1000,
    isHide: true   
  },

<view data-num="{{num}}"></view>
//=>查看控制台 Wxml

使用bool类型充当属性 checked

1. 字符串和花括号之间一定不要存在空格，否则可能会导致识别失败。

以下写法就是错误示范：

<checkbox checked="   {{isHide}}"></checkbox>

运算

<view>{{10%2===0?"偶数":"奇数"}}</view>

列表循环

wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"

wx:key="唯一的值" 用来提高列表渲染的性能

1. wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
2. wx:key = “*this” 就表示 你的数组 是一个普通的数组 *this 表示是 循环项

例如：普通的数组 [1,2,3,4,5] [“1”,“222”,“阿道夫”,“aaa”]

3. 当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名

wx:for-item="item"
wx:for-index="index"

小程序也会把 循环项的名称 和 索引的名称 也称为 item 和 index

只有一层循环的话：（wx:for-item="item" ；wx:for-index="index"）可以省略

• 数组循环

data: {
	lsit: [
      {
        title: "11",
        id: 0
      },
      {
        title: "22",
         id: 1
      }
    ]
}


<block 
wx:for="{{lsit}}"
wx:key="id"
>{{item.title}}</block>

• 对象循环

data: {
     person: {
      num: 1000,
      isHide: true
    }
}

<block
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="*this"
>
{{value}}
</block>

条件渲染

什么场景下用哪个？

1. 当标签不是频繁的切换显示，优先使用 wx:if

直接把标签从页面结构给移除掉

2. 当标签频繁的切换显示的时候，优先使用 hidden

通过添加样式的方式来切换显示 display: none; display: block;

hidden 属性 不要和样式 display 一起使用；否则hidden属性失效

例如：

<view hidden style="display: flex;">hidden1</view>

<view hidden="{{false}}" style="display: flex;">hidden2</view>

• wx:if

<view wx:if="{{true}}">111</view>


<view>
  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{false}}">2</view>
  <view wx:else="{{true}}">3</view>
</view>

• hidden

1. 在标签上直接加入属性 hidden
2. hidden=“{{true}}”

<view hidden>hidden1</view>

<view hidden="{{false}}">hidden2</view>

事件绑定

绑定事件时不能带参数、不能带括号；以下是错误写法：

<input type="text" bindinput="handleInput(1)"></input>

<button bindtap="handle(11)">点击</button>

解决方法：通过自定义属性的方式来传递参数；

​ 通过 e.currentTarget.dataset 接收参数

<input type="text" bindinput="handleInput" data-item="100"></input>

<button bindtap="handle" data-index="12">点击</button>

1. bindinput
   • 通过 e.detail.value 获取输入框的值

2. bindtap

3. bindchange

尺寸单位

1px = 2rpx 1rpx = 0.5px

存在一个设计稿pageWidth 元素宽度 100px

1px = 750rpx / pageWidth

元素宽度 100px = 750rpx * 100 / pageWidth

假设：pageWidth = 375px

利用一个属性calc属性 css 和 wxss 都支持 一个属性

• 750 和 rpx 中间不要留空格
• 运算符的两边也不要留空格

元素宽度100px：

width:calc(750rpx * 100 / 375)

样式导入

使用 @import 语句可以导入外联样式表，只支持相对路径

@import "common.wxss"