微信小程序02

数据绑定——Mustache语法

列表展示——wx:for

Page({
	data: {
		students: [
			{name: 'zhangsan', age: 15},
			{name: 'lisi', age: 18}
		]
	}
})

<view wx:for="{{students}}">{{item.name}}--{{item.age}}</view>

Page({
	data: {
　　　　　　movies: ['11', '22', '33']
	}
})

<view wx:for="{{movies}}">{{item}}</view>

监听事件

  data: {
    movies: ['11', '22', '33'],
    counter: 0
  },
  btnClick() {
    //错误做法：界面不会自动刷新
    //this.data.counter += 1
    //正确做法：使用this.setData()
    this.setData({
      counter: this.data.counter+1
    })
  }

<view>当前计数：{{counter}}</view>
<button size="mini" bindtap="btnClick">+</button>

样式的三种写法

（1）行内（内联）样式

<view style="color: red; font-size:32px;">哈哈哈</view>

（2）页内样式，在page.wxss中设置

<view class="box">呵呵呵</view>

（3）全局样式，在app.wxss中设置

<view class="box">嘿嘿嘿</view>

优先级：行内样式>页内样式>全局样式

支持的选择器

.class 　　　　　　　　　　.intro 　　　　　选择所有拥有 class="intro" 的组件
#id 　　　　　　　　　　　 #firstname 　　选择拥有 id="firstname" 的组件
element　　　　　　　　　view 　　　　选择所有view组件
element, element 　　　　view, checkbox 　　选择所有文档的view组件和所有的checkbox组件
::after 　　　　　　　　view::after 　　　　在view组件后边插入内容
::before　　　　　　　　view::before 　　在view组件前边插入内容

尺寸单位

rpx：可根据屏幕宽度进行自适应

样式导入

使用@import导入（相对路径或者绝对路径），用;表示语句结束

@import "./style/box.wxss";

逻辑判断

<view wx:if="{{true}}">哈哈哈</view>
	
<view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 80}}">良好</view>
<view wx:elif="{{score >=60 }}">及格</view>
<view wx:else>不及格</view>

wx:if和hidden在隐藏组件时有什么区别
hidden将一个组件隐藏起来时，该组件依然存在，通过设置样式 display: none 来实现
wx:if将一个组件隐藏起来时，该组件不再存在，通过控制是否渲染来实现

列表渲染wx:for

<!--遍历数组、字符串、数字-->
<view wx:for="{{['a', 'b', 'c']}}">{{item}} {{index}}</view>
<view wx:for="string">{{item}} {{index}}</view>
<view wx:for="{{8}}">{{item}}</view> <!--遍历8次，索引从0到7-->

默认情况下，item和index的名字是固定的，但某些情况下，我们需要换个名字，例如出现多层遍历时。

<block wx:for="{{movies}}" wx:for-item="movie" wx:for-index="i">
	<view>{{i}}  {{movie}}</view>
</block>

使用vx:for时，会报警告，让我们加一个key来提高性能。
这个和小程序内部使用了虚拟dom有关系
我们使用key可以给每个节点做一个唯一标识，在插入新节点的时候，可以采取性能更高的diff算法
所以说，key的作用是高效地更新虚拟dom

<view wx:for="{{movies}}" wx:for="{{index}}">{{item}}</view>

包裹标签block

<block></block>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
可以将需要进行遍历或判断的内容进行包裹，和view相比性能更高

引入include

include可以将目标文件中除了<template/> <wxs/>外的整个代码引入，相当于是拷贝到include位置

<include src="/wxml/header.wxml" />

wxml的导入有两种方式
　　import导入：
　　　　主要是导入template
　　　　不能进行递归导入
include导入：
　　　　将wxml中公共的的组件抽取到一个文件中
　　　　不能导入template/wxs，可以进行递归导入

wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合WXML，可以构建出页面的结构
在wxml中不能直接调用Page/Component中定义的函数，但某些情况，我们希望使用函数来处理wxml中的数据，这时可以使用wxs

WXS使用的限制和特点：

wxs的运行环境和其他的JavaScript代码是隔离的，wxs中不能调用JavaScript中定义的函数，也不能调用小程序提供的API
wxs函数不能作为组件的事件回调
由于运行环境的差异，ios设备上小程序内的wxs会比JavaScript代码快2~20倍，在Android设备上二者运行效率无差异

定义在wxml文件中

<wxs module="mywxs">
	//js代码
	var message = "hello world";
	var name = "zhangsan";
	
	var sum = function(num1, num2) {
		return num1+num2;
	}
	
	//common.js的模块化导出写法
	module.exports = {
		message: message,
		name: name,
		sum: sum
	}
</wxs>
	
<view>{{mywxs.message}}</view>
<view>{{mywxs.name}}</view>
<view>{{mywxs.sum(20, 5)}}</view>

定义在单独创建的wxs文件中，需要使用<wxs/>标签导入，注意必须使用相对路径，不能使用绝对路径

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

事件

事件是通过bind/catch这个属性绑定在组件上的
从1.5.0版本开始，可以在bind和catch后加上一个冒号

tap 　　　　　　手指触摸后马上离开
longpress 　　手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不会被触发
touchstart 　　手指触摸动作开始
touchmove 　　手指触摸后移动
touchcancel 　　手指触摸动作被打断，如来电提醒、弹窗等
touchend 　　手中触摸动作结束

事件参数的传递

格式：data-属性名称
获取参数：event.currentTarget.dataset.属性名称

<view class="container">
	<block wx:for="{{titles}}" wx:key="{{index}}">
		<view class="item" bind:tap="btnClick" data-index="{{index}}" data-item="item">{{item}}</view>
	</block>
</view>

btnClick(event) {
	var index = event.currentTarget.dataset.index;
	var item = event.currentTarget.dataset.item;
}

事件捕获和事件冒泡

当界面产生一个事件时，事件分为了捕获阶段和冒泡阶段

bind：一层层传递
catch：阻止事件的进一步传递

capture-bind:tap

capture-catch:tap

bind:tap

catch:tap

<view capture-catch:bind="handleCaptureView1" bind:tap="handleBindView1>
	<view capture-catch:bind="handleCaptureView2" bind:tap="handleBindView2>
		<view capture-catch:bind="handleCaptureView3" bind:tap="handleBindView3></view>
	</view>
</view>

自定义组件

自定义组件也是由json、wxml、wxss、js四个文件组成

组件不能使用id选择器、属性选择器、标签选择器
外部使用了标签选择器，会对组件内产生影响。为防止样式错乱，官方不推荐使用id、属性、标签选择器

json文件中component字段设置为true表示这是一个自定义组件

{
  "component": true,
  "usingComponents": {}
}

在需要使用自定义组件的页面json文件中进行如下设置

{
	"usingConponents": {
		"my-cpn": "/components/my-cpn/my-cpn"
	}
}

注意：

因为wxml节点标签名称只能是小写字母、中划线、下划线的组合，所以自定义组件的标签名也只能包含这些字符
自定义组件也可以引用其他的自定义组件
自定义组件和页面所在根目录名不能以"wx-"为前缀
如果在app.json 文件中的usingComponents声明某个组件，那么所有页面和组件都可以直接使用该组件

样式的相互影响

在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（样式隔离）属性
styleIsolation有三个取值：

isolated 表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会互相影响（默认值）
apply-shared 表示页面wxss样式将影响到自定义组件，但自定义组件wxss样式不会影响到页面
shared 页面wxss和自定义组件wxss互相影响

Component({
	options: {
		styleIsolation: "isolated"
	}
})

组件和页面通信

传递样式步骤：
在Component对象中，定义externalClasses属性
在组件内的wxml中使用externalClasses属性中的class
在页面中传入对应的class，并且给这个class设置样式

传递数据和样式

Component({
	properties: {
		title: {//支持的类型：String、Number、Boolean、Object、Array、null（不限制类型）
			type: String,
			value: '默认标题'
		},
		//没有指定默认值
		example: String
	},
	 externalClasses: ['titleclass']
}

<my-cpn title="哈哈哈" titleclass="content"/>

自定义事件传递数据

Component({
	methods: {
		handleIncrement() {
			this.triggerEvent('increment', {name: 'why', age: 18}, {})
		}
	}
})

<view>当前计数：{{counter}}
<my-cpn bind:increment="handleIncrement"/>

Page({
	data: {
		counter: 0
	},
	handleIncrement(event){
		console.log('event.detail.name');
		console.log('event.detail.age');
		this.setData({
			counter: this.data.counter + 1
		})
	}
})

获取组件对象

//可以通过组件的class、id属性获取该组件对象（class前加 . ，id前加 # ）
const my_cpn = this.selectComponent('#mycpn')

插槽slot

my-slot.wxml

<view class="left"><slot name="left"/></view>
<view class="center"><slot name="center"/></view>
<view class="right"><slot name="right"/></view>

my-slot.js 中开启多插槽

Component({
	options: {
		multipleSlots: true
	}
})

<my-slot>
	<view slot="left">left</view>
	<view slot="center">center</view>
	<view slot="right">right</view>
</my-slot>

Component

组件可以监听自身的生命周期，也可以监听所在页面的生命周期

Component({
	//监听所在页面生命周期
	pageLifetimes: {
		show() {
			console.log('监听组件所在页面显示出来时')
		},
		hide() {
			console.log('监听组件所在页面隐藏起来时')
		},
		resize() {
			console.log('监听页面尺寸的改变')
		}
	},
	//监听组件自身生命周期
	lifetimes: {
		created() {
			console.log('组件被创建出来')
		},
		attached() {
			console.log('组件被添加到页面')
		},
		ready() {
			console.log('组件被渲染出来')
		},
		moved() {
			console.log('组件被移动到另一个节点')
		},
		detached() {
			console.log('组件被隐藏掉')
		}
	}
})

posted @ 2021-04-11 16:56 455994206 阅读(73) 评论(0) 收藏举报

刷新页面返回顶部