从零开始 | 原生微信小程序开发（三）

！！！以下组件化开发重点内容

** 语法

** 事件处理 event

** 组件化开发

语法

wxml

1. Mustache语法

• 不同点：不能在行内标签中调用函数
• date：显示的是年月日 如 2022/10/30
• toLocaleDateString()：转换为字符串

2. 逻辑判断

wx: if wx: elif (else if) wx: else

• 注意：当条件判断为 false 时，组件不会渲染，即不存在DOM树中，这一点与vue一样

3. hidden属性

• 每个组件都有该属性，ture表示隐藏
• 该属性本质是通过display:none 实现显示与隐藏，所以存在DOM树中，与条件判断区分开

4. 列表渲染

wx:for wx:key

• 注意：<block/>不是组件，仅仅是包装元素，不会在页面做任何渲染，只接受控制属性
• block的好处

        将需要遍历或判断的内容进行包裹

        将遍历和判断的属性放在block标签中，不影响普通属性的阅读，提高代码可读性

• key的作用：提供性能

wxs

1. 是什么？

• (WeiXin Script)小程序的脚本语言，结合WXML可以构造出页面的结构

2. 为什么要使用？

• 在WXML中不能直接调用 Page / Component 中定义的函数，因为双线程的原因
• 希望使用函数来处理WXML中的数据(类似Vue中的过滤器)，这时候就使用WXS

3. 限制和特点

• 不依赖运行时的基础库版本，可在所有版本的小程序运行
• 运行环境与其他js代码是隔离的，WXS中不能调用其他js文件中定义的函数，也不能调用小程序提供的API

4. 两种写法

• 支持ES5，即不能使用箭头函数等ES6写法

标签法

• 在WXML文件内将代码直接写到标签内
• 需要注意的是：

        module名：为后面调用函数时指定是在哪个模块定义的

        导出：使用commonJS进行导出

        调用时，函数前面必须写对应的module名

<wxs module="format">
  // 一定要有module 否则报错
  function formatPrice(e) {
    return '$' + e
  }
// 必须导出后才可以被其他地方调用 而且是commonJS导出
module.exports = {
  formatPrice: formatPrice
}
</wxs>

// 调用
<block wx:for="{{blackpink}}" wx:key="id">
    <view>{{item.name}} - {{format.formatPrice(item.level)}}</view> 
  </block>

独立文件，通过src引入

• 注意：

        导出的写法

        reduce函数，用来遍历计算数组，记得第二个参数，初始值是什么，如下：0

// 调用
<block wx:for="{{blackpink}}" wx:key="id">
    <view>{{item.name}} - {{formatt.formatPricee(item.level)}}</view> 
</block>
<view>总值：{{formatt.calcLevel(blackpink)}}</view>

事件处理

event

1. 某个事件触发时，会产生一个事件对象，并且这个对象被传入到回调函数中，有哪些属性？

2. target 和 currentTarget 的区别

• 注意在获得自定义属性时，最好通过currentTarget获得

3. 参数传递

捕获和冒泡阶段

1. 当页面产生一个事件时，分为捕获阶段和冒泡阶段

2. 通过控制台输出可以查看该过程

• 一般我们采用冒泡即可
• 将bind 改为catch 阻止事件进一步传递

mark

组件化开发

• 让我们代码更加方便组织和管理，扩展性也更强

创建组件

1. 可单独创建文件夹

• 在文件夹中分别创建对应文件夹，再右键选择创建Component
• 会生成四个文件
• 其中最重要的是json配置文件，这与其他Page文件生成的文件不同

2. 使用自定义组件

• 在哪个页面使用，对应的json配置文件需要写入路径
• 注意：使用相对路径，否则报错，很奇怪

3. 细节：

• 自定义组件和页面所在项目根目录不能以“wx-”为前缀，否则报错
• 若在app.json中声明某个组件，则所有页面和组件可以直接使用，不建议

组件样式细节

组件的通信

1. 自定义组件内容显示

properties属性

• 支持的类型：String、Number、Boolean、Object、Array、null( 不限类型 )

2. 组件发出自定义事件

• 组件内的函数都是写在methods中，与页面不一样
• 在案例中，复习查看，理解逻辑