微信小程序基础知识（二）

语法、属性和事件

Mustache语法

• 1、组件中插入内容；<view>{{message}}</view>；2、属性中判断Boolean:<view class="{{isfalse}}"></view>；3、有运算属性，可写表达式：<view class="{{isfalse ? 'true' : ''}}"></view>;

block介绍

• 不是组件（提升性能，可读性强），不渲染，只接受控制属性（wx:if；wx:for），包装元素的作用。在控制属性的控制下控制组件显示/隐藏或者重复。

wx:if控制属性与hidden的区别和选择（性能的提升）

• 区别：二者在显示时无区别；在隐藏时wx:if不会创建组件，而hidden在隐藏时会创建组件，通过设置组件的display:none属性来达到隐藏的效果。
• 选择：当组件的切换频率高时，使用hidden，这时不会由反复创建组件而浪费性能；切换频率不高时使用wx:if。

wx:for控制属性wx:key的作用

wx:key可以唯一标识wx:for中的元素，高效的更新虚拟DOM。

• 情况一：wx:for中的数据为静态时，wx:key的属性没有太大的影响。
• 情况二：wx:for中的数据增加或者有顺序的变化时，使用wx:key可以提升性能。wx:key可以唯一标识wx:for中的元素以保证在改变顺序或者增加元素后的特征和状态并以此来达到提高性能的作用。

 

 事件类型

事件类型优先级，这里只讨论正常状态，touchcancel不讨论。

• 点击时：touchstart>touchend>tap
• 移动时：touchstart>touchmove>touchend
• 长按时：touchstart>longpress>touchend

自定义组件

个人理解

• 内置组件：官方定义好的组件，含有一定的属性，方法和事件。
• 自定义组件：个人使用内置组件制定的，可以设定特定的属性，自定义组件可以发送事件给页面，页面可以获取自定义组件对象来进行操作。
• 理解：自定义组件让多人开发变的更加便捷，同时增强了代码的可复用性，对于数据的传递和使用也更加的灵活，相比于使用import或者include来引入文件方便很多。在定义好自定义组件后可以像使用内置组件一样进行操作；此外，在使用页面栈函数对数据的传递操作不便时，可以使用自定义组件对页面跳转时需要传递的参数（包含数组或者对象）进行存储，到需要引用数据的页面时再把数据取出来，这个我还没测试过，有兴趣的可以试一下，我想应当是可以的。

引用方式

• （1）创建自定义组件文件-->在自定义组件的.json文件中设置"component": true（默认是有的）-->在引用自定义组件的页面json文件中设置组件名和路径（"usingComponents":{ "my-detail":"/components/my-detail/my-detail" }）-->之后在页面的wxml文件中使用组件。
• （2）在app.json中引用自定义组件时所有页面都可使用，不用每个页面再单独引用。为了方便管理和维护，一般把使用频率高的放在app.json中。
• （3）自定义组件也可以引用自定义组件，引用方式同上。

  

使用方式

在需要使用的页面中直接写设置的组件名即可，可以传递设置的属性或者样式。

 自定义组件的设置

• 自定义组件设置完成后同样有四个文件夹，分别是wxml、wxss、json和js。这里的前三个文件和页面的相应文件夹一致。对于js文件则有不同，项目的是App()，页面的Page()和组件的Component()。这里对Component()的属性进行介绍。
• 组件的文件夹和Component()属性

 

 以三张图来组B站王元红老师视频教程

• 自定义组件向使用自定义组件的页面发送事件：自定义组件中使用this.triggerEvent('事件名',{传递的参数},{额外的信息，一般不写})。
• 使用自定义的页面获取自定义组件的对象：给自定义组件设置class或id（建议id，id具有唯一性，不可重复），在使用自定义组件页面内使用this.selectComponents(自定义组件的class或id)。

---