小程序学习笔记(二)

事件:

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

touchstart 触摸动作开始

touchmove 手指触摸后移动

touchcancel 触摸动作中断, 如来电,弹窗等

touchend 触摸动作结束

tap 手指触摸后, 马上离开

longpress 手指触摸后,超过350毫秒离开,,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

 

触摸类事件支持捕获 阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

下面代码的执行顺序为: 2 4 3 1

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">

outer view

<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">

inner view

</view>

</view>

dataset注意事件:

data-zl-test == 获取时 event.currentTarget.dataset.zlTest

data-zlTest == 获取时 event.currentTarget.dataset.zltest

 

模板的引入 import:

只会应用import目标文件的template,

不会应用import目标文件中import的模板文件。

即:C import B, B import A,在C中可以使用B的template,B中可以使用A中的template, 但C中不可以使用A中的template

模板的引入 include:

相当于把目标文件内的内容 Copy 到当前的位置。除了<template/> <wxs/> 以外的整个代码引入

 

WXS (微信脚本)模块:

每个模块有自己的独立域,默认情况下, 只能本模块内互相通信,外面的模块不能应用。外面的模块要用的话,要用module.exports暴露给外界

如:

//bar.wxs

var msg = "Hello, i'm from bar.wxs";

var bar = function(d){return d};

module.exports = {

bar:bar,

msg:msg

};

应用:

//test.wxml

<wxs src="bar.wxs" module="tools"/>

<view>{{tools.bar(123)}} {{tools.msg}}</view>

require函数:

一个Wxs文件引用其它Wxs的时候,用require函数。

注意事件:

1、只能引用wxs文件,

2、Wxs为单列模式,在第一次引用时,会自动实例化模块为单例对象,多个页 面, 多个地方,多次引用,都会是同一个Wxs对象 。

3、一个模块定义后, 未引用,则模块不会被解析和运行。

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.msg);

console.log(tools.bar("test.wxs"));

<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />

控制台打印:

Hello, i'm from bar.wxs test.wxs

组件的应用:

我们可以把经常用到的功能块,做成组件, 为以后的开发提拱方便。

1、组件有自己的模板,页面,JS,Wxss文件。要编写一个组件, 要在对应的Json文件中, 定义component为true。{“component”:true}

2、组件的定义, 要在对应的JS文件中, 用Component()来定义组件的属性,方法, 属性值是可以通过外部传入动态改变

组件示例:

组件Wxml文件:

//test.wxml

<view>

<view class="newsTitle">组件内内容 {{title}}</view>

<slot></slot>

</view>

//test.js

Component({

method : function(){

//内部逻辑

},

properties : {

title :{

type : 'String',

value : "标题",

},

},

});

组件引用:

//page.json

{

"usingComponents" : {"test-component" : "/components/test"}

}

//page.wxml

<view>

<!-- 以下是对一个自定义组件的引用 -->

<test-component title=" Some text">

<view>我被安排到组件的slot内</view>

</test-component>

运行结果:

 

多个slot怎么办?

如果有组件应用多个slot,组件JS加属性:options:{multipleSlots:true}即可开启。

示例:

//组件 test.wxml

<view class="wrapper">

<view class='title'>这里是组件的内部节点 {{pageTitle}}</view>

<slot name="before"></slot>

<view>这是组件的内部细节, 传递testttile值为 {{testtitle}}</view>

<slot name="after"></slot>

</view>

//页面page.wxml,传递值的规则同【dataset注意事件的规则】

<view>

<test-component page-title="123123" testTitle='testTitle'>

<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->

<view class='insert-slot' slot="before"> 这里是插入到组件 name是before的 slot中的内容</view>

<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->

<view class='insert-slot' slot="after"> 这里是插入到组件 name是after slot中的内容</view>

</test-component>

</view>

运行结果:

 

组件引用外部Classic:

定义属性:externalClasses: [‘myclass’]形式来引入外部样式, 这样做, 就可以通过引入源页面来控制组件样式。 这样做为什么呢?官方文档这样说:

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。

组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。

子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。

继承样式,如 font 、 color ,会从组件外继承到组件内。

除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

注意:在同一个节点上使用普通样式类和外部样式类时,两个类的优先级是未定义的,因此最好避免这种情况。 

组件应用全局样式:

如果组件内的样式也应用全局样式,加属性:addGlobalClass:true,

当开放了全局样式类,存在外部样式污染组件样式的风险,请谨慎选择。

 

组件定义段与示例方法

0

发表评论

电子邮件地址不会被公开。