原生小程序基础语法

迷南。 2023-02-18 12:59 180阅读 0赞

## 原生小程序基础语法： ##

### 数据绑定 ###

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

data: { 
        num: 1000,
        isHide: true   
      },
    
    <view data-num="{ {num}}"></view>
    //=>查看控制台 Wxml

> 使用`bool`类型充当属性 checked
> 
> 1.  字符串和花括号之间一定不要存在空格，否则可能会导致识别失败。
> 
> 以下写法就是`错误示范`：
> 
>     <checkbox checked="   {
>         {isHide}}"></checkbox>

### 运算 ###

### 列表循环 ###

> `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”\]
> 
> 1.  当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
> 
> `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`
> 
> 直接把标签从页面结构给移除掉
> 
> 1.  当标签频繁的切换显示的时候，优先使用 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`

*  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` 获取输入框的值
> 
> 1.  `bindtap`
> 
> 1.  `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"`